From c4d349de55881d2250af89e8d9e53c82b3a010c4 Mon Sep 17 00:00:00 2001 From: ap-justin <89639563+ap-justin@users.noreply.github.com> Date: Tue, 3 Sep 2024 22:08:48 +0800 Subject: [PATCH] remove ordering --- src/components/DonateMethods/helpers.test.ts | 84 -------------------- src/components/DonateMethods/helpers.ts | 22 +---- src/pages/Admin/Charity/Settings/Form.tsx | 19 ++--- src/pages/Donate/Content.tsx | 5 +- src/pages/Widget/Configurer/Configurer.tsx | 15 +--- src/pages/Widget/Widget.tsx | 4 +- 6 files changed, 12 insertions(+), 137 deletions(-) delete mode 100644 src/components/DonateMethods/helpers.test.ts diff --git a/src/components/DonateMethods/helpers.test.ts b/src/components/DonateMethods/helpers.test.ts deleted file mode 100644 index 2a0c4a53cc..0000000000 --- a/src/components/DonateMethods/helpers.test.ts +++ /dev/null @@ -1,84 +0,0 @@ -import type { TDonateMethod } from "types/components"; -import { describe, expect, test } from "vitest"; -import { order } from "./helpers"; - -describe("donate methods ordering", () => { - test("daf next to stripe when stripe comes first", () => { - expect(order(["stripe", "stocks", "crypto", "daf"])).toEqual([ - "stripe", - "daf", - "stocks", - "crypto", - ]); - }); - - test("daf next to stripe when daf comes before stripe", () => { - expect(order(["daf", "stocks", "crypto", "stripe"])).toEqual([ - "stocks", - "crypto", - "stripe", - "daf", - ]); - }); - - test("preserve order when daf is already next to stripe", () => { - expect(order(["stocks", "stripe", "daf", "crypto"])).toEqual([ - "stocks", - "stripe", - "daf", - "crypto", - ]); - expect(order(["stocks", "daf", "stripe", "crypto"])).toEqual([ - "stocks", - "stripe", - "daf", - "crypto", - ]); - }); - - test("preserve order when only stripe is present", () => { - expect(order(["stocks", "stripe", "crypto"])).toEqual([ - "stocks", - "stripe", - "crypto", - ]); - }); - - test("preserve order when neither stripe nor daf is present", () => { - expect(order(["stocks", "crypto"])).toEqual(["stocks", "crypto"]); - }); - - test("should handle empty array", () => { - expect(order([])).toEqual([]); - }); - - test("should handle array with only stripe and daf", () => { - expect(order(["daf", "stripe"])).toEqual(["stripe", "daf"]); - expect(order(["stripe", "daf"])).toEqual(["stripe", "daf"]); - }); - - test("should maintain relative positions of other elements when daf is not first", () => { - expect(order(["stocks", "daf", "crypto", "stripe"])).toEqual([ - "stocks", - "crypto", - "stripe", - "daf", - ]); - }); - - test("should work with {id: T} input", () => { - expect( - order([ - { id: "daf" } as TDonateMethod, - { id: "stocks" } as TDonateMethod, - { id: "crypto" } as TDonateMethod, - { id: "stripe" } as TDonateMethod, - ]) - ).toEqual([ - { id: "stocks" }, - { id: "crypto" }, - { id: "stripe" }, - { id: "daf" }, - ]); - }); -}); diff --git a/src/components/DonateMethods/helpers.ts b/src/components/DonateMethods/helpers.ts index b1e0fb16cc..6949b480a6 100644 --- a/src/components/DonateMethods/helpers.ts +++ b/src/components/DonateMethods/helpers.ts @@ -5,7 +5,7 @@ const methodDetails: { [K in DonateMethodId]: Pick; } = { 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(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; -} diff --git a/src/pages/Admin/Charity/Settings/Form.tsx b/src/pages/Admin/Charity/Settings/Form.tsx index b6cbadd742..d21bd05a60 100644 --- a/src/pages/Admin/Charity/Settings/Form.tsx +++ b/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" diff --git a/src/pages/Donate/Content.tsx b/src/pages/Donate/Content.tsx index 78b36729b6..8810e4a0db 100644 --- a/src/pages/Donate/Content.tsx +++ b/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" /> diff --git a/src/pages/Widget/Configurer/Configurer.tsx b/src/pages/Widget/Configurer/Configurer.tsx index 5376e024ec..fe86def6eb 100644 --- a/src/pages/Widget/Configurer/Configurer.tsx +++ b/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 = 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 = async (fv) => { + setConfig(fv); }; return ( diff --git a/src/pages/Widget/Widget.tsx b/src/pages/Widget/Widget.tsx index 0c20fb6f97..16eedc67b1 100644 --- a/src/pages/Widget/Widget.tsx +++ b/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,