✨ Add improvements payment flow

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

@@ -10,8 +10,8 @@
    [app.main.store :as st]
    [app.main.ui.components.dropdown-menu :refer [dropdown-menu-item*]]
    [app.main.ui.ds.buttons.button :refer [button*]]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.ds.product.cta :refer [cta*]]
-   [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
@@ -48,7 +48,10 @@
       [:div {:class (stl/css :content)}
        [:span {:class (stl/css :cta-title)} top-title]
        [:span {:class (stl/css :cta-text) :data-testid "subscription-name"} top-description]]
-      (when has-dropdown [:span {:class (stl/css :icon-dropdown)}  deprecated-icon/arrow])]
+      (when has-dropdown
+        [:> icon* {:icon-id (if (and has-dropdown show-data) i/arrow-up i/arrow-down)
+                   :class (stl/css :icon-dropdown)
+                   :size "s"}])]
 
      (when (and has-dropdown show-data)
        [:div {:class (stl/css :cta-bottom-section)}
@@ -154,8 +157,8 @@
                    (tr "subscription.dashboard.power-up.enterprise-plan"))
           :data-testid "subscription-icon"}
    (case subscription-type
-     "unlimited" deprecated-icon/character-u
-     "enterprise" deprecated-icon/character-e)])
+     "unlimited" i/character-u
+     "enterprise" i/character-e)])
 
 (mf/defc main-menu-power-up*
   [{:keys [close-sub-menu]}]

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

@@ -93,6 +93,7 @@
 
 .highlighted .cta-title {
   @include t.use-typography("body-medium");
+  margin-block-end: 0;
 }
 
 .cta-text {

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

@@ -13,7 +13,8 @@
    [app.main.ui.components.forms :as fm]
    [app.main.ui.dashboard.subscription :refer [get-subscription-type]]
    [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
+   [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]]
    [app.main.ui.notifications.badge :refer [badge-notification]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr c]]
@@ -40,7 +41,10 @@
                               :plan-card-highlight recommended)}
    [:div {:class (stl/css :plan-card-header)}
     [:div {:class (stl/css :plan-card-title-container)}
-     (when card-title-icon [:span {:class (stl/css :plan-title-icon)} card-title-icon])
+     (when card-title-icon
+       [:> icon* {:icon-id card-title-icon
+                  :class (stl/css :plan-title-icon)
+                  :size "s"}])
      [:h4 {:class (stl/css :plan-card-title)} card-title]
      (when recommended
        [:& badge-notification {:content (tr "subscription.settings.recommended")
@@ -55,8 +59,11 @@
    [:ul {:class (stl/css :benefits-list)}
     (for [benefit  benefits]
       [: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-with-icon cta-text-with-icon)
+     [:button {:class (stl/css :cta-button :more-info)
+               :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
                                                                                       :bottom-link (not (and cta-link-trial cta-text-trial)))
                                                                  :on-click cta-link} cta-text])
@@ -135,7 +142,9 @@
 
     [:div {:class (stl/css :modal-overlay)}
      [:div {:class (stl/css :modal-dialog)}
-      [:button {:class (stl/css :close-btn) :on-click handle-close-dialog} deprecated-icon/close]
+      [:button {:class (stl/css :close-btn) :on-click handle-close-dialog}
+       [:> icon* {:icon-id "close"
+                  :size "m"}]]
       [:div {:class (stl/css :modal-title :subscription-title)}
        (tr "subscription.settings.management.dialog.title" subscription-name)]
 
@@ -145,7 +154,9 @@
               (tr "subscription.settings.management.dialog.currently-editors-title" (c (count editors)))]
           [:button {:class (stl/css :cta-button :show-editors-button) :on-click handle-click}
            (tr "subscription.settings.management.dialog.editors")
-           [:span {:class (stl/css :icon-dropdown)}  deprecated-icon/arrow]]
+           [:> icon* {:icon-id (if show-editors-list i/arrow-up i/arrow-down)
+                      :class (stl/css :icon-dropdown)
+                      :size "s"}]]
           (when show-editors-list
             [:*
              [:p {:class (stl/css :editors-text :editors-list-warning)}
@@ -239,12 +250,12 @@
 
     [:div {:class (stl/css :modal-overlay)}
      [:div {:class (stl/css :modal-dialog :subscription-success)}
-      [:button {:class (stl/css :close-btn) :on-click handle-close-dialog} deprecated-icon/close]
+      [:button {:class (stl/css :close-btn) :on-click handle-close-dialog}
+       [:> icon* {:icon-id "close"
+                  :size "m"}]]
       [:div {:class (stl/css :modal-success-content)}
        [:div {:class (stl/css :modal-start)}
-        (if (= "light" (:theme profile))
-          deprecated-icon/logo-subscription-light
-          deprecated-icon/logo-subscription)]
+        [:> raw-svg* {:id (if (= "light" (:theme profile)) "logo-subscription-light" "logo-subscription")}]]
 
        [:div {:class (stl/css :modal-end)}
         [:div {:class (stl/css :modal-title)} (tr "subscription.settings.sucess.dialog.title" subscription-name)]
@@ -377,7 +388,7 @@
          "unlimited"
          (if subscription-is-trial?
            [:> plan-card* {:card-title (tr "subscription.settings.unlimited-trial")
-                           :card-title-icon deprecated-icon/character-u
+                           :card-title-icon i/character-u
                            :benefits-title (tr "subscription.settings.benefits.all-professional-benefits"),
                            :benefits [(tr "subscription.settings.unlimited.storage-benefit")
                                       (tr "subscription.settings.unlimited.autosave-benefit"),
@@ -389,7 +400,7 @@
                            :editors (-> profile :props :subscription :quantity)}]
 
            [:> plan-card* {:card-title (tr "subscription.settings.unlimited")
-                           :card-title-icon deprecated-icon/character-u
+                           :card-title-icon i/character-u
                            :benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits")
                            :benefits [(tr "subscription.settings.unlimited.storage-benefit"),
                                       (tr "subscription.settings.unlimited.autosave-benefit"),
@@ -401,7 +412,7 @@
          "enterprise"
          (if subscription-is-trial?
            [:> plan-card* {:card-title (tr "subscription.settings.enterprise-trial")
-                           :card-title-icon deprecated-icon/character-e
+                           :card-title-icon i/character-e
                            :benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits"),
                            :benefits [(tr "subscription.settings.enterprise.unlimited-storage-benefit"),
                                       (tr "subscription.settings.enterprise.autosave"),
@@ -411,7 +422,7 @@
                            :cta-text-trial (tr "subscription.settings.add-payment-to-continue")
                            :cta-link-trial go-to-payments}]
            [:> plan-card* {:card-title (tr "subscription.settings.enterprise")
-                           :card-title-icon deprecated-icon/character-e
+                           :card-title-icon i/character-e
                            :benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits"),
                            :benefits [(tr "subscription.settings.enterprise.unlimited-storage-benefit"),
                                       (tr "subscription.settings.enterprise.autosave"),
@@ -422,12 +433,16 @@
        [:div {:class (stl/css :membership-container)}
         (when (and subscribed-since (not= subscription-type "professional"))
           [:div {:class (stl/css :membership)}
-           [:span {:class (stl/css :subscription-member)} deprecated-icon/crown]
+           [:> icon* {:class (stl/css :subscription-member)
+                      :icon-id "crown"
+                      :size "m"}]
            [:span {:class (stl/css :membership-date)}
             (tr "subscription.settings.support-us-since" subscribed-since)]])
 
         [:div {:class (stl/css :membership)}
-         [:span {:class (stl/css :penpot-member)} deprecated-icon/user]
+         [:> icon* {:class (stl/css :penpot-member)
+                    :icon-id "user"
+                    :size "m"}]
          [:span {:class (stl/css :membership-date)}
           (tr "subscription.settings.member-since" member-since)]]]]
 
@@ -447,7 +462,7 @@
 
        (when (not= subscription-type "unlimited")
          [:> plan-card* {:card-title (tr "subscription.settings.unlimited")
-                         :card-title-icon deprecated-icon/character-u
+                         :card-title-icon i/character-u
                          :price-value "$7"
                          :price-period (tr "subscription.settings.price-editor-month")
                          :benefits-title (tr "subscription.settings.benefits.all-professional-benefits")
@@ -463,7 +478,7 @@
 
        (when (not= subscription-type "enterprise")
          [:> plan-card* {:card-title (tr "subscription.settings.enterprise")
-                         :card-title-icon deprecated-icon/character-e
+                         :card-title-icon i/character-e
                          :price-value "$950"
                          :price-period (tr "subscription.settings.price-organization-month")
                          :benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits")