🌐 Translate billing in PT & FR

Related to #210
baptisteArno · Mar 31, 2023 · 0620d48 · 0620d48
1 parent 53eecd4
commit 0620d48
Show file tree

Hide file tree

Showing 27 changed files with 374 additions and 153 deletions.
diff --git a/apps/builder/src/components/UnlockPlanAlertInfo.tsx b/apps/builder/src/components/UnlockPlanAlertInfo.tsx
@@ -9,18 +9,21 @@ import {
 } from '@chakra-ui/react'
 import React from 'react'
 import { ChangePlanModal } from '@/features/billing/components/ChangePlanModal'
-import { LimitReached } from '@/features/billing/types'
+import { useI18n } from '@/locales'
+
+type Props = {
+  contentLabel: React.ReactNode
+  buttonLabel?: string
+  type?: string
+} & AlertProps
 
 export const UnlockPlanAlertInfo = ({
   contentLabel,
-  buttonLabel = 'More info',
+  buttonLabel,
   type,
   ...props
-}: {
-  contentLabel: React.ReactNode
-  buttonLabel?: string
-  type?: LimitReached
-} & AlertProps) => {
+}: Props) => {
+  const t = useI18n()
   const { isOpen, onOpen, onClose } = useDisclosure()
   return (
     <Alert
@@ -40,7 +43,7 @@ export const UnlockPlanAlertInfo = ({
         flexShrink={0}
         ml="2"
       >
-        {buttonLabel}
+        {buttonLabel ?? t('billing.upgradeAlert.buttonDefaultLabel')}
       </Button>
       <ChangePlanModal isOpen={isOpen} onClose={onClose} type={type} />
     </Alert>

diff --git a/apps/builder/src/features/account/components/CreateTokenModal.tsx b/apps/builder/src/features/account/components/CreateTokenModal.tsx
@@ -81,7 +81,7 @@ export const CreateTokenModal = ({
         <ModalFooter>
           {newTokenValue ? (
             <Button onClick={onClose} colorScheme="blue">
-              {scopedT('doneButtonLabel')}
+              {scopedT('doneButton.label')}
             </Button>
           ) : (
             <Button
@@ -90,7 +90,7 @@ export const CreateTokenModal = ({
               isLoading={isSubmitting}
               onClick={createToken}
             >
-              {scopedT('createButtonLabel')}
+              {scopedT('createButton.label')}
             </Button>
           )}
         </ModalFooter>

diff --git a/apps/builder/src/features/analytics/components/AnalyticsGraphContainer.tsx b/apps/builder/src/features/analytics/components/AnalyticsGraphContainer.tsx
@@ -11,12 +11,13 @@ import React from 'react'
 import { useAnswersCount } from '../hooks/useAnswersCount'
 import { StatsCards } from './StatsCards'
 import { ChangePlanModal } from '@/features/billing/components/ChangePlanModal'
-import { LimitReached } from '@/features/billing/types'
 import { Graph } from '@/features/graph/components/Graph'
 import { GraphProvider } from '@/features/graph/providers/GraphProvider'
 import { GroupsCoordinatesProvider } from '@/features/graph/providers/GroupsCoordinateProvider'
+import { useI18n } from '@/locales'
 
 export const AnalyticsGraphContainer = ({ stats }: { stats?: Stats }) => {
+  const t = useI18n()
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { typebot, publishedTypebot } = useTypebot()
   const { showToast } = useToast()
@@ -69,7 +70,7 @@ export const AnalyticsGraphContainer = ({ stats }: { stats?: Stats }) => {
       <ChangePlanModal
         onClose={onClose}
         isOpen={isOpen}
-        type={LimitReached.ANALYTICS}
+        type={t('billing.limitMessage.analytics')}
       />
       <StatsCards stats={stats} pos="absolute" top={10} />
     </Flex>

diff --git a/apps/builder/src/features/auth/components/SignInForm.tsx b/apps/builder/src/features/auth/components/SignInForm.tsx
@@ -127,7 +127,7 @@ export const SignInForm = ({
                   }
                   isDisabled={isMagicLinkSent}
                 >
-                  {scopedT('emailSubmitButtonLabel')}
+                  {scopedT('emailSubmitButton.label')}
                 </Button>
               </HStack>
             </>

diff --git a/apps/builder/src/features/auth/components/SocialLoginButtons.tsx b/apps/builder/src/features/auth/components/SocialLoginButtons.tsx
@@ -65,7 +65,7 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          {scopedT('githubButtonLabel')}
+          {scopedT('githubButton.label')}
         </Button>
       )}
       {providers?.google && (
@@ -79,7 +79,7 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          {scopedT('googleButtonLabel')}
+          {scopedT('googleButton.label')}
         </Button>
       )}
       {providers?.facebook && (
@@ -93,7 +93,7 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          {scopedT('facebookButtonLabel')}
+          {scopedT('facebookButton.label')}
         </Button>
       )}
       {providers?.gitlab && (
@@ -107,7 +107,7 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          {scopedT('gitlabButtonLabel', {
+          {scopedT('gitlabButton.label', {
             gitlabProviderName: providers.gitlab.name,
           })}
         </Button>
@@ -123,7 +123,7 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          {scopedT('azureButtonLabel', {
+          {scopedT('azureButton.label', {
             azureProviderName: providers['azure-ad'].name,
           })}
         </Button>
@@ -137,7 +137,7 @@ export const SocialLoginButtons = ({ providers }: Props) => {
           }
           variant="outline"
         >
-          {scopedT('customButtonLabel', {
+          {scopedT('customButton.label', {
             customProviderName: providers['custom-oauth'].name,
           })}
         </Button>

diff --git a/apps/builder/src/features/billing/billing.spec.ts b/apps/builder/src/features/billing/billing.spec.ts
@@ -193,7 +193,7 @@ test('plan changes should work', async ({ page }) => {
   // Go to customer portal
   await Promise.all([
     page.waitForNavigation(),
-    page.click('text="Billing Portal"'),
+    page.click('text="Billing portal"'),
   ])
   await expect(page.locator('text="Add payment method"')).toBeVisible()
 

diff --git a/apps/builder/src/features/billing/components/BillingPortalButton.tsx b/apps/builder/src/features/billing/components/BillingPortalButton.tsx
@@ -1,12 +1,14 @@
 import { useToast } from '@/hooks/useToast'
 import { trpc } from '@/lib/trpc'
+import { useScopedI18n } from '@/locales'
 import { Button, Link } from '@chakra-ui/react'
 
 type Props = {
   workspaceId: string
 }
 
 export const BillingPortalButton = ({ workspaceId }: Props) => {
+  const scopedT = useScopedI18n('billing')
   const { showToast } = useToast()
   const { data } = trpc.billing.getBillingPortalUrl.useQuery(
     {
@@ -22,7 +24,7 @@ export const BillingPortalButton = ({ workspaceId }: Props) => {
   )
   return (
     <Button as={Link} href={data?.billingPortalUrl} isLoading={!data}>
-      Billing Portal
+      {scopedT('billingPortalButton.label')}
     </Button>
   )
 }
diff --git a/apps/builder/src/features/billing/components/BillingSettingsLayout.tsx b/apps/builder/src/features/billing/components/BillingSettingsLayout.tsx
@@ -8,8 +8,10 @@ import { TextLink } from '@/components/TextLink'
 import { ChangePlanForm } from './ChangePlanForm'
 import { UsageProgressBars } from './UsageProgressBars'
 import { CurrentSubscriptionSummary } from './CurrentSubscriptionSummary'
+import { useScopedI18n } from '@/locales'
 
 export const BillingSettingsLayout = () => {
+  const scopedT = useScopedI18n('billing')
   const { workspace, refreshWorkspace } = useWorkspace()
 
   if (!workspace) return null
@@ -24,10 +26,9 @@ export const BillingSettingsLayout = () => {
         <HStack maxW="500px">
           <StripeClimateLogo />
           <Text fontSize="xs" color="gray.500">
-            Typebot is contributing 1% of your subscription to remove CO₂ from
-            the atmosphere.{' '}
+            {scopedT('contribution.preLink')}{' '}
             <TextLink href="https://climate.stripe.com/5VCRAq" isExternal>
-              More info.
+              {scopedT('contribution.link')}
             </TextLink>
           </Text>
         </HStack>

diff --git a/apps/builder/src/features/billing/components/ChangePlanForm.tsx b/apps/builder/src/features/billing/components/ChangePlanForm.tsx
@@ -11,13 +11,15 @@ import { ParentModalProvider } from '@/features/graph/providers/ParentModalProvi
 import { useUser } from '@/features/account/hooks/useUser'
 import { StarterPlanPricingCard } from './StarterPlanPricingCard'
 import { ProPlanPricingCard } from './ProPlanPricingCard'
+import { useScopedI18n } from '@/locales'
 
 type Props = {
   workspace: Pick<Workspace, 'id' | 'stripeId' | 'plan'>
   onUpgradeSuccess: () => void
 }
 
 export const ChangePlanForm = ({ workspace, onUpgradeSuccess }: Props) => {
+  const scopedT = useScopedI18n('billing')
   const { user } = useUser()
   const { showToast } = useToast()
   const [preCheckoutPlan, setPreCheckoutPlan] =
@@ -38,7 +40,7 @@ export const ChangePlanForm = ({ workspace, onUpgradeSuccess }: Props) => {
         onUpgradeSuccess()
         showToast({
           status: 'success',
-          description: `Workspace ${plan} plan successfully updated 🎉`,
+          description: scopedT('updateSuccessToast.description', { plan }),
         })
       },
     })
@@ -123,9 +125,9 @@ export const ChangePlanForm = ({ workspace, onUpgradeSuccess }: Props) => {
         />
       </HStack>
       <Text color="gray.500">
-        Need custom limits? Specific features?{' '}
+        {scopedT('customLimit.preLink')}{' '}
         <TextLink href={'https://typebot.io/enterprise-lead-form'} isExternal>
-          Let&apos;s chat!
+          {scopedT('customLimit.link')}
         </TextLink>
       </Text>
     </Stack>

diff --git a/apps/builder/src/features/billing/components/ChangePlanModal.tsx b/apps/builder/src/features/billing/components/ChangePlanModal.tsx
@@ -1,5 +1,6 @@
 import { AlertInfo } from '@/components/AlertInfo'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
+import { useI18n, useScopedI18n } from '@/locales'
 import {
   Modal,
   ModalBody,
@@ -10,11 +11,10 @@ import {
   Button,
   HStack,
 } from '@chakra-ui/react'
-import { LimitReached } from '../types'
 import { ChangePlanForm } from './ChangePlanForm'
 
 type ChangePlanModalProps = {
-  type?: LimitReached
+  type?: string
   isOpen: boolean
   onClose: () => void
 }
@@ -24,6 +24,7 @@ export const ChangePlanModal = ({
   isOpen,
   type,
 }: ChangePlanModalProps) => {
+  const t = useI18n()
   const { workspace, refreshWorkspace } = useWorkspace()
   return (
     <Modal isOpen={isOpen} onClose={onClose} size="2xl">
@@ -32,7 +33,7 @@ export const ChangePlanModal = ({
         <ModalBody as={Stack} spacing="6" pt="10">
           {type && (
             <AlertInfo>
-              You need to upgrade your plan in order to {type}
+              {t('billing.upgradeLimitLabel', { type: type })}
             </AlertInfo>
           )}
           {workspace && (
@@ -46,7 +47,7 @@ export const ChangePlanModal = ({
         <ModalFooter>
           <HStack>
             <Button colorScheme="gray" onClick={onClose}>
-              Cancel
+              {t('cancel')}
             </Button>
           </HStack>
         </ModalFooter>

diff --git a/apps/builder/src/features/billing/components/CurrentSubscriptionSummary.tsx b/apps/builder/src/features/billing/components/CurrentSubscriptionSummary.tsx
@@ -6,6 +6,7 @@ import { PlanTag } from './PlanTag'
 import { BillingPortalButton } from './BillingPortalButton'
 import { trpc } from '@/lib/trpc'
 import { Workspace } from '@typebot.io/schemas'
+import { useScopedI18n } from '@/locales'
 
 type Props = {
   workspace: Pick<Workspace, 'id' | 'plan' | 'stripeId'>
@@ -16,6 +17,7 @@ export const CurrentSubscriptionSummary = ({
   workspace,
   onCancelSuccess,
 }: Props) => {
+  const scopedT = useScopedI18n('billing.currentSubscription')
   const { showToast } = useToast()
 
   const { mutate: cancelSubscription, isLoading: isCancelling } =
@@ -34,9 +36,9 @@ export const CurrentSubscriptionSummary = ({
 
   return (
     <Stack spacing="4">
-      <Heading fontSize="3xl">Subscription</Heading>
+      <Heading fontSize="3xl">{scopedT('heading')}</Heading>
       <HStack data-testid="current-subscription">
-        <Text>Current workspace subscription: </Text>
+        <Text>{scopedT('subheading')} </Text>
         {isCancelling ? (
           <Spinner color="gray.500" size="xs" />
         ) : (
@@ -52,7 +54,7 @@ export const CurrentSubscriptionSummary = ({
                   cancelSubscription({ workspaceId: workspace.id })
                 }
               >
-                Cancel my subscription
+                {scopedT('cancelLink')}
               </Link>
             )}
           </>
@@ -62,10 +64,7 @@ export const CurrentSubscriptionSummary = ({
       {isSubscribed && !isCancelling && (
         <>
           <Stack spacing="4">
-            <Text fontSize="sm">
-              Need to change payment method or billing information? Head over to
-              your billing portal:
-            </Text>
+            <Text fontSize="sm">{scopedT('billingPortalDescription')}</Text>
             <BillingPortalButton workspaceId={workspace.id} />
           </Stack>
         </>

diff --git a/apps/builder/src/features/billing/components/InvoicesList.tsx b/apps/builder/src/features/billing/components/InvoicesList.tsx
@@ -18,12 +18,14 @@ import Link from 'next/link'
 import React from 'react'
 import { trpc } from '@/lib/trpc'
 import { useToast } from '@/hooks/useToast'
+import { useScopedI18n } from '@/locales'
 
 type Props = {
   workspaceId: string
 }
 
 export const InvoicesList = ({ workspaceId }: Props) => {
+  const scopedT = useScopedI18n('billing.invoices')
   const { showToast } = useToast()
   const { data, status } = trpc.billing.listInvoices.useQuery(
     {
@@ -38,18 +40,18 @@ export const InvoicesList = ({ workspaceId }: Props) => {
 
   return (
     <Stack spacing={6}>
-      <Heading fontSize="3xl">Invoices</Heading>
+      <Heading fontSize="3xl">{scopedT('heading')}</Heading>
       {data?.invoices.length === 0 && status !== 'loading' ? (
-        <Text>No invoices found for this workspace.</Text>
+        <Text>{scopedT('empty')}</Text>
       ) : (
         <TableContainer>
           <Table>
             <Thead>
               <Tr>
                 <Th w="0" />
                 <Th>#</Th>
-                <Th>Paid at</Th>
-                <Th>Subtotal</Th>
+                <Th>{scopedT('paidAt')}</Th>
+                <Th>{scopedT('subtotal')}</Th>
                 <Th w="0" />
               </Tr>
             </Thead>

diff --git a/apps/builder/src/features/billing/components/PlanTag.tsx b/apps/builder/src/features/billing/components/PlanTag.tsx
@@ -1,3 +1,4 @@
+import { useI18n, useScopedI18n } from '@/locales'
 import { Tag, TagProps, ThemeTypings } from '@chakra-ui/react'
 import { Plan } from '@typebot.io/prisma'