From cc32b22e8ad19404fbf6aa2915659e9001d99c7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20L=C3=B3pez?= Date: Thu, 20 Nov 2025 13:07:57 +0100 Subject: [PATCH] :sparkles: Add improvements to the payment flow (#7776) * :sparkles: Add improvements payment flow * :paperclip: PR feedback * :paperclip: Fix conflicts --- .../app/main/ui/settings/subscription.cljs | 123 +++++++++++------- .../app/main/ui/settings/subscription.scss | 2 +- frontend/translations/en.po | 13 +- frontend/translations/es.po | 20 ++- 4 files changed, 106 insertions(+), 52 deletions(-) diff --git a/frontend/src/app/main/ui/settings/subscription.cljs b/frontend/src/app/main/ui/settings/subscription.cljs index 1d2a2f2b9d..c0ade1f61c 100644 --- a/frontend/src/app/main/ui/settings/subscription.cljs +++ b/frontend/src/app/main/ui/settings/subscription.cljs @@ -83,7 +83,9 @@ ::mf/register-as :management-dialog} [{:keys [subscription-type current-subscription editors subscribe-to-trial]}] - (let [subscription-name (if subscribe-to-trial + (let [unlimited-modal-step* (mf/use-state 1) + unlimited-modal-step (deref unlimited-modal-step*) + subscription-name (if subscribe-to-trial (if (= subscription-type "unlimited") (tr "subscription.settings.unlimited-trial") (tr "subscription.settings.enterprise-trial")) @@ -91,19 +93,22 @@ "professional" (tr "subscription.settings.professional") "unlimited" (tr "subscription.settings.unlimited") "enterprise" (tr "subscription.settings.enterprise"))) - min-editors (or (count editors) 1) + min-editors (if (seq editors) (count editors) 1) initial (mf/with-memo [min-editors] {:min-members min-editors}) form (fm/use-form :schema (schema:seats-form min-editors) :initial initial) submit-in-progress* (mf/use-state false) subscribe-to-unlimited (mf/use-fn - (fn [form] + (mf/deps form) + (fn [add-payment-details] (when (not @submit-in-progress*) - (reset! submit-in-progress* true) (let [data (:clean-data @form) return-url (-> (rt/get-current-href) (rt/encode-url)) - href (dm/str "payments/subscriptions/create?type=unlimited&quantity=" (:min-members data) "&returnUrl=" return-url)] + href (if add-payment-details + (dm/str "payments/subscriptions/create?type=unlimited&show=true&quantity=" (:min-members data) "&returnUrl=" return-url) + (dm/str "payments/subscriptions/create?type=unlimited&show=false&quantity=" (:min-members data) "&returnUrl=" return-url))] + (reset! submit-in-progress* true) (reset! form nil) (st/emit! (ptk/event ::ev/event {::ev/name "create-trial-subscription" :type "unlimited" @@ -133,6 +138,13 @@ (st/emit! (ptk/event ::ev/event {::ev/name "close-subscription-modal"})) (modal/hide!))) + handle-unlimited-modal-step (mf/use-fn + (mf/deps unlimited-modal-step) + (fn [] + (if (= unlimited-modal-step 1) + (reset! unlimited-modal-step* 2) + (reset! unlimited-modal-step* 1)))) + show-editors-list* (mf/use-state false) show-editors-list (deref show-editors-list*) handle-click (mf/use-fn @@ -146,10 +158,12 @@ [:> icon* {:icon-id "close" :size "m"}]] [:div {:class (stl/css :modal-title :subscription-title)} - (tr "subscription.settings.management.dialog.title" subscription-name)] + (if (= unlimited-modal-step 2) + (tr "subscription.settings.management-dialog.step-2-title") + (tr "subscription.settings.management.dialog.title" subscription-name))] [:div {:class (stl/css :modal-content)} - (when (seq editors) + (when (and (seq editors) (not= unlimited-modal-step 2)) [:* [:p {:class (stl/css :editors-text)} (tr "subscription.settings.management.dialog.currently-editors-title" (c (count editors)))] [:button {:class (stl/css :cta-button :show-editors-button) :on-click handle-click} @@ -175,50 +189,71 @@ (if (and (= subscription-type "unlimited") (or subscribe-to-trial (contains? #{"unpaid" "canceled"} (:status current-subscription)))) - [:& fm/form {:on-submit subscribe-to-unlimited + [:& fm/form {:on-submit handle-unlimited-modal-step :class (stl/css :seats-form) :form form} + (when (= unlimited-modal-step 1) + [:* + [:div {:class (stl/css :editors-wrapper)} + [:div {:class (stl/css :fields-row)} + [:& fm/input {:type "number" + :name :min-members + :show-error false + :label "" + :class (stl/css :input-field)}]] + [:div {:class (stl/css :editors-cost)} + [:span {:class (stl/css :modal-text-medium)} + (when (> (get-in @form [:clean-data :min-members]) 25) + [:> i18n/tr-html* + {:class (stl/css :modal-text-cap) + :tag-name "span" + :content (tr "subscription.settings.management.dialog.price-month" "175")}]) + [:> i18n/tr-html* + {:class (stl/css-case :text-strikethrough (> (get-in @form [:clean-data :min-members]) 25)) + :tag-name "span" + :content (tr "subscription.settings.management.dialog.price-month" + (* 7 (or (get-in @form [:clean-data :min-members]) 0)))}]] + [:span {:class (stl/css :modal-text-medium)} + (tr "subscription.settings.management.dialog.payment-explanation")]]] - [:div {:class (stl/css :editors-wrapper)} - [:div {:class (stl/css :fields-row)} - [:& fm/input {:type "number" - :name :min-members - :show-error false - :label "" - :class (stl/css :input-field)}]] - [:div {:class (stl/css :editors-cost)} - [:span {:class (stl/css :modal-text-medium)} - (when (> (get-in @form [:clean-data :min-members]) 25) - [:> i18n/tr-html* - {:class (stl/css :modal-text-cap) - :tag-name "span" - :content (tr "subscription.settings.management.dialog.price-month" "175")}]) - [:> i18n/tr-html* - {:class (stl/css-case :text-strikethrough (> (get-in @form [:clean-data :min-members]) 25)) - :tag-name "span" - :content (tr "subscription.settings.management.dialog.price-month" - (* 7 (or (get-in @form [:clean-data :min-members]) 0)))}]] - [:span {:class (stl/css :modal-text-medium)} - (tr "subscription.settings.management.dialog.payment-explanation")]]] + (when (get-in @form [:errors :min-members]) + [:div {:class (stl/css :error-message)} + (tr "subscription.settings.management.dialog.input-error")]) - (when (get-in @form [:errors :min-members]) - [:div {:class (stl/css :error-message)} - (tr "subscription.settings.management.dialog.input-error")]) + [:div {:class (stl/css :unlimited-capped-warning)} + (tr "subscription.settings.management.dialog.unlimited-capped-warning")] - [:div {:class (stl/css :unlimited-capped-warning)} - (tr "subscription.settings.management.dialog.unlimited-capped-warning")] + [:div {:class (stl/css :modal-footer)} + [:div {:class (stl/css :action-buttons)} + [:input + {:class (stl/css :cancel-button) + :type "button" + :value (tr "ds.confirm-cancel") + :on-click handle-close-dialog}] - [:div {:class (stl/css :modal-footer)} - [:div {:class (stl/css :action-buttons)} - [:input - {:class (stl/css :cancel-button) - :type "button" - :value (tr "ds.confirm-cancel") - :on-click handle-close-dialog}] + [:> fm/submit-button* + {:label (tr "labels.continue") + :class (stl/css :primary-button)}]]]]) - [:> fm/submit-button* - {:label (if subscribe-to-trial (tr "subscription.settings.start-trial") (tr "labels.continue")) - :class (stl/css :primary-button)}]]]] + (when (= unlimited-modal-step 2) + [:* + [:p {:class (stl/css :modal-text-medium)} + (tr "subscription.settings.management-dialog.step-2-description")] + + [:div {:class (stl/css :modal-footer)} + [:div {:class (stl/css :action-buttons)} + + [:input + {:class (stl/css :cancel-button) + :type "button" + :value (tr "ubscription.settings.management-dialog.step-2-skip-button") + :on-click #(subscribe-to-unlimited false)}] + + [:input + {:class (stl/css :primary-button) + :type "button" + :value (tr "subscription.settings.management-dialog.step-2-add-payment-button") + :on-click #(subscribe-to-unlimited true)}]]]])] [:div {:class (stl/css :modal-footer)} [:div {:class (stl/css :action-buttons)} diff --git a/frontend/src/app/main/ui/settings/subscription.scss b/frontend/src/app/main/ui/settings/subscription.scss index 89081c0a1f..5bb2443551 100644 --- a/frontend/src/app/main/ui/settings/subscription.scss +++ b/frontend/src/app/main/ui/settings/subscription.scss @@ -157,7 +157,7 @@ @extend .button-icon; height: var(--sp-l); width: var(--sp-l); - color: var(--color-accent-primary); + stroke: var(--color-accent-primary); margin-inline-start: var(--sp-xs); } diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 9e9ecc5630..d2fd9da755 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -4543,7 +4543,6 @@ msgid "subscription.dashboard.power-up.professional.bottom-button" msgstr "Power up!" #: src/app/main/ui/dashboard/subscription.cljs:83 -#, markdown msgid "subscription.dashboard.power-up.professional.bottom-description" msgstr "Get extra storage, file recovery and more for your teams." @@ -4719,6 +4718,18 @@ msgstr "**$%s**/month" msgid "subscription.settings.management.dialog.title" msgstr "Apply %s to your teams" +msgid "subscription.settings.management-dialog.step-2-title" +msgstr "Help us grow and make your trial easier" + +msgid "subscription.settings.management-dialog.step-2-description" +msgstr "Add your payment details now to keep your subscription running smoothly after the trial and continue supporting our open-source project. You won’t be charged yet." + +msgid "subscription.settings.management-dialog.step-2-skip-button" +msgstr "Skip for now and start trial" + +msgid "subscription.settings.management-dialog.step-2-add-payment-button" +msgstr "Add payment details" + #: src/app/main/ui/settings/subscription.cljs:209 msgid "subscription.settings.management.dialog.unlimited-capped-warning" msgstr "" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index c37bc8d736..e58facf94b 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -4523,16 +4523,12 @@ msgstr "Plan Enterprise" msgid "subscription.dashboard.power-up.enterprise-trial.top-title" msgstr "Plan Enterprise (Prueba)" -#: src/app/main/ui/dashboard/subscription.cljs:84 msgid "subscription.dashboard.power-up.professional.bottom-button" msgstr "Mejóralo!" -#: src/app/main/ui/dashboard/subscription.cljs:83 -#, markdown +#: src/app/main/ui/dashboard/subscription.cljs:84 msgid "subscription.dashboard.power-up.professional.bottom-description" -msgstr "" -"Consigue almacenamiento adicional, recuperación de archivos y mucho más " -"para tus equipos." +msgstr "Consigue almacenamiento adicional, recuperación de archivos y mucho más para tus equipos." #: src/app/main/ui/dashboard/subscription.cljs:82 msgid "subscription.dashboard.power-up.professional.top-title" @@ -4716,6 +4712,18 @@ msgstr "**$%s**/mes" msgid "subscription.settings.management.dialog.title" msgstr "Aplica %s a tus equipos" +msgid "subscription.settings.management-dialog.step-2-title" +msgstr "Ayúdanos a crecer y facilita tu periodo de prueba" + +msgid "subscription.settings.management-dialog.step-2-description" +msgstr "Añade ahora tus datos de pago para que tu suscripción siga funcionando sin problemas tras finalizar el periodo de prueba y seguir apoyando nuestro proyecto de código abierto. Por ahora no se te hará ningún cargo." + +msgid "subscription.settings.management-dialog.step-2-skip-button" +msgstr "Saltar por ahora y comenzar la prueba" + +msgid "subscription.settings.management-dialog.step-2-add-payment-button" +msgstr "Añadir datos de pago" + #: src/app/main/ui/settings/subscription.cljs:209 msgid "subscription.settings.management.dialog.unlimited-capped-warning" msgstr ""