🚸 Add currency selection in precheckout form

baptisteArno · Nov 19, 2024 · 05cc23e · 05cc23e
1 parent 4a4e198
commit 05cc23e
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 7 deletions.
diff --git a/apps/builder/src/features/billing/components/ChangePlanForm.tsx b/apps/builder/src/features/billing/components/ChangePlanForm.tsx
@@ -82,6 +82,15 @@ export const ChangePlanForm = ({
     }
   };
 
+  const updateCurrency = (currency: "eur" | "usd") => {
+    if (preCheckoutPlan) {
+      setPreCheckoutPlan({
+        ...preCheckoutPlan,
+        currency,
+      });
+    }
+  };
+
   if (
     data?.subscription?.cancelDate ||
     data?.subscription?.status === "past_due"
@@ -120,6 +129,7 @@ export const ChangePlanForm = ({
             existingEmail={user?.email ?? undefined}
             existingCompany={user?.company ?? undefined}
             onClose={() => setPreCheckoutPlan(undefined)}
+            onCurrencyChange={updateCurrency}
           />
         </ParentModalProvider>
       )}
@@ -131,7 +141,9 @@ export const ChangePlanForm = ({
                 currentPlan={workspace.plan}
                 onPayClick={() => handlePayClick(Plan.STARTER)}
                 isLoading={isUpdatingSubscription}
-                currency={data.subscription?.currency}
+                currency={
+                  preCheckoutPlan?.currency ?? data.subscription?.currency
+                }
               />
             )}
 
@@ -140,7 +152,9 @@ export const ChangePlanForm = ({
                 currentPlan={workspace.plan}
                 onPayClick={() => handlePayClick(Plan.PRO)}
                 isLoading={isUpdatingSubscription}
-                currency={data.subscription?.currency}
+                currency={
+                  preCheckoutPlan?.currency ?? data.subscription?.currency
+                }
               />
             )}
           </HStack>

diff --git a/apps/builder/src/features/billing/components/PreCheckoutModal.tsx b/apps/builder/src/features/billing/components/PreCheckoutModal.tsx
@@ -1,3 +1,4 @@
+import { DropdownList } from "@/components/DropdownList";
 import { TextInput } from "@/components/inputs";
 import { Select } from "@/components/inputs/Select";
 import { useParentModal } from "@/features/graph/providers/ParentModalProvider";
@@ -31,6 +32,7 @@ export type PreCheckoutModalProps = {
     | undefined;
   existingCompany?: string;
   existingEmail?: string;
+  onCurrencyChange: (currency: "eur" | "usd") => void;
   onClose: () => void;
 };
 
@@ -46,6 +48,7 @@ export const PreCheckoutModal = ({
   selectedSubscription,
   existingCompany,
   existingEmail,
+  onCurrencyChange,
   onClose,
 }: PreCheckoutModalProps) => {
   const { t } = useTranslate();
@@ -124,6 +127,10 @@ export const PreCheckoutModal = ({
     });
   };
 
+  const updateCurrency = (currency: "EUR" | "USD") => {
+    onCurrencyChange(currency.toLowerCase() as "eur" | "usd");
+  };
+
   return (
     <Modal isOpen={isDefined(selectedSubscription)} onClose={onClose}>
       <ModalOverlay />
@@ -165,6 +172,16 @@ export const PreCheckoutModal = ({
                 />
               </HStack>
             </FormControl>
+            <FormControl as={HStack} justify="space-between">
+              <FormLabel>Currency:</FormLabel>
+              {selectedSubscription && (
+                <DropdownList
+                  items={["USD", "EUR"]}
+                  currentItem={selectedSubscription.currency.toUpperCase()}
+                  onItemSelect={updateCurrency}
+                />
+              )}
+            </FormControl>
 
             <Button
               type="submit"

diff --git a/apps/builder/src/features/dashboard/components/DashboardPage.tsx b/apps/builder/src/features/dashboard/components/DashboardPage.tsx
@@ -56,6 +56,15 @@ export const DashboardPage = () => {
     }
   }, [createCustomCheckoutSession, router.query, user, workspace]);
 
+  const updateCurrency = (currency: "eur" | "usd") => {
+    if (preCheckoutPlan) {
+      setPreCheckoutPlan({
+        ...preCheckoutPlan,
+        currency,
+      });
+    }
+  };
+
   return (
     <Stack minH="100vh">
       <Seo title={workspace?.name ?? t("dashboard.title")} />
@@ -67,6 +76,7 @@ export const DashboardPage = () => {
             existingEmail={user?.email ?? undefined}
             existingCompany={workspace?.name ?? undefined}
             onClose={() => setPreCheckoutPlan(undefined)}
+            onCurrencyChange={updateCurrency}
           />
         </ParentModalProvider>
       )}

diff --git a/packages/billing/src/helpers/formatPrice.ts b/packages/billing/src/helpers/formatPrice.ts
@@ -12,10 +12,13 @@ export const formatPrice = (
   },
 ) => {
   const isEuropean = guessIfUserIsEuropean();
-  const formatter = new Intl.NumberFormat(isEuropean ? "fr-FR" : "en-US", {
-    style: "currency",
-    currency: currency?.toUpperCase() ?? (isEuropean ? "EUR" : "USD"),
-    maximumFractionDigits: maxFractionDigits,
-  });
+  const formatter = new Intl.NumberFormat(
+    isEuropean && currency !== "usd" ? "fr-FR" : "en-US",
+    {
+      style: "currency",
+      currency: currency?.toUpperCase() ?? (isEuropean ? "EUR" : "USD"),
+      maximumFractionDigits: maxFractionDigits,
+    },
+  );
   return formatter.format(price);
 };