Repository: penpot/penpot
File: frontend/src/app/main/ui/settings/subscription.cljs (ClojureScript)

Code before:
      [:div {:class (stl/css :modal-success-content)}
       [:div {:class (stl/css :modal-start)}
        (if (= "light" (:theme profile))
          i/logo-subscription-light
          i/logo-subscription)]

       [:div {:class (stl/css :modal-end)}
        [:div {:class (stl/css :modal-title)} (tr "subscription.settings.sucess.dialog.title" subscription-name)]
        [:p {:class (stl/css :modal-text-large)} (tr "subscription.settings.success.dialog.description")]
        [:p {:class (stl/css :modal-text-large)} (tr "subscription.settings.sucess.dialog.footer")]

        [:div {:class (stl/css :success-action-buttons)}
         [:input
          {:class (stl/css :primary-button)
           :type "button"
           :value (tr "labels.close")
           :on-click handle-close-dialog}]]]]]]))

(mf/defc subscription-page*
  [{:keys [profile]}]
  (let [route                           (mf/deref refs/route)
        params                          (:params route)
        params-subscription             (:subscription (:query params))
        show-trial-subscription-modal   (and (:query params)
                                             (or (= (:subscription (:query params)) "subscription-to-penpot-unlimited")
                                                 (= (:subscription (:query params)) "subscription-to-penpot-enterprise")))
        show-subscription-success-modal (and (:query params)
                                             (or (= (:subscription (:query params)) "subscribed-to-penpot-unlimited")
                                                 (= (:subscription (:query params)) "subscribed-to-penpot-enterprise")))
        subscription                    (:subscription (:props profile))
        subscription-name               (get-subscription-name subscription)
        subscription-is-trial           (= (:status subscription) "trialing")
        teams*                          (mf/use-state nil)
        teams                           (deref teams*)
        locale                          (mf/deref i18n/locale)
        penpot-member                   (dt/format-date-locale-short (:created-at profile) {:locale locale})
        subscription-member             (dt/format-date-locale-short (:start-date subscription) {:locale locale})
        go-to-pricing-page              (mf/use-fn
                                         (fn []
                                           (st/emit! (ptk/event ::ev/event {::ev/name "explore-pricing-click" ::ev/origin "settings" :section "subscription"}))
                                           (dom/open-new-window "https://penpot.app/pricing")))
        go-to-payments                  (mf/use-fn
                                         (fn []
                                           (st/emit! (ptk/event ::ev/event {::ev/name "open-subscription-management"
                                                                            ::ev/origin "profile"
                                                                            :section "subscription"}))
                                           (let [current-href (rt/get-current-href)
                                                 returnUrl (js/encodeURIComponent current-href)
                                                 href (dm/str "payments/subscriptions/show?returnUrl=" returnUrl)]
                                             (st/emit! (rt/nav-raw :href href)))))
        open-subscription-modal         (mf/use-fn

Review comment (suggestion):
the `(:query params)` is used many times, in the same way as `(:subscription query-params)`; also there is `params-subscription` which is already `(:subscription (:query params))` so, this code can be simplified to something like this:

```clojure
(let [route        (mf/deref refs/route)
      params       (:params route)
      subscription (:subscription (:query params))

      show-trial-modal?
      (or (= subscription "subscription-to-penpot-unlimited")
          (= subscription "subscription-to-penpot-enterprise"))
...
```

Code after:
        (if (= "light" (:theme profile))
          i/logo-subscription-light
          i/logo-subscription)]

       [:div {:class (stl/css :modal-end)}
        [:div {:class (stl/css :modal-title)} (tr "subscription.settings.sucess.dialog.title" subscription-name)]
        [:p {:class (stl/css :modal-text-large)} (tr "subscription.settings.success.dialog.description")]
        [:p {:class (stl/css :modal-text-large)} (tr "subscription.settings.sucess.dialog.footer")]

        [:div {:class (stl/css :success-action-buttons)}
         [:input
          {:class (stl/css :primary-button)
           :type "button"
           :value (tr "labels.close")
           :on-click handle-close-dialog}]]]]]]))

(mf/defc subscription-page*
  [{:keys [profile]}]
  (let [route                           (mf/deref refs/route)
        params                          (:params route)
        params-subscription             (:subscription (:query params))
        show-trial-subscription-modal   (or (= params-subscription "subscription-to-penpot-unlimited")
                                            (= params-subscription "subscription-to-penpot-enterprise"))
        show-subscription-success-modal (or (= params-subscription "subscribed-to-penpot-unlimited")
                                            (= params-subscription "subscribed-to-penpot-enterprise"))
        subscription                    (:subscription (:props profile))
        subscription-type               (get-subscription-type subscription)
        subscription-is-trial           (= (:status subscription) "trialing")
        teams*                          (mf/use-state nil)
        teams                           (deref teams*)
        locale                          (mf/deref i18n/locale)
        penpot-member                   (dt/format-date-locale-short (:created-at profile) {:locale locale})
        subscription-member             (dt/format-date-locale-short (:start-date subscription) {:locale locale})
        go-to-pricing-page              (mf/use-fn
                                         (fn []
                                           (st/emit! (ptk/event ::ev/event {::ev/name "explore-pricing-click" ::ev/origin "settings" :section "subscription"}))
                                           (dom/open-new-window "https://penpot.app/pricing")))
        go-to-payments                  (mf/use-fn
                                         (fn []
                                           (st/emit! (ptk/event ::ev/event {::ev/name "open-subscription-management"
                                                                            ::ev/origin "profile"
                                                                            :section "subscription"}))
                                           (let [current-href (rt/get-current-href)
                                                 returnUrl (js/encodeURIComponent current-href)
                                                 href (dm/str "payments/subscriptions/show?returnUrl=" returnUrl)]
                                             (st/emit! (rt/nav-raw :href href)))))
        open-subscription-modal         (mf/use-fn
                                         (mf/deps teams)
                                         (fn [subscription-type]
                                           (st/emit! (ptk/event ::ev/event {::ev/name "open-subscription-modal"
                                                                            ::ev/origin "settings:in-app"}))