feat(15): dynamic values in step 3 addon selection

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

@@ -110,14 +110,21 @@
             Add-ons help enhance your gaming experience.
           </p>
           <div class="flex flex-col w-full text-sm md:text-base">
-            <label for="multiplayer-games" class="relative pl-6 h-20 md:w-full">
+            <label
+              th:each="addon: ${formData.availableAddons}"
+              for="multiplayer-games"
+              th:for="${addon}"
+              class="relative pl-6 h-20 md:w-full"
+            >
               <input
                 id="multiplayer-games"
+                th:id="${addon}"
                 type="checkbox"
                 value="OnlineService"
+                th:value="${addon}"
                 name="addon-services"
                 class="my-7 w-6 h-6 peer"
-                th:checked="${formData.userAnswers.step3.containsAddon('OnlineService')}"
+                th:checked="${formData.userAnswers.step3.containsAddon(addon)}"
               />
               <div
                 class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia/50"
@@ -125,16 +132,24 @@
                 <div
                   class="grid place-content-center ml-20 h-full grid-cols-[1fr_100px]"
                 >
-                  <h1>Online Service</h1>
-                  <p>Access to multiplayer games</p>
-                  <p class="col-start-2 row-span-2 row-start-1 self-center">
+                  <h1 th:text="${addon.name}">Online Service</h1>
+                  <p th:text="${addon.description}">
+                    Access to multiplayer games
+                  </p>
+                  <p
+                    class="col-start-2 row-span-2 row-start-1 self-center"
+                    th:text="|+$${formData.addonCost(addon)}/${formData.periodCostLabel}|"
+                  >
                     +$1/mo
                   </p>
                 </div>
               </div>
             </label>
-
-            <label for="larger-storage" class="relative pl-6 h-20 md:w-full">
+            <label
+              for="larger-storage"
+              class="relative pl-6 h-20 md:w-full"
+              th:remove="all"
+            >
               <input
                 id="larger-storage"
                 type="checkbox"
@@ -157,8 +172,11 @@
                 </div>
               </div>
             </label>
-
-            <label for="custom-profile" class="relative pl-6 h-20 md:w-full">
+            <label
+              for="custom-profile"
+              class="relative pl-6 h-20 md:w-full"
+              th:remove="all"
+            >
               <input
                 id="custom-profile"
                 type="checkbox"

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

@@ -116,7 +116,7 @@
             <div id="selected-plan" class="grid grid-cols-[1fr_auto]">
               <h2 th:text="${formData.fullPlanName}">Arcade (Monthly)</h2>
               <p
-                th:text="|${formData.planCost}/${formData.periodCostLabel}|"
+                th:text="|$${formData.selectedPlanCost}/${formData.periodCostLabel}|"
                 class="row-span-2"
               >
                 $90/y
@@ -130,7 +130,7 @@
               >
                 <p th:text="${addon.name}" class="grow">Online service</p>
                 <p
-                  th:text="|+${formData.addonCost(addon)}/${formData.periodCostLabel}|"
+                  th:text="|+$${formData.addonCost(addon)}/${formData.periodCostLabel}|"
                 >
                   +$10/yr
                 </p>
@@ -149,7 +149,7 @@
                 >year</span
               >)
             </p>
-            <p th:text="|${formData.fullOrderPrice}$/${formData.periodCostLabel}|">$120</p>
+            <p th:text="|$${formData.fullOrderPrice}/${formData.periodCostLabel}|">$120</p>
           </section>
 
           <!-- Step 3 end -->

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

@@ -29,23 +29,13 @@ object Models {
     def selectedPlanCost: Int = planCost(userAnswers.step2.planType)
 
     def planCost(plan: PlanType): Int = {
-      val monthlyPlanCost = plan match {
-        case PlanType.Arcade   => 9
-        case PlanType.Advanced => 12
-        case PlanType.Pro      => 15
-      }
+      val monthlyPlanCost = plan.monthlyCost
       if (userAnswers.step2.isYearly) yearlyCost(monthlyPlanCost)
       else monthlyPlanCost
     }
 
-    def addonMontlyCost: Addons => Int = {
-      case Addons.OnlineService => 1
-      case Addons.LargerStorage => 2
-      case Addons.CustomProfile => 2
-    }
-
     def addonCost(addon: Addons): Int = {
-      val monthCost = addonMontlyCost(addon)
+      val monthCost = addon.monthlyCost
       if (userAnswers.step2.isYearly) yearlyCost(monthCost) else monthCost
     }
 
@@ -59,6 +49,8 @@ object Models {
     }
 
     def availablePlans = PlanType.values.toList.asJava
+
+    def availableAddons = Addons.values.toList.asJava
   }
 
   final case class Answers(
@@ -102,12 +94,18 @@ object Models {
     }
   }
 
-  enum PlanType:
-    case Arcade, Advanced, Pro
-
-  enum Addons:
-    case OnlineService, LargerStorage, CustomProfile
+  enum PlanType(val monthlyCost: Int):
+    case Arcade extends PlanType(9)
+    case Advanced extends PlanType(12)
+    case Pro extends PlanType(15)
+    def name(): String = {
+      this.toString().replaceAll("([a-z])([A-Z])", "$1 $2")
+    }
 
+  enum Addons(val monthlyCost: Int, val description: String):
+    case OnlineService extends Addons(1, "Access to multiplayer games")
+    case LargerStorage extends Addons(2, "Extra 1TB of cloud storage")
+    case CustomProfile extends Addons(2, "Custom theme on your profile")
     /** Change camel case into human readable. Adding single space before each
       * uppercase
       */