feat(15): putting state values into summary step

15-multi-step-form/src/main/resources/public/out.css

@@ -665,10 +665,6 @@ video {
   height: 100vh;
 }
 
-.h-40 {
-  height: 10rem;
-}
-
 .w-11\/12 {
   width: 91.666667%;
 }
@@ -723,10 +719,18 @@ video {
   grid-template-columns: 1fr 100px;
 }
 
+.grid-cols-\[auto_1fr\] {
+  grid-template-columns: auto 1fr;
+}
+
 .grid-cols-\[repeat\(4\2c _auto\)\] {
   grid-template-columns: repeat(4, auto);
 }
 
+.grid-cols-\[1fr_auto\] {
+  grid-template-columns: 1fr auto;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -805,11 +809,6 @@ video {
   background-color: rgb(187 247 208 / var(--tw-bg-opacity));
 }
 
-.bg-light-gray {
-  --tw-bg-opacity: 1;
-  background-color: hsl(229 24% 87% / var(--tw-bg-opacity));
-}
-
 .bg-magnolia {
   --tw-bg-opacity: 1;
   background-color: hsl(217 100% 97% / var(--tw-bg-opacity));
@@ -920,6 +919,11 @@ video {
   color: hsl(231 11% 63% / var(--tw-text-opacity));
 }
 
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity));
+}
+
 .text-light-gray {
   --tw-text-opacity: 1;
   color: hsl(229 24% 87% / var(--tw-text-opacity));
@@ -935,11 +939,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-green-500 {
-  --tw-text-opacity: 1;
-  color: rgb(34 197 94 / var(--tw-text-opacity));
-}
-
 .drop-shadow-xl {
   --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

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

@@ -125,7 +125,7 @@
               <div
                 class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia"
               >
-                <span class="">Arcade</span>
+                <h2 class="">Arcade</h2>
               </div>
             </label>
 
@@ -141,7 +141,7 @@
               <div
                 class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia"
               >
-                <span>Advanced</span>
+                <h2>Advanced</h2>
               </div>
             </label>
 
@@ -157,7 +157,7 @@
               <div
                 class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia"
               >
-                <span>Pro</span>
+                <h2>Pro</h2>
               </div>
             </label>
           </div>
@@ -174,8 +174,8 @@
                 id="packageDuration"
                 th:checked="${formData.userAnswers.step2.isYearly}"
               />
-              <span class="row-start-1 text-marine-blue peer-checked:text-cool-gray">Monthly</span>
+              <p class="row-start-1 text-marine-blue peer-checked:text-cool-gray">Monthly</p>
-              <span class="row-start-1 text-cool-gray peer-checked:text-marine-blue">Yearly</span>
+              <p class="row-start-1 text-cool-gray peer-checked:text-marine-blue">Yearly</p>
             </div>
           </div>
 

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

@@ -103,28 +103,54 @@
           class="flex flex-col py-8 px-6 -mt-20 w-11/12 bg-white rounded-xl md:px-24 md:mt-0 md:w-full drop-shadow-xl md:drop-shadow-none"
         >
           <!-- Step 3 start -->
-          <h1 class="text-2xl font-bold md:text-4xl text-marine-blue">Finishing up</h1>
+          <h1 class="text-2xl font-bold md:text-4xl text-marine-blue">
-          <p class="py-3 text-cool-gray">Double-check everything looks OK before confirming.</p>
+            Finishing up
+          </h1>
+          <p class="py-3 text-cool-gray">
+            Double-check everything looks OK before confirming.
+          </p>
           <div
             class="flex flex-col w-full text-sm rounded-lg divide-y md:text-base bg-magnolia"
             id="selection-overview"
           >
-            <div id="selected-plan">
+            <div id="selected-plan" class="grid grid-cols-[1fr_auto]">
-              Arcade (Monthly) Change $90/y
+              <h2 th:text="${formData.fullPlanName}">Arcade (Monthly)</h2>
-            </div>
+              <p
-            <div id="selected-addons"
+                th:text="|${formData.planCost}/${formData.periodCostLabel}|"
-                 class="flex flex-col"
+                class="row-span-2"
               >
-              <div>
+                $90/y
-                Online service +$10/yr
+              </p>
+              <p>Change</p>
             </div>
-              <div>
+            <div id="selected-addons" class="flex flex-col">
-                Larger storage +$20/yr
+              <div
+                th:each="addon: ${formData.userAnswers.step3.addonsAsJava}"
+                class="flex flex-row"
+              >
+                <p th:text="${addon.name}" class="grow">Online service</p>
+                <p
+                  th:text="|+${formData.addonCost(addon)}/${formData.periodCostLabel}|"
+                >
+                  +$10/yr
+                </p>
               </div>
+              <div th:remove="all">Larger storage +$20/yr</div>
             </div>
           </div>
 
-          <p>Total (per year) $120</p>
+          <section
+            class="flex flex-row"
+          >
+            <p class="grow">
+              Total (per
+              <span
+                th:text="${formData.userAnswers.step2.isYearly} ? 'year' : 'month'"
+                >year</span
+              >)
+            </p>
+            <p th:text="|${formData.fullOrderPrice}$/${formData.periodCostLabel}|">$120</p>
+          </section>
 
           <!-- Step 3 end -->
         </section>
@@ -146,7 +172,7 @@
             type="submit"
             class="grid place-content-center mr-3 w-24 h-10 text-sm font-semibold text-white rounded md:mr-24 md:w-32 md:h-12 md:text-base md:rounded-lg bg-purplish-blue"
             value="Confirm"
-            >
+          />
           <a
             th:remove="all"
             href="step5.html"

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

@@ -1,6 +1,7 @@
 package multistepform
 
 import java.util.UUID
+import scala.jdk.CollectionConverters._
 
 object Models {
   val testAnsw = Answers(
@@ -105,6 +106,13 @@ object Models {
   enum Addons:
     case OnlineService, LargerStorage, CustomProfile
 
+    /** Change camel case into human readable. Adding single space before each
+      * uppercase
+      */
+    def name(): String = {
+      this.toString().replaceAll("([a-z])([A-Z])", "$1 $2")
+    }
+
   sealed trait StepAnswers {
     def fromFormData(rawData: String): StepAnswers
     def submitted: Boolean
@@ -159,6 +167,7 @@ object Models {
         addons: Set[Addons] = Set.empty,
         override val submitted: Boolean = false
     ) extends StepAnswers {
+      def addonsAsJava = addons.asJava
 
       def containsAddon(addonName: String): Boolean = {
         addons.contains(Addons.valueOf(addonName))