feat(15): dynamicly redrawing plan type info yr/mo

15-multi-step-form/src/main/resources/templates/step2.html

@@ -110,7 +110,11 @@
           <p class="py-3 text-cool-gray">
             You have the option of monthly or yearly billing.
           </p>
-          <div class="flex flex-col w-full md:flex-row">
+          <div
+            class="flex flex-col w-full md:flex-row"
+            id="plan-type-inputs"
+            th:fragment="planTypesInputs(formData)"
+          >
             <label
               for="ArcadePlanType"
               class="relative h-20 md:w-32"
@@ -132,8 +136,14 @@
                 class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia"
               >
                 <h2 th:text="${planType}" class="">Arcade</h2>
-                <p th:text="|${formData.planCost(planType)}/${formData.periodCostLabel}|">$90/yr</p>
-                <p th:if="${formData.userAnswers.step2.isYearly}">2 months free</p>
+                <p
+                  th:text="|${formData.planCost(planType)}/${formData.periodCostLabel}|"
+                >
+                  $90/yr
+                </p>
+                <p th:if="${formData.userAnswers.step2.isYearly}">
+                  2 months free
+                </p>
               </div>
             </label>
 
@@ -191,6 +201,9 @@
                 role="switch"
                 id="packageDuration"
                 th:checked="${formData.userAnswers.step2.isYearly}"
+                hx-get="/step2/planTypeInputs"
+                hx-target="#plan-type-inputs"
+                hx-swap="outerHTML"
               />
               <p
                 class="row-start-1 text-marine-blue peer-checked:text-cool-gray"

15-multi-step-form/src/main/scala/multistepform/Routes.scala

@@ -98,6 +98,9 @@ case class Routes()(implicit cc: castor.Context, log: cask.Logger)
     val id = sessionId.value
     println(s"got $request for $id. it's data is ${request.text()}")
 
+    // note: this is nice at step #1 because not storing anything before first submission
+    // but on followup steps, if data lost - new default object is created
+    // and that is not nice
     val userAnswers = Sessions.sessionReplies.getOrElse(id, Answers(id))
 
     val submittedData = URLDecoder.decode(request.text() , "UTF-8")
@@ -121,6 +124,40 @@ case class Routes()(implicit cc: castor.Context, log: cask.Logger)
     )
   }
 
+  /**
+   * This endpoint re-renders 'plan type inputs'
+   * so that togglng monthly\yearly could redraw their html
+   */
+  @cask.get("/step2/planTypeInputs")
+  def getPlanTypeInputs(sessionId: cask.Cookie, isPackageYearly: Option[String] = None) = {
+    val id = sessionId.value
+    val isPackageYearlyBool = isPackageYearly.contains("on")
+    println(s"requesting plan type inputs for $id and $isPackageYearlyBool")
+    Sessions.sessionReplies.get(id) match {
+      case None =>
+        cask.Response("Can't find answers for your session, please reload the page", 404)
+      case Some(answers) => {
+        // here changing yearly/monthly part of state based on passed checkbox value
+        // only for purposes of rendering the fragment
+        // not persisting, unless next or previous buttons are pressed
+        val withYearlyParamSet = answers.copy(step2 = answers.step2.copy(isYearly = isPackageYearlyBool))
+        val formData = Models.FormData(withYearlyParamSet)
+        val context = new Context()
+        context.setVariable(formDataContextVarName, formData)
+        val planTypesInputsHtml = templateEngine.process(
+          "step2",
+          Set("planTypesInputs").asJava,
+          context
+        )
+        println(s"updating plan type inputs for $answers")
+        cask.Response(
+          planTypesInputsHtml,
+          headers = Seq("Content-Type" -> "text/html;charset=UTF-8")
+        )
+      }
+    }
+  }
+
   @cask.staticResources("/public")
   def publicFiles() = "public"