Fix billing date not properly formated

Also fixed PlanText rendering p inside of p

refs #921

src/components/Pricing/Plans.tsx

@@ -291,13 +291,16 @@ export const SubscriptionModal = ({
   onClose: () => void
   title?: ReactNode
 }) => {
+  const { t } = useTranslation()
   const { subscription } = useSubscription()
   const translations = usePlanTranslations()
 
   if (!subscription) return null
 
   const plan = translations[subscription.plan.id].title
   const billing = new Date(subscription.subscriptionDetails.renewalDate)
+  // the date format used by the billing date
+  const format = t('pricing.date_format', { defaultValue: 'dd/mm/yy' })
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} variant='pricing-modal' size='full'>
@@ -312,7 +315,7 @@ export const SubscriptionModal = ({
         <ModalFooter>
           {subscription.plan.id !== PlanId.Free && (
             <Text>
-              <Trans i18nKey='pricing.your_plan' values={{ plan, billing }} components={{ plan: <PlanText /> }}>
+              <Trans i18nKey='pricing.your_plan' values={{ plan, billing, format }} 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.
@@ -334,7 +337,7 @@ export const SubscriptionModal = ({
 }
 
 const PlanText = ({ children }: { children?: ReactNode }) => (
-  <Text fontWeight='bold' display='inline'>
+  <Text as='span' fontWeight='bold' display='inline'>
     "{children}"
   </Text>
 )

src/i18n/locales/ca.json

@@ -870,12 +870,12 @@
     "ticket_support": "Suport per tiquets",
     "unlimited_yearly_processes": "Processos anuals il·limitats",
     "up_to_admins": "Fins a {{ admin }} admin. i {{ org }} organitzacions",
-    "upgrade_title": "Actualitza la teva subscripció",
+    "upgrade_title": "Actualitza el teu pla",
     "white_label": "White label solution",
     "yearly_processes_one": "{{ count }} procés anual",
     "yearly_processes_many": "",
     "yearly_processes_other": "{{ count }} processos anuals",
-    "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."
+    "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, format }}</plan>, pagaràs íntegrament pel nou pla seleccionat."
   },
   "pricing_card": {
     "from": "Des de {{price}}/any",

src/i18n/locales/en.json

@@ -862,11 +862,11 @@
     "ticket_support": "Ticket support",
     "unlimited_yearly_processes": "Unlimited yearly voting processes",
     "up_to_admins": "Up to {{ admin }} admin and {{ org }} org",
-    "upgrade_title": "Upgrade your subscription",
+    "upgrade_title": "Upgrade your plan",
     "white_label": "White label solution",
     "yearly_processes_one": "{{ count }} yearly voting process",
     "yearly_processes_other": "{{ count }} yearly voting processes",
-    "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."
+    "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, format }}</plan>, you'll be charged the full price for your new plan."
   },
   "pricing_card": {
     "from": "From ${{ price }}/year",

src/i18n/locales/es.json

@@ -870,12 +870,12 @@
     "ticket_support": "Soporte por tickets",
     "unlimited_yearly_processes": "Procesos anuales ilimitados",
     "up_to_admins": "Hasta {{ admin }} admin. y {{ org }} organizaciones",
-    "upgrade_title": "Actualiza tu subscripción",
+    "upgrade_title": "Actualiza tu plan",
     "white_label": "White label solution",
     "yearly_processes_one": "{{ count }} proceso anual",
     "yearly_processes_many": "",
     "yearly_processes_other": "{{ count }} procesos anuales",
-    "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."
+    "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, format }}</plan>, pagarás íntegramente por el nuevo plan seleccionado."
   },
   "pricing_card": {
     "from": "Desde {{price}}/año",