form.cljs

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

(defsc Step1Form [this props]
  {:query [:form/field fs/form-config-join]
   :form-fields #{:form/field}
   :ident (fn [] (my-form-ident props))}
  (dom/div "Step 1"))

(def ui-step1-form (prim/factory Step1Form {:keyfn :db/id}))

(defsc Step2Form [this props]
  {:query [:form/field2 fs/form-config-join]
   :form-fields #{:form/field2}
   :ident (fn [] (my-form-ident props))}
  (dom/div "Step 2"))

(def ui-step2-form (prim/factory Step2Form {:keyfn :db/id}))

(defsc BookingForm [this props]
  {:query [:form/field :form/field2 fs/form-config-join]
   :form-fields #{:form/field}
   :ident (fn [] (my-form-ident props))}
  (dom/div "Booking Form"))

(defmutation next-step [{:keys [step]}]
  (action [{:keys [state]}]
          (js/console.log state)
          (swap! state update-in [:form-proto :tab :ui/step] inc)))

(defsc FormProto [this {:keys [ui/step booking] :as props}]
  {:query         [:which-tab
                   :mode
                   :booking
                   :ui/step {:form (prim/get-query BookingForm)}
                   [:web-env '_]]
   :ident         [:form-proto :which-tab]
   :initial-state {:which-tab :form-proto
                   :ui/step 1
                   :booking {:id 1
                             :cleaning_fee "123"
                             :total        "321"}}}
  (dom/div :.container-fluid
           (dom/div :.row
                    (dom/div :.col-md-8
                             (case step
                               1 (ui-step1-form props)
                               2 (ui-step2-form props))
                             (dom/button {:onClick #(prim/transact! this `[(next-step {:step ~step})])} "Click")))))