form.cljs

(defn my-form-ident [{:keys [booking]}]
  [:booking/id (:id booking)])

(defsc Step1Form [this props]
  {:query (fn [] ['* fs/form-config-join]) ; doesn't matter, since it isn't really used
   :ident (fn [] (my-form-ident props))}
  (dom/div "Step 1"))

(def ui-step1-form (prim/factory Step1Form))

(defsc Step2Form [this props]
  {:query (fn [] ['* fs/form-config-join]) ; doesn't matter, since it isn't really used
   :ident (fn [] (my-form-ident props))}
  (dom/div "Step 2"))

(def ui-step2-form (prim/factory Step2Form))

(defsc BookingForm [this props {:keys [step]}]
  {:query [:cleaning-fee :total fs/form-config-join]
   :form-fields #{:cleaning-fee :total}
   :ident (fn [] (my-form-ident props))}
  (case step
                               1 (ui-step1-form props)
                               2 (ui-step2-form props)))

(def ui-booking-form (prim/factory BookingForm))

(defmutation next-step [{:keys [step]}]
  (action [{:keys [state]}]
          (js/console.log state)
          (swap! state update-in [:COMPONENT/by-id :wrapper :ui/step] inc)))

(defsc FormProto [this {:keys [ui/step booking] :as props}]
  {:query         [:ui/step
                   {:booking (prim/get-query BookingForm)}
                   [:web-env '_]]
   :ident         (fn [] [:COMPONENT/by-id :wrapper])
   :initial-state (fn [_] {:ui/step 1
                           :booking (fs/add-form-config BookingForm
                                      {:id 1
                                       :cleaning_fee "123"
                                       :total        "321"})})}
  (dom/div :.container-fluid
           (dom/div :.row
                    (dom/div :.col-md-8
                             (ui-booking-form (prim/computed booking {:step step}))
                             (dom/button {:onClick #(prim/transact! this `[(next-step {:step ~step})])} "Click")))))