✨ Add improvements to the payment flow (#7776)

* ✨ Add improvements payment flow

* 📎 PR feedback

* 📎 Fix conflicts

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)}
+             (when (get-in @form [:errors :min-members])
-           [:div {:class (stl/css :fields-row)}
+               [:div {:class (stl/css :error-message)}
-            [:& fm/input {:type "number"
+                (tr "subscription.settings.management.dialog.input-error")])
-                          :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 :unlimited-capped-warning)}
-            [:div {:class (stl/css :error-message)}
+              (tr "subscription.settings.management.dialog.unlimited-capped-warning")]
-             (tr "subscription.settings.management.dialog.input-error")])
 
-          [:div {:class (stl/css :unlimited-capped-warning)}
+             [:div {:class (stl/css :modal-footer)}
-           (tr "subscription.settings.management.dialog.unlimited-capped-warning")]
+              [: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)}
+               [:> fm/submit-button*
-           [:div {:class (stl/css :action-buttons)}
+                {:label (tr "labels.continue")
-            [:input
+                 :class (stl/css :primary-button)}]]]])
-             {:class (stl/css :cancel-button)
-              :type "button"
-              :value (tr "ds.confirm-cancel")
-              :on-click handle-close-dialog}]
 
-            [:> fm/submit-button*
+          (when (= unlimited-modal-step 2)
-             {:label (if subscribe-to-trial (tr "subscription.settings.start-trial") (tr "labels.continue"))
+            [:*
-              :class (stl/css :primary-button)}]]]]
+             [: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)}

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);
 }
 

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 ""

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
+#: src/app/main/ui/dashboard/subscription.cljs:84
-#, markdown
 msgid "subscription.dashboard.power-up.professional.bottom-description"
-msgstr ""
+msgstr "Consigue almacenamiento adicional, recuperación de archivos y mucho más para tus equipos."
-"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 ""