diff --git a/src/components/Pricing/Card.tsx b/src/components/Pricing/Card.tsx index e8aac26f..162ad74b 100644 --- a/src/components/Pricing/Card.tsx +++ b/src/components/Pricing/Card.tsx @@ -46,7 +46,7 @@ const PricingCard = ({ diff --git a/src/components/Pricing/ComparisonTable.tsx b/src/components/Pricing/ComparisonTable.tsx index 8807226b..f81ec9a1 100644 --- 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 ( - + {typeof value === 'boolean' ? ( ) : typeof value === 'number' ? ( diff --git a/src/components/Pricing/Plans.tsx b/src/components/Pricing/Plans.tsx index b373068c..cebe79d6 100644 --- 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 -}) => ( - - - - {title || Upgrade your subscription} - - - - +}) => { + 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 ( + + + + {title || Upgrade your subscription} + + + + + + + {subscription.plan.id !== PlanId.Free && ( + + }}> + 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. + + + )} + + + Need some help? + + + + + + + ) +} - - - - 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. - - - - - Need some help? - - - - - - +const PlanText = ({ children }: { children?: ReactNode }) => ( + + "{children}" + ) diff --git a/src/i18n/locales/ca.json b/src/i18n/locales/ca.json index 399502a1..8ca2084d 100644 --- 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 }}. Si actualitzes, només et cobrarem la diferència anual. En el següent període de facturació, que comença el {{ billing }}, 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 per a reactivar-la.", diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index 8d4ba650..d518638b 100644 --- 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. Upgrade now, and you'll only pay the difference for the remaining time in your billing period. Starting from your next billing cycle on {{ billing }}, 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 to reactivate it.", diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json index 00b43542..c212a752 100644 --- 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 }}. Si actualizas, solo te cobraremos la diferencia anual. En el próximo período de facturación, que comienza el {{ billing }}, 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 to reactivate it.",