remove ordering (#3283)

src/components/DonateMethods/helpers.ts

@@ -5,7 +5,7 @@ const methodDetails: {
   [K in DonateMethodId]: Pick<TDonateMethod, "name" | "tooltip">;
 } = {
   crypto: { name: "Crypto" },
-  daf: { name: "DAF", tooltip: "requires card payment and must be next to it" },
+  daf: { name: "DAF", tooltip: "requires card payment" },
   stocks: { name: "Stocks" },
   stripe: { name: "Card/Bank" },
 };
@@ -30,23 +30,3 @@ export function fill(sub = all): TDonateMethod[] {
   const missing = all.filter((x) => !sub.includes(x));
   return toMethods(existing).concat(toMethods(missing, true));
 }
-
-export function order<T extends DonateMethodId | TDonateMethod>(arr: T[]): T[] {
-  const getId = (item: T): DonateMethodId =>
-    typeof item === "object" ? item.id : item;
-
-  const result = [...arr];
-  const stripeIndex = result.findIndex((item) => getId(item) === "stripe");
-  const dafIndex = result.findIndex((item) => getId(item) === "daf");
-
-  if (stripeIndex !== -1 && dafIndex !== -1) {
-    // Remove 'daf' from its current position
-    const [daf] = result.splice(dafIndex, 1);
-
-    // Insert 'daf' next to 'stripe'
-    const newStripeIndex = result.findIndex((item) => getId(item) === "stripe");
-    result.splice(newStripeIndex + 1, 0, daf);
-  }
-
-  return result;
-}

src/pages/Admin/Charity/Settings/Form.tsx

@@ -1,6 +1,6 @@
 import { ErrorMessage } from "@hookform/error-message";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { DonateMethods, fill, order } from "components/DonateMethods";
+import { DonateMethods, fill } from "components/DonateMethods";
 import { LockedSplitSlider } from "components/donation";
 import { CheckField, Field, Form as _Form } from "components/form";
 import { useController, useForm } from "react-hook-form";
@@ -80,28 +80,19 @@ export default function Form(props: Props) {
           programDonateDisabled,
           splitLockPct,
           payout_minimum,
-          donateMethods: dms,
+          donateMethods,
           ...fv
         }) => {
-          const ordered = order(dms);
-          const ids = ordered.filter((m) => !m.disabled).map((m) => m.id);
-
           await updateEndow({
             ...fv,
             progDonationsAllowed: !programDonateDisabled,
             splitLiqPct: 100 - splitLockPct,
             id: props.id,
             payout_minimum: +payout_minimum,
-            donateMethods: order(ids),
+            donateMethods: donateMethods
+              .filter((m) => !m.disabled)
+              .map((m) => m.id),
           });
-
-          /** manually re-set the `methods` to trigger animation which doesnt' trigger in ff scenario
-           *  1. init order-a: [ stripe, daf, crypto, stocks ]
-           *  2. reordered [stripe, crypto, stocks, daf]
-           *  3. submit: becomes order-a (no change - animation doesn't run)
-           */
-          await new Promise((r) => setTimeout(r, 1000));
-          resetField("donateMethods", { defaultValue: ordered });
         }
       )}
       className="w-full max-w-4xl justify-self-center grid content-start gap-6 mt-6"

src/pages/Donate/Content.tsx

@@ -1,5 +1,4 @@
 import flying_character from "assets/images/flying-character.png";
-import { order } from "components/DonateMethods";
 import ExtLink from "components/ExtLink";
 import { DappLogo } from "components/Image";
 import { Steps } from "components/donation";
@@ -53,9 +52,7 @@ function Content({ intent, endowment }: Props) {
             config={{
               splitDisabled: endowment.splitFixed ?? false,
               liquidSplitPct: endowment.splitLiqPct ?? 50,
-              methodIds: endowment.donateMethods
-                ? order(endowment.donateMethods)
-                : undefined,
+              methodIds: endowment.donateMethods,
             }}
             className="md:border border-gray-l4 rounded-lg row-start-2"
           />

src/pages/Widget/Configurer/Configurer.tsx

@@ -1,6 +1,6 @@
 import { ErrorMessage } from "@hookform/error-message";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { DonateMethods, order } from "components/DonateMethods";
+import { DonateMethods } from "components/DonateMethods";
 import { LockedSplitSlider, ProgramSelector } from "components/donation";
 import { CheckField, Field, Form } from "components/form";
 import type { Dispatch, SetStateAction } from "react";
@@ -58,17 +58,8 @@ export default function Configurer({
   const isDescriptionTextShown = watch("isDescriptionTextShown");
   const isTitleShown = watch("isTitleShown");
 
-  const submit: SubmitHandler<FormValues> = async ({ methods, ...fv }) => {
-    const ordered = order(methods);
-    setConfig({ ...fv, methods: ordered });
-
-    /** manually re-set the `methods` to trigger animation which doesnt' trigger in ff scenario
-     *  1. init order-a: [ stripe, daf, crypto, stocks ]
-     *  2. reordered [stripe, crypto, stocks, daf]
-     *  3. submit: becomes order-a (no change - animation doesn't run)
-     */
-    await new Promise((r) => setTimeout(r, 1000));
-    resetField("methods", { defaultValue: ordered });
+  const submit: SubmitHandler<FormValues> = async (fv) => {
+    setConfig(fv);
   };
 
   return (

src/pages/Widget/Widget.tsx

@@ -1,4 +1,4 @@
-import { fill, order } from "components/DonateMethods";
+import { fill } from "components/DonateMethods";
 import QueryLoader from "components/QueryLoader";
 import Seo from "components/Seo";
 import { DEFAULT_PROGRAM } from "components/donation";
@@ -44,7 +44,7 @@ function Content({ endowment }: { endowment?: Endowment }) {
     isTitleShown: true,
     liquidSplitPct: endowment?.splitLiqPct ?? 50,
     splitDisabled: endowment?.splitFixed ?? false,
-    methods: order(filled),
+    methods: filled,
     accentPrimary: "#2D89C8",
     accentSecondary: "#E6F1F9",
     program: DEFAULT_PROGRAM,