✨ Add improvements payment flow

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

@@ -26,7 +26,7 @@
     "professional"))
 
 (mf/defc cta-power-up*
-  [{:keys [top-title top-description bottom-description bottom-button bottom-button-href has-dropdown]}]
+  [{:keys [top-title top-description bottom-description bottom-button bottom-button-href has-dropdown is-highlighted]}]
   (let [show-data* (mf/use-state false)
         show-data (deref show-data*)
         handle-click
@@ -40,7 +40,8 @@
            (dom/stop-propagation event)
            (st/emit! (rt/nav-raw :href bottom-button-href))))]
 
-    [:div {:class (stl/css :cta-power-up)
+    [:div {:class (stl/css-case :cta-power-up true
+                                :highlighted is-highlighted)
            :on-click handle-click}
      [:button {:class (stl/css-case :cta-top-section true
                                     :cta-without-dropdown (not has-dropdown))}
@@ -79,7 +80,8 @@
         :bottom-description (tr "subscription.dashboard.power-up.professional.bottom-description")
         :bottom-button (tr "subscription.dashboard.power-up.professional.bottom-button")
         :bottom-button-href subscription-href
-        :has-dropdown false}]
+        :has-dropdown false
+        :is-highlighted true}]
 
       "unlimited"
       (if subscription-is-trial
@@ -87,24 +89,28 @@
          {:top-title (tr "subscription.dashboard.power-up.your-subscription")
           :top-description (tr "subscription.dashboard.power-up.trial.top-title")
           :bottom-description (tr "subscription.dashboard.power-up.trial.bottom-description" subscription-href)
-          :has-dropdown true}]
+          :has-dropdown true
+          :is-highlighted false}]
 
         [:> cta-power-up*
          {:top-title (tr "subscription.dashboard.power-up.your-subscription")
           :top-description (tr "subscription.dashboard.power-up.unlimited-plan")
           :bottom-description (tr "subscription.dashboard.power-up.unlimited.bottom-text" subscription-href)
-          :has-dropdown true}])
+          :has-dropdown true
+          :is-highlighted false}])
 
       "enterprise"
       (if subscription-is-trial
         [:> cta-power-up*
          {:top-title (tr "subscription.dashboard.power-up.your-subscription")
           :top-description (tr "subscription.dashboard.power-up.enterprise-trial.top-title")
-          :has-dropdown false}]
+          :has-dropdown false
+          :is-highlighted false}]
         [:> cta-power-up*
          {:top-title (tr "subscription.dashboard.power-up.your-subscription")
           :top-description (tr "subscription.dashboard.power-up.enterprise-plan")
-          :has-dropdown false}]))))
+          :has-dropdown false
+          :is-highlighted false}]))))
 
 (mf/defc team*
   [{:keys [is-owner team]}]

frontend/src/app/main/ui/dashboard/subscription.scss

@@ -19,6 +19,12 @@
   padding: var(--sp-m);
 }
 
+.cta-power-up.highlighted {
+  background: var(--color-background-quaternary);
+  border: $b-1 solid var(--color-accent-primary-muted);
+  padding: var(--sp-l);
+}
+
 .cta-top-section {
   @include deprecated.buttonStyle;
   display: grid;
@@ -54,6 +60,11 @@
   margin-block-start: var(--sp-m);
   padding-block-start: var(--sp-m);
 }
+
+.highlighted .cta-bottom-section {
+  border-block-start: $b-1 solid var(--color-accent-primary-muted);
+}
+
 .cta-bottom-section .content {
   @include t.use-typography("body-medium");
   @include deprecated.buttonStyle;
@@ -66,6 +77,10 @@
   margin-block-start: var(--sp-s);
 }
 
+.highlighted .cta-bottom-button {
+  margin-block-start: var(--sp-m);
+}
+
 .cta-text,
 .cta-title {
   text-align: left;
@@ -76,10 +91,19 @@
   margin-block-end: var(--sp-xs);
 }
 
+.highlighted .cta-title {
+  @include t.use-typography("body-medium");
+}
+
 .cta-text {
   @include t.use-typography("title-small");
 }
 
+.highlighted .cta-text {
+  @include t.use-typography("body-large");
+  color: var(--color-foreground-primary);
+}
+
 .cta-bottom-section .content a {
   @include t.use-typography("body-medium");
   color: var(--color-accent-tertiary);

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

@@ -34,7 +34,7 @@
            cta-link-with-icon
            editors
            recommended
-           has-trial-cta]}]
+           show-button-cta]}]
 
   [:div {:class (stl/css-case :plan-card true
                               :plan-card-highlight recommended)}
@@ -57,13 +57,13 @@
       [:li {:key (dm/str benefit) :class (stl/css :benefit)} "- " benefit])]
    (when (and cta-link-with-icon cta-text-with-icon) [:button {:class (stl/css :cta-button :more-info)
                                                                :on-click cta-link-with-icon} cta-text-with-icon deprecated-icon/open-link])
-   (when (and cta-link cta-text (not has-trial-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)))
+                                                                                      :bottom-link (not (and cta-link-trial cta-text-trial)))
-                                                               :on-click cta-link} cta-text])
+                                                                 :on-click cta-link} cta-text])
-   (when (and cta-link cta-text has-trial-cta) [:> button* {:variant "primary"
+   (when (and cta-link cta-text show-button-cta) [:> button* {:variant "primary"
-                                                            :type "button"
+                                                              :type "button"
-                                                            :class (stl/css-case :bottom-button (not (and cta-link-trial cta-text-trial)))
+                                                              :class (stl/css-case :bottom-button (not (and cta-link-trial cta-text-trial)))
-                                                            :on-click cta-link} cta-text])
+                                                              :on-click cta-link} cta-text])
    (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]
@@ -459,7 +459,7 @@
                          :cta-text-with-icon (tr "subscription.settings.more-information")
                          :cta-link-with-icon go-to-pricing-page
                          :recommended (= subscription-type "professional")
-                         :has-trial-cta (not (:type subscription))}])
+                         :show-button-cta (= subscription-type "professional")}])
 
        (when (not= subscription-type "enterprise")
          [:> plan-card* {:card-title (tr "subscription.settings.enterprise")
@@ -474,5 +474,5 @@
                          :cta-link #(open-subscription-modal "enterprise" subscription)
                          :cta-text-with-icon (tr "subscription.settings.more-information")
                          :cta-link-with-icon go-to-pricing-page
-                         :has-trial-cta (not (:type subscription))}])]]]))
+                         :show-button-cta (= subscription-type "professional")}])]]]))