🐛 Fix logic preventing incorrect trial flow in subscription modal (#7831)

frontend/src/app/main/ui/settings/subscription.cljs

@@ -64,19 +64,24 @@
                :on-click cta-link-with-icon} cta-text-with-icon
       [:> icon* {:icon-id "open-link"
                  :size "s"}]])
-   (when (and cta-link cta-text (not show-button-cta)) [:button {:class (stl/css-case :cta-button true
+   (when (and cta-link cta-text (not show-button-cta))
+     [:button {:class (stl/css-case :cta-button true
                                     :bottom-link (not (and cta-link-trial cta-text-trial)))
                :on-click cta-link} cta-text])
-   (when (and cta-link cta-text show-button-cta) [:> button* {:variant "primary"
+   (when (and cta-link cta-text show-button-cta)
+     [:> button* {:variant "primary"
                   :type "button"
                   :class (stl/css-case :bottom-button (not (and cta-link-trial cta-text-trial)))
                   :on-click cta-link} cta-text])
-   (when (and cta-link-trial cta-text-trial) [:button {:class (stl/css :cta-button :bottom-link)
+   (when (and cta-link-trial cta-text-trial)
+     [:button {:class (stl/css :cta-button :bottom-link)
                :on-click cta-link-trial} cta-text-trial])])
+
 (defn schema:seats-form [min-editors]
   [:map {:title "SeatsForm"}
    [:min-members [::sm/number {:min min-editors
-                               :max 9999}]]])
+                               :max 9999}]]
+   [:redirect-to-payment-details :boolean]])
 
 (mf/defc subscribe-management-dialog
   {::mf/register modal/components
@@ -104,32 +109,30 @@
 
         initial
         (mf/with-memo [min-editors]
-          {:min-members min-editors})
+          {:min-members min-editors
+           :redirect-to-payment-details false})
 
         form
         (fm/use-form :schema (schema:seats-form min-editors)
                      :initial initial)
 
-        form-data-min-editors
+        submit-in-progress
-        (-> @form :clean-data :min-members)
+        (mf/use-ref false)
-
-        submit-in-progress*
-        (mf/use-state false)
 
         subscribe-to-unlimited
         (mf/use-fn
-         (mf/deps form-data-min-editors)
+         (fn [min-members add-payment-details?]
-         (fn [add-payment-details]
+           (when-not (mf/ref-val submit-in-progress)
-           (when (not @submit-in-progress*)
+             (mf/set-ref-val! submit-in-progress true)
-             (let [return-url (-> (rt/get-current-href) (rt/encode-url))
+             (let [return-url (-> (rt/get-current-href)
-                   href (if add-payment-details
+                                  (rt/encode-url))
-                          (dm/str "payments/subscriptions/create?type=unlimited&show=true&quantity=" form-data-min-editors "&returnUrl=" return-url)
+                   href       (dm/str "payments/subscriptions/create?type=unlimited&show="
-                          (dm/str "payments/subscriptions/create?type=unlimited&show=false&quantity=" form-data-min-editors "&returnUrl=" return-url))]
+                                      add-payment-details? "&quantity="
-               (reset! submit-in-progress* true)
+                                      min-members "&returnUrl=" return-url)]
                (reset! form nil)
                (st/emit! (ptk/event ::ev/event {::ev/name "create-trial-subscription"
                                                 :type "unlimited"
-                                                :quantity form-data-min-editors})
+                                                :quantity min-members})
                          (rt/nav-raw :href href))))))
 
         subscribe-to-enterprise
@@ -144,7 +147,7 @@
         handle-accept-dialog
         (mf/use-fn
          (fn []
-           (st/emit! (ptk/event ::ev/event {::ev/name "open-subscription-management"
+           (st/emit! (ev/event {::ev/name "open-subscription-management"
                                 ::ev/origin "settings"
                                 :section "subscription-management-modal"}))
            (let [current-href (rt/get-current-href)
@@ -159,14 +162,6 @@
            (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)
 
@@ -177,7 +172,24 @@
         (mf/use-fn
          (fn [event]
            (dom/stop-propagation event)
-           (swap! show-editors-list* not)))]
+           (swap! show-editors-list* not)))
+
+        on-submit
+        (mf/use-fn
+         (mf/deps current-subscription unlimited-modal-step*)
+         (fn [form]
+           (let [clean-data  (get @form :clean-data)
+                 min-members (get clean-data :min-members)
+                 redirect?   (get clean-data :redirect-to-payment-details)]
+             (if (or (contains? #{"unpaid" "canceled"} (:status current-subscription))
+                     (= @unlimited-modal-step* 2))
+               (subscribe-to-unlimited min-members redirect?)
+               (swap! unlimited-modal-step* inc)))))
+
+        on-add-payments-click
+        (mf/use-fn
+         (fn []
+           (swap! form update :data assoc :redirect-to-payment-details true)))]
 
     [:div {:class (stl/css :modal-overlay)}
      [:div {:class (stl/css :modal-dialog)}
@@ -207,7 +219,8 @@
                 [:li {:key (dm/str (:id editor)) :class (stl/css :team-name)} "- " (:name editor)])]])])
 
        (when (and
-              (or (and (= subscription-type "professional") (contains? #{"unlimited" "enterprise"} (:type current-subscription)))
+              (or (and (= subscription-type "professional")
+                       (contains? #{"unlimited" "enterprise"} (:type current-subscription)))
                   (and (= subscription-type "unlimited") (= (:type current-subscription) "enterprise")))
               (not (contains? #{"unpaid" "canceled"} (:status current-subscription)))
               (not subscribe-to-trial))
@@ -216,7 +229,7 @@
 
        (if (and (= subscription-type "unlimited")
                 (or subscribe-to-trial (contains? #{"unpaid" "canceled"} (:status current-subscription))))
-         [:& fm/form {:on-submit handle-unlimited-modal-step
+         [:& fm/form {:on-submit on-submit
                       :class (stl/css :seats-form)
                       :form form}
           (when (= unlimited-modal-step 1)
@@ -259,7 +272,9 @@
                  :on-click handle-close-dialog}]
 
                [:> fm/submit-button*
-                {:label (tr "labels.continue")
+                {:label (if (contains? #{"unpaid" "canceled"} (:status current-subscription))
+                          (tr "subscription.settings.subscribe")
+                          (tr "labels.continue"))
                  :class (stl/css :primary-button)}]]]])
 
           (when (= unlimited-modal-step 2)
@@ -272,15 +287,14 @@
 
                [:input
                 {:class (stl/css :cancel-button)
-                 :type "button"
+                 :type "submit"
-                 :value (tr "subscription.settings.management-dialog.step-2-skip-button")
+                 :value (tr "subscription.settings.management-dialog.step-2-skip-button")}]
-                 :on-click #(subscribe-to-unlimited false)}]
 
                [:input
                 {:class (stl/css :primary-button)
-                 :type "button"
+                 :type "submit"
                  :value (tr "subscription.settings.management-dialog.step-2-add-payment-button")
-                 :on-click #(subscribe-to-unlimited true)}]]]])]
+                 :on-click on-add-payments-click}]]]])]
 
          [:div {:class (stl/css :modal-footer)}
           [:div {:class (stl/css :action-buttons)}