Repository: penpot/penpot
File: frontend/src/app/main/ui/nitrate/nitrate_form.cljs (ClojureScript)

Code before:
   [rumext.v2 :as mf]))

(def ^:private schema:nitrate-form
  [:map {:title "NitrateForm"}
   [:subscription [::sm/one-of #{:monthly :yearly}]]])

(mf/defc nitrate-form-modal*
  {::mf/register modal/components
   ::mf/register-as :nitrate-form}
  []
  (let [initial (mf/with-memo []
                  {:subscription "yearly"})
        form     (fm/use-form :schema schema:nitrate-form
                              :initial initial)
        on-click
        (mf/use-fn
         (fn []
           ;; TODO Start licenses with selected type
           (dom/open-new-window "/control-center/licenses/start")))]

    ;; TODO Texts are placeholders. Move them to translations when ready
    [:div {:class (stl/css-case :modal-overlay true)}
     [:div
      [:div {:class (stl/css :modal-container)}
       [:button {:class (stl/css :modal-close-btn)
                 :on-click modal/hide!} deprecated-icon/close]
       [:img {:src "images/welcomeilustration.svg"
              :class (stl/css :modal-image)
              :border "0"
              :alt "Unlock Nitrate Features"}]

       [:div {:class (stl/css :modal-content)}
        [:div {:class (stl/css :modal-header)}
         [:h1 {:class (stl/css :modal-title)}
          "Unlock Nitrate Features"]]
        [:div {:class (stl/css :info-block)}
         [:& fm/form {:form form}

          [:p  {:class (stl/css :info-content)}
           "Prow scuttle parrel provost."]

          [:p  {:class (stl/css :info-content)}
           "Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. "]

          [:p  {:class (stl/css :info-content)}
           "Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors."]

          [:p  {:class (stl/css :info-content)}
           [:& fm/radio-buttons
            {:options [{:label "Price Tag Montly" :value "monthly"}
                       {:label "Price Tag Yearly (Discount)" :value "yearly"}]

Review comment (suggestion):
You can set close icon like this:
```
[:button {:class (stl/css :modal-close-btn):on-click modal/hide!}
[:> icon* {:icon-id "close" :size "m"}]]
```

Code after:
   [app.util.dom :as dom]
   [rumext.v2 :as mf]))

(def ^:private schema:nitrate-form
  [:map {:title "NitrateForm"}
   [:subscription [::sm/one-of #{:monthly :yearly}]]])

(mf/defc nitrate-form-modal*
  {::mf/register modal/components
   ::mf/register-as :nitrate-form}
  []

  (let [initial (mf/with-memo []
                  {:subscription "yearly"})
        form     (fm/use-form :schema schema:nitrate-form
                              :initial initial)
        on-click
        (mf/use-fn
         (fn []
           ;; TODO Start licenses with selected type
           (dom/open-new-window "/control-center/licenses/start")))]

    [:div {:class (stl/css :modal-overlay)}
     [:div {:class (stl/css :modal-dialog :subscription-success)}
      [:button {:class (stl/css :close-btn) :on-click modal/hide!}
       [:> icon* {:icon-id "close"
                  :size "m"}]]
      [:div {:class (stl/css :modal-success-content)}
       [:div {:class (stl/css :modal-start)}
        ;; TODO this svg is a placeholder. Use the proper one when created
        [:> raw-svg* {:id "logo-subscription"}]]

       [:div {:class (stl/css :modal-end)}
        [:div {:class (stl/css :modal-title)}
         "Unlock Nitrate Features"]

        [:p {:class (stl/css :modal-text-large)}
         "Prow scuttle parrel provost."]
        [:p {:class (stl/css :modal-text-large)}
         "Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl."]
        [:p {:class (stl/css :modal-text-large)}
         "Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors."]
        [:p {:class (stl/css :modal-text-large)}
         [:& fm/form {:form form}
          [:& fm/radio-buttons
           {:options [{:label "Price Tag Montly" :value "monthly"}
                      {:label "Price Tag Yearly (Discount)" :value "yearly"}]
            :name :subscription
            :class (stl/css :radio-btns)}]]]

        [:p {:class (stl/css :modal-text-large :modal-buttons-section)}