🐛 (billing) Fix currency possible mismatch on sub update

apps/builder/src/features/billing/components/ChangePlanForm/ChangePlanForm.tsx

@@ -42,6 +42,7 @@ export const ChangePlanForm = () => {
       workspaceId: workspace.id,
       additionalChats: selectedChatsLimitIndex,
       additionalStorage: selectedStorageLimitIndex,
+      currency: data?.currency,
     })
     if (typeof response === 'object' && response?.error) {
       showToast({ description: response.error.message })
@@ -75,6 +76,7 @@ export const ChangePlanForm = () => {
           onPayClick={(props) =>
             handlePayClick({ ...props, plan: Plan.STARTER })
           }
+          currency={data?.currency}
         />
 
         <ProPlanContent
@@ -85,6 +87,7 @@ export const ChangePlanForm = () => {
             workspace?.plan === Plan.PRO ? data?.additionalStorageIndex : 0
           }
           onPayClick={(props) => handlePayClick({ ...props, plan: Plan.PRO })}
+          currency={data?.currency}
         />
       </HStack>
       <Text color="gray.500">

apps/builder/src/features/billing/components/ChangePlanForm/ProPlanContent.tsx

@@ -32,6 +32,7 @@ import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
 type ProPlanContentProps = {
   initialChatsLimitIndex?: number
   initialStorageLimitIndex?: number
+  currency?: 'usd' | 'eur'
   onPayClick: (props: {
     selectedChatsLimitIndex: number
     selectedStorageLimitIndex: number
@@ -41,6 +42,7 @@ type ProPlanContentProps = {
 export const ProPlanContent = ({
   initialChatsLimitIndex,
   initialStorageLimitIndex,
+  currency,
   onPayClick,
 }: ProPlanContentProps) => {
   const { workspace } = useWorkspace()
@@ -153,7 +155,8 @@ export const ProPlanContent = ({
                 Plan.PRO,
                 selectedChatsLimitIndex ?? 0,
                 selectedStorageLimitIndex ?? 0
-              ) ?? NaN
+              ) ?? NaN,
+              currency
             )}
             <chakra.span fontSize="md">/ month</chakra.span>
           </Heading>

apps/builder/src/features/billing/components/ChangePlanForm/StarterPlanContent.tsx

@@ -29,6 +29,7 @@ import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
 type StarterPlanContentProps = {
   initialChatsLimitIndex?: number
   initialStorageLimitIndex?: number
+  currency?: 'eur' | 'usd'
   onPayClick: (props: {
     selectedChatsLimitIndex: number
     selectedStorageLimitIndex: number
@@ -38,6 +39,7 @@ type StarterPlanContentProps = {
 export const StarterPlanContent = ({
   initialChatsLimitIndex,
   initialStorageLimitIndex,
+  currency,
   onPayClick,
 }: StarterPlanContentProps) => {
   const { workspace } = useWorkspace()
@@ -126,7 +128,8 @@ export const StarterPlanContent = ({
               Plan.STARTER,
               selectedChatsLimitIndex ?? 0,
               selectedStorageLimitIndex ?? 0
-            ) ?? NaN
+            ) ?? NaN,
+            currency
           )}
           <chakra.span fontSize="md">/ month</chakra.span>
         </Heading>

apps/builder/src/features/billing/hooks/useCurrentSubscriptionInfo.ts

@@ -13,6 +13,7 @@ export const useCurrentSubscriptionInfo = ({
     {
       additionalChatsIndex: number
       additionalStorageIndex: number
+      currency?: 'eur' | 'usd'
     },
     Error
   >(

apps/builder/src/features/billing/queries/upgradePlanQuery.tsx

@@ -15,6 +15,7 @@ type UpgradeProps = {
   workspaceId: string
   additionalChats: number
   additionalStorage: number
+  currency?: 'eur' | 'usd'
 }
 
 export const upgradePlanQuery = async ({
@@ -31,6 +32,7 @@ const updatePlan = async ({
   workspaceId,
   additionalChats,
   additionalStorage,
+  currency,
 }: Omit<UpgradeProps, 'user'>): Promise<{ newPlan?: Plan; error?: Error }> => {
   const { data, error } = await sendRequest<{ message: string }>({
     method: 'PUT',
@@ -41,7 +43,7 @@ const updatePlan = async ({
       stripeId,
       additionalChats,
       additionalStorage,
-      currency: guessIfUserIsEuropean() ? 'eur' : 'usd',
+      currency: currency ?? (guessIfUserIsEuropean() ? 'eur' : 'usd'),
     },
   })
   if (error || !data) return { error }

apps/builder/src/pages/api/stripe/subscription.ts

@@ -63,6 +63,7 @@ const getSubscriptionDetails =
           (item) =>
             item.price.id === process.env.STRIPE_ADDITIONAL_STORAGE_PRICE_ID
         )?.quantity ?? 0,
+      currency: subscriptions.data[0]?.currency,
     }
   }
 

packages/utils/pricing.ts

@@ -176,11 +176,11 @@ export const guessIfUserIsEuropean = () =>
       : europeanUnionExclusiveLanguageCodes.includes(languageCode)
   })
 
-export const formatPrice = (price: number) => {
+export const formatPrice = (price: number, currency?: 'eur' | 'usd') => {
   const isEuropean = guessIfUserIsEuropean()
   const formatter = new Intl.NumberFormat(isEuropean ? 'fr-FR' : 'en-US', {
     style: 'currency',
-    currency: isEuropean ? 'EUR' : 'USD',
+    currency: currency?.toUpperCase() ?? (isEuropean ? 'EUR' : 'USD'),
     maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501)
   })
   return formatter.format(price)