Add current plan information to the plans component

Also disabled such information for free plans, since it's intended to be seen by people upgrading from a payment plan. refs #921
vocdoni · Jan 8, 2025 · 80e4127 · 80e4127
1 parent af613ad
commit 80e4127
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 32 deletions.
diff --git a/src/components/Pricing/Card.tsx b/src/components/Pricing/Card.tsx
@@ -46,7 +46,7 @@ const PricingCard = ({
       </CardHeader>
       <CardBody>
         <Button isDisabled={isDisabled || false} onClick={() => setValue('planId', plan.id)} type='submit'>
-          <Trans i18nKey='view_pricing_plan'>View Pricing Plan</Trans>
+          <Trans i18nKey='subscribe'>Subscribe</Trans>
         </Button>
         <Text>
           <Trans i18nKey='pricing_card.from' values={{ price }}>

diff --git a/src/components/Pricing/ComparisonTable.tsx b/src/components/Pricing/ComparisonTable.tsx
@@ -47,7 +47,7 @@ const ComparisonSectionTable = ({ titleKey, plans, features, category }: Compari
                 {plans.map((plan) => {
                   const value = dotobject(plan, featurePath)
                   return (
-                    <Td key={plan.id} textAlign='center'>
+                    <Td key={plan.id} textAlign='center' w={40}>
                       {typeof value === 'boolean' ? (
                         <BooleanIcon value={value} />
                       ) : typeof value === 'number' ? (

diff --git a/src/components/Pricing/Plans.tsx b/src/components/Pricing/Plans.tsx
@@ -22,6 +22,7 @@ import { ApiEndpoints } from '~components/Auth/api'
 import { useSubscription } from '~components/Auth/Subscription'
 import { useAuth } from '~components/Auth/useAuth'
 import { PlanId } from '~constants'
+import { Routes } from '~src/router/routes'
 import { currency } from '~utils/numbers'
 import PricingCard from './Card'
 import { usePricingModal } from './use-pricing-modal'
@@ -289,32 +290,51 @@ export const SubscriptionModal = ({
   isOpen: boolean
   onClose: () => void
   title?: ReactNode
-}) => (
-  <Modal isOpen={isOpen} onClose={onClose} variant='pricing-modal' size='full'>
-    <ModalOverlay />
-    <ModalContent>
-      <ModalHeader>{title || <Trans i18nKey='pricing.upgrade_title'>Upgrade your subscription</Trans>}</ModalHeader>
-      <ModalCloseButton />
-      <ModalBody>
-        <SubscriptionPlans />
-      </ModalBody>
+}) => {
+  const { subscription } = useSubscription()
+  const translations = usePlanTranslations()
+
+  if (!subscription) return null
+
+  const plan = translations[subscription.plan.id].title
+  const billing = new Date(subscription.subscriptionDetails.renewalDate)
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} variant='pricing-modal' size='full'>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>{title || <Trans i18nKey='pricing.upgrade_title'>Upgrade your subscription</Trans>}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <SubscriptionPlans />
+        </ModalBody>
+
+        <ModalFooter>
+          {subscription.plan.id !== PlanId.Free && (
+            <Text>
+              <Trans i18nKey='pricing.your_plan' values={{ plan, billing }} components={{ plan: <PlanText /> }}>
+                You're currently subscribed to the {{ plan }} plan. Upgrade now, and you'll only pay the difference for
+                the remaining time in your billing period. Starting from your next billing cycle on dd/mm/yy, you'll be
+                charged the full price for your new plan.
+              </Trans>
+            </Text>
+          )}
+          <Box>
+            <Text>
+              <Trans i18nKey='pricing.help'>Need some help?</Trans>
+            </Text>
+            <Button as={ReactRouterLink} to={Routes.contact} target='_blank'>
+              <Trans i18nKey='contact_us'>Contact us</Trans>
+            </Button>
+          </Box>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
 
-      <ModalFooter>
-        <Text>
-          <Trans i18nKey='pricing.your_plan'>
-            Currently you are subscribed to the 'Your plan' subscription. If you upgrade, we will only charge the yearly
-            difference. In the next billing period, starting on 'dd/mm/yy' you will pay for the new select plan.
-          </Trans>
-        </Text>
-        <Box>
-          <Text>
-            <Trans i18nKey='pricing.help'>Need some help?</Trans>
-          </Text>
-          <Button as={ReactRouterLink}>
-            <Trans i18nKey='contact_us'>Contact us</Trans>
-          </Button>
-        </Box>
-      </ModalFooter>
-    </ModalContent>
-  </Modal>
+const PlanText = ({ children }: { children?: ReactNode }) => (
+  <Text fontWeight='bold' display='inline'>
+    "{children}"
+  </Text>
 )
diff --git a/src/i18n/locales/ca.json b/src/i18n/locales/ca.json
@@ -875,7 +875,7 @@
     "yearly_processes_one": "{{ count }} procés anual",
     "yearly_processes_many": "",
     "yearly_processes_other": "{{ count }} processos anuals",
-    "your_plan": "Actualment estàs subscrit al pla 'Your plan'. Si actualitzes, només et cobrarem la diferència anual. En el següent període de facturació, que comença el 'dd/mm/aa', pagaràs pel nou pla seleccionat."
+    "your_plan": "Actualment estàs subscrit al pla <plan>{{ plan }}</plan>. Si actualitzes, només et cobrarem la diferència anual. En el següent període de facturació, que comença el <plan>{{ billing }}</plan>, pagaràs íntegrament pel nou pla seleccionat."
   },
   "pricing_card": {
     "from": "Des de {{price}}/any",
@@ -1125,6 +1125,7 @@
   "signup_title": "Registra't",
   "skip": "Ometre",
   "submit": "Submit",
+  "subscribe": "Subscribe",
   "subscription": {
     "change_plan_button": "Change",
     "inactive_subscription_description": "La teva suscripció és inactiva actualment. Considera <2>contactar-nos</2> per a reactivar-la.",

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -866,7 +866,7 @@
     "white_label": "White label solution",
     "yearly_processes_one": "{{ count }} yearly voting process",
     "yearly_processes_other": "{{ count }} yearly voting processes",
-    "your_plan": "Currently you are subscribed to the 'Your plan' subscription. If you upgrade, we will only charge the yearly difference. In the next billing period, starting on 'dd/mm/yy' you will pay for the new select plan."
+    "your_plan": "You're currently subscribed to the <plan>{{ plan }}</plan> plan. Upgrade now, and you'll only pay the difference for the remaining time in your billing period. Starting from your next billing cycle on <plan>{{ billing }}</plan>, you'll be charged the full price for your new plan."
   },
   "pricing_card": {
     "from": "From ${{ price }}/year",
@@ -1113,6 +1113,7 @@
   "signup_title": "Sign Up",
   "skip": "Skip",
   "submit": "Submit",
+  "subscribe": "Subscribe",
   "subscription": {
     "change_plan_button": "Change",
     "inactive_subscription_description": "Your subscription is currently inactive. Consider <2>contacting us</2> to reactivate it.",

diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
@@ -875,7 +875,7 @@
     "yearly_processes_one": "{{ count }} proceso anual",
     "yearly_processes_many": "",
     "yearly_processes_other": "{{ count }} procesos anuales",
-    "your_plan": "Actualmente estás suscrito al plan 'Your plan'. Si actualizas, solo te cobraremos la diferencia anual. En el próximo período de facturación, que comienza el 'dd/mm/aa', pagarás por el nuevo plan seleccionado."
+    "your_plan": "Actualmente estás suscrito al plan <plan>{{ plan }}</plan>. Si actualizas, solo te cobraremos la diferencia anual. En el próximo período de facturación, que comienza el <plan>{{ billing }}</plan>, pagarás íntegramente por el nuevo plan seleccionado."
   },
   "pricing_card": {
     "from": "Desde {{price}}/año",
@@ -1125,6 +1125,7 @@
   "signup_title": "Regístrate",
   "skip": "Omitir",
   "submit": "Envía",
+  "subscribe": "Suscribirse",
   "subscription": {
     "change_plan_button": "Change",
     "inactive_subscription_description": "Your subscription is currently inactive. Consider <2>contacting us</2> to reactivate it.",