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

Code before:
;; Copyright (c) KALEIDOS INC

(ns app.main.ui.dashboard.subscription
  (:require-macros [app.main.style :as stl])
  (:require
   [app.common.data.macros :as dm]
   [app.config :as cf]
   [app.main.data.event :as ev]
   [app.main.router :as rt]
   [app.main.store :as st]
   [app.main.ui.components.dropdown-menu :refer [dropdown-menu-item*]]
   [app.main.ui.ds.product.cta :refer [cta*]]
   [app.main.ui.icons :as i]
   [app.util.dom :as dom]
   [app.util.i18n :as i18n :refer [tr]]
   [app.util.keyboard :as kbd]
   [lambdaisland.uri :as u]
   [potok.v2.core :as ptk]
   [rumext.v2 :as mf]))

(defn get-subscription-name
  [subscription]
  (if (and subscription (not (some #{"unpaid" "canceled"} [(:status subscription)])))
    (:type subscription)
    "professional"))

(mf/defc cta-power-up*
  [{:keys [top-title top-description bottom-description has-dropdown]}]
  (let [show-data* (mf/use-state false)
        show-data (deref show-data*)
        handle-click
        (mf/use-fn
         (fn [event]
           (dom/stop-propagation event)
           (swap! show-data* not)))]

    [:div {:class (stl/css :cta-power-up)
           :on-click handle-click}
     [:button {:class (stl/css-case :cta-top-section true
                                    :cta-without-dropdown (not has-dropdown))}
      [: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)}  i/arrow])]

     (when (and has-dropdown show-data)
       [:div {:class (stl/css :cta-bottom-section)}
        [:> i18n/tr-html* {:content bottom-description
                           :class (stl/css :content)
                           :tag-name "span"}]])]))

Review comment (suggestion):
I suggest implementing this function in this way:

```clojure
(defn get-subscription-type
  [{:keys [type status] :as subscription}]
  (if (and subscription (not (contains? #{"unpaid" "canceled"} status)))
    (:type subscription)
    "professional"))
```

Code after:
;; Copyright (c) KALEIDOS INC

(ns app.main.ui.dashboard.subscription
  (:require-macros [app.main.style :as stl])
  (:require
   [app.common.data.macros :as dm]
   [app.config :as cf]
   [app.main.data.event :as ev]
   [app.main.router :as rt]
   [app.main.store :as st]
   [app.main.ui.components.dropdown-menu :refer [dropdown-menu-item*]]
   [app.main.ui.ds.product.cta :refer [cta*]]
   [app.main.ui.icons :as i]
   [app.util.dom :as dom]
   [app.util.i18n :as i18n :refer [tr]]
   [app.util.keyboard :as kbd]
   [lambdaisland.uri :as u]
   [potok.v2.core :as ptk]
   [rumext.v2 :as mf]))

(defn get-subscription-type
  [{:keys [type status] :as subscription}]
  (if (and subscription (not (contains? #{"unpaid" "canceled"} status)))
    type
    "professional"))

(mf/defc cta-power-up*
  [{:keys [top-title top-description bottom-description has-dropdown]}]
  (let [show-data* (mf/use-state false)
        show-data (deref show-data*)
        handle-click
        (mf/use-fn
         (fn [event]
           (dom/stop-propagation event)
           (swap! show-data* not)))]

    [:div {:class (stl/css :cta-power-up)
           :on-click handle-click}
     [:button {:class (stl/css-case :cta-top-section true
                                    :cta-without-dropdown (not has-dropdown))}
      [: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)}  i/arrow])]

     (when (and has-dropdown show-data)
       [:div {:class (stl/css :cta-bottom-section)}
        [:> i18n/tr-html* {:content bottom-description
                           :class (stl/css :content)
                           :tag-name "span"}]])]))