✨ 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,10 +189,11 @@
 
        (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"
@@ -217,8 +232,28 @@
                  :on-click handle-close-dialog}]
 
                [:> fm/submit-button*
-             {:label (if subscribe-to-trial (tr "subscription.settings.start-trial") (tr "labels.continue"))
+                {:label (tr "labels.continue")
-              :class (stl/css :primary-button)}]]]]
+                 :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)}

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