From 3e9aa4d7fdfdf496111a2005a39718b726ecbf0c Mon Sep 17 00:00:00 2001
From: David Back <David.Back@safelite.com>
Date: Thu, 6 Apr 2023 14:04:44 -0400
Subject: [PATCH] SSR-313

---
 src/constants/endpoints.js                    |  4 +
 src/helpers/cms-content-helper.js             | 23 +++--
 .../site-footer/site-footer.vue               |  2 +-
 .../site-sub-header/site-sub-header.vue       | 63 ++++++++------
 .../service-package-question.vue              | 61 +++++++-------
 .../service-package-radio.vue                 | 50 ++++++-----
 .../service-packages/service-packages.vue     | 83 +++++++++++--------
 src/router/router-constants/issPage-values.js | 35 ++++----
 src/router/router-constants/routing-table.js  | 15 +++-
 src/store/index.js                            | 54 +++++++++++-
 10 files changed, 243 insertions(+), 147 deletions(-)

diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index f67e97e0..32b25d2d 100644
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@@ -39,6 +39,10 @@ const endpoints = {
     url: "/parts/api/v1/parts/parts",
     method: "POST",
   },
+  GetPriceOrderItems: {
+    url: '/price/api/v1/price/order-items',
+    method: 'GET'
+  },
   GetCapabilityQuestions: {
     url: "/parts/api/v1/parts/capability-questions",
     method: "GET",
diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index 4eb3b067..6e0ba758 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -26,7 +26,8 @@ export function fetchCmsContentForPage(issPage) {
               // Process the client override if it exists.
               return processPageData(baseResponse, clientResponse);
             },
-            (error) => {
+              (error) => {
+              console.error(error);
               // Process the just the base if no client override exists.
               return processPageData(baseResponse, null);
             }
@@ -42,10 +43,13 @@ export function fetchCmsContentForPage(issPage) {
 // clientResponse = contains the widgets from the client override page. (null if none)
 function processPageData(baseResponse, clientResponse) {
   const pageDataFromCms = {};
-  let widgets = [];
+  let   widgets         = [];
 
-  if ( clientResponse === null )
-  {
+  if (!baseResponse?.data?.Result) {
+    console.error('No result data found');  // Something has gone terribly wrong.
+    return {}
+  }
+  if (!clientResponse?.data?.Result) {
     widgets = baseResponse.data.Result;
   }
   else
@@ -243,7 +247,10 @@ export function processIfStatements(str, ifConditionKeyword, replacePlaceholderC
     const containsRelevantIfStatement = new RegExp('{if:' + ifConditionKeyword + ':.+?}', 'g').test(
         str
     );
-    if (!containsRelevantIfStatement) {
+    //str = str.replace(/\r?\n|\r/g, '');
+
+    const hasEmbeddedCrLf = /\r?\n|\r/g.test(str);
+    if (!containsRelevantIfStatement || hasEmbeddedCrLf) {
         return str;
     } else {
         const ifStatementRegexExpression = getIfStatementRegexExpression();
@@ -297,6 +304,8 @@ function getAndFlagFirstNonNestedIfStatementWithKeyword(matches, ifConditionKeyw
         }
         index++;
     }
+    console.error('Did not find end in conditional logic');
+    return matches;
 }
 
 function flagMatchesForProcessing(matches, elseStatementIndex) {
@@ -395,6 +404,10 @@ function getIfStatementRegexExpression() {
 // End of If Statement Processing Logic //
 //////////////////////////////////////////
 
+export function doesCopyContainTextLink(copy) {
+    return copy.includes(dynamicStrings.TEXT_LINK);
+}
+
 export function doesCopyContainRouterLink(copy) {
     return copy.includes(this.dynamicStrings.ROUTER_LINK);
 }
diff --git a/src/iss-components/site-footer/site-footer.vue b/src/iss-components/site-footer/site-footer.vue
index b2537703..2ce2c41c 100644
--- a/src/iss-components/site-footer/site-footer.vue
+++ b/src/iss-components/site-footer/site-footer.vue
@@ -3,7 +3,7 @@
         <img id="siteFooterImage" :src="footerImageURL" />
     </div>
     <footer class="footer container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
-        <div class="row d-flex flex-row-reverse align-items-center vw-100">
+        <div class="row d-flex flex-row-reverse align-items-center vw-100 mx-0">
             <div class="col button-col d-flex" id="stacked" >
                 <buttonMain
                     v-if="!isForwardButtonHidden"
diff --git a/src/iss-components/site-sub-header/site-sub-header.vue b/src/iss-components/site-sub-header/site-sub-header.vue
index 04198499..cfa65e34 100644
--- a/src/iss-components/site-sub-header/site-sub-header.vue
+++ b/src/iss-components/site-sub-header/site-sub-header.vue
@@ -12,8 +12,8 @@
           />
         </h5>
       </div>
-      <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
-            <p class="text-center small fw-normal mb-0 subheader-secondary">
+      <div class="d-flex align-items-center container-fluid overflow-hidden" :class="justifySubheader">
+            <p class="text-center fw-normal mb-0 subheader-secondary" :class="alternateFormatting">
                 <span>
                     {{ subText }}
                 </span>
@@ -31,23 +31,33 @@ import buttonBack from "@/iss-components/site-sub-header/button-back/button-back
         props: {
             cmsWidgetName: String,
             hasBackButton: Boolean,
+            justification: String,
+            issContainingPage: String
         },
         computed: {
-            content()
-            {
+            content() {
                 return this.getCmsContent(this.cmsWidgetName, "SubHeaderText")
             },
-            subText()
-            {
+            subText() {
                 return this.getCmsContent(this.cmsWidgetName, "SecondaryText")
             },
-            backButtonAccessibleText()
-            {
-              return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
+            backButtonAccessibleText() {
+                return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
             },
             headerColor() {
                 return this.subText ? "dark-header" : "light-header";
             },
+            justifySubheader() {
+                console.log('-->' + (this.justification.toLowerCase() === 'left'));
+                return (this.justification?.toLowerCase() === 'left') ?
+                    'justify-content-left' :
+                    'justify-content-center';
+            },
+            alternateFormatting() {
+                return (this.issContainingPage === 'service-packages') ?
+                    'service-packages-subtext mt-4 mb-2 px-5' :
+                    'small';
+            }
         },
         methods: {
           clickEvent() {
@@ -60,22 +70,27 @@ import buttonBack from "@/iss-components/site-sub-header/button-back/button-back
 
   
 <style lang="scss" scoped>
-.dark-header {
-    color: $black;
-}
+    .dark-header {
+        color: $black;
+    }
 
-.light-header {
-    color: $gray-550;
-}
+    .light-header {
+        color: $gray-550;
+    }
 
-h5 {
-  line-height: 32px;
+    h5 {
+      line-height: 32px;
+
+      button {
+        color: inherit;
+      }
+    }
+    p.small {
+        color: $gray-550;
+    }
+    p.service-packages-subtext {
+        font-weight: 500 !important;
+        line-height: 24px;
+    }
 
-  button {
-    color: inherit;
-  }
-}
-p.small {
-    color: $gray-550;
-}
 </style>
\ No newline at end of file
diff --git a/src/layouts/service-packages/service-package-question/service-package-question.vue b/src/layouts/service-packages/service-package-question/service-package-question.vue
index a8b030b7..d640014d 100644
--- a/src/layouts/service-packages/service-package-question/service-package-question.vue
+++ b/src/layouts/service-packages/service-package-question/service-package-question.vue
@@ -10,22 +10,22 @@
 </template>
 
 <script>
-    import buttonQuestion          from '@/digital-components/button-question/button-question';
-    import baseMixin               from '@/mixins/base-mixin.js';
-    import { processIfStatements } from '@/helpers/cms-content-helper';
+    import buttonQuestion            from '@/digital-components/button-question/button-question';
+    import baseMixin                 from '@/mixins/base-mixin.js';
+    import { processIfStatements }   from '@/helpers/cms-content-helper';
     import { damageLocationsSelected as glassLocations } from '@/constants/damage-locations-selected';
-    import servicePackageRadio     from './service-package-radio/service-package-radio';
-    import { partTypeStrings }     from '@/constants/part-type-strings';
-    import { useMainStore }        from '@/store';
+    import servicePackageRadio       from './service-package-radio/service-package-radio';
+    import { partTypeStrings }       from '@/constants/part-type-strings';
+    import { useMainStore }          from '@/store';
 
     const packageNames = {
         TIER_ONE:   'TierOne',
         TIER_TWO:   'TierTwo',
-        TIER_THREE: 'TierThree'
+        TIER_THREE: 'TierThree',
     };
     export default {
         name: 'servicePackageQuestion',
-            props: {
+        props: {
             cmsWidgetName: String,
             groupName: String,
             validationRules: String,
@@ -71,29 +71,26 @@
                     }
                 ];
 
-                //This isn't mainly about header text, header text is just the canary in the coal mine
-                //Vue will often hit this code twice during a pageload.  The first time without
-                //having yet loaded cms content- and so this just skips that first time
                 if (this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText') == '') {
                     return {};
                 }
-                console.log(this.getCmsContent(this.cmsWidgetName, 'HeaderText'));
-
                 const modifiedAnswers = cmsAnswersContent.map((answer) => ({
-                    value: answer.Name,
-                    buttonLabel: this.getHeaderTextFromCms(this.cmsWidgetName),
-                    buttonLabelSubCopy: this.getSubheaderTextFromCms(this.cmsWidgetName),
-                    buttonBodyCopy: this.getBodyTextFromCms(this.cmsWidgetName),
-                    buttonAuxiliaryCopy: 'Aux Copy', //his.getPackagePriceString(answer.Name),
-                    buttonFooterCopy: this.getFooterTextFromCms(this.cmsWidgetName)
-                }));
+                        value:                answer.Name,
+                        buttonLabel:          this.getHeaderTextFromCms(answer.cmsWidgetName),
+                        buttonLabelSubCopy:   this.getSubheaderTextFromCms(answer.cmsWidgetName),
+                        buttonBodyCopy:       this.getBodyTextFromCms(answer.cmsWidgetName),
+                        buttonAuxiliaryCopy: 'TODO', //this.getPackagePriceString(answer.Name),
+                        buttonFooterCopy:     this.getFooterTextFromCms(answer.cmsWidgetName)
+                    }
+                ));
                 return modifiedAnswers;
             },
             frontWipersApplicableForTierTwo() {
+                const store                   = useMainStore();
                 const frontWipersAreAvailable = this.lineItemsContainsPartType(
                     partTypeStrings.FRONT_WIPER
                 );
-                const isRepair = this.$store.order.damage.isRepair;
+                const isRepair                         = store.order.damage.isRepair;
                 const glassToReplaceContainsWindshield = this.glassToReplaceContainsGlassLocation(
                     glassLocations.WINDSHIELD
                 );
@@ -119,16 +116,12 @@
                 );
             },
             frontWipersApplicableForTierThree() {
-                const frontWipersAreAvailable = this.lineItemsContainsPartType(
-                    partTypeStrings.FRONT_WIPER
-                );
+                const frontWipersAreAvailable = this.lineItemsContainsPartType(partTypeStrings.FRONT_WIPER);
                 return frontWipersAreAvailable;
             },
             rearWiperApplicableForTierThree() {
-                const rearWiperIsAvailable = this.lineItemsContainsPartType(partTypeStrings.REAR_WIPER);
-                const frontWipersAreAvailable = this.lineItemsContainsPartType(
-                    partTypeStrings.FRONT_WIPER
-                );
+                const rearWiperIsAvailable    = this.lineItemsContainsPartType(partTypeStrings.REAR_WIPER);
+                const frontWipersAreAvailable = this.lineItemsContainsPartType(partTypeStrings.FRONT_WIPER);
                 return (
                     rearWiperIsAvailable &&
                     (this.glassToReplaceContainsGlassLocation(glassLocations.REAR) ||
@@ -186,7 +179,7 @@
             getTierTwoPackageVapsPrice() {
                 let vapsPrice = 0;
                 const priceFrontWipers = this.frontWipersApplicableForTierTwo;
-                const priceRearWipers = this.rearWiperApplicableForTierTwo;
+                const priceRearWipers  = this.rearWiperApplicableForTierTwo;
                 this.nullSafeAvailableLineItems.forEach((item) => {
                     if (
                         (priceFrontWipers &&
@@ -201,7 +194,7 @@
             getTierThreePackageVapsPrice() {
                 let vapsPrice = 0;
                 const priceFrontWipers = this.frontWipersApplicableForTierThree;
-                const priceRearWipers = this.rearWiperApplicableForTierThree;
+                const priceRearWipers  = this.rearWiperApplicableForTierThree;
                 const priceRainDefense = this.rainDefenseApplicableForTierThree;
                 this.nullSafeAvailableLineItems.forEach((item) => {
                     if (
@@ -218,8 +211,9 @@
                 return vapsPrice;
             },
             selectDefaultPackage() {
-                const vapsFromStore = this.$store.lineItems.vaps;
-                let lowestTierForPackage = packageNames.TIER_ONE;
+                const store                = useMainStore();
+                const vapsFromStore        = store.lineItems.vaps;
+                let   lowestTierForPackage = packageNames.TIER_ONE;
                 if (vapsFromStore?.length > 0) {
                     vapsFromStore.every((vapsItem) => {
                         let lowestTierForThisItem = this.getLowestTierForThisItem(vapsItem);
@@ -348,8 +342,9 @@
                 return !!partTypeMatches.length;
             },
             glassToReplaceContainsGlassLocation(glassLocation) {
+                const store = useMainStore();
                 const glassLocationMatches =
-                    this.$store.order.damage.glassToReplace?.filter(
+                    store.order.damage.glassToReplace?.filter(
                         (glassToReplace) => glassToReplace.glassLocation === glassLocation
                     ) ?? [];
                 return !!glassLocationMatches.length;
diff --git a/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue
index 74c38517..c32dd9d3 100644
--- a/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue
+++ b/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue
@@ -1,9 +1,9 @@
 <template>
     <baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
-        <div class="package-label"
+        <div class="package-label mb-4"
              :class="[this.buttonLabelSubCopy ? 'has-subheader' : '']"
              for="testradio">
-            <div class="package-specs" style="max-height:1000px;">
+            <div class="package-specs">
                 <p class="m-0">
                     <span v-html="this.buttonLabel"></span>
                     <span class="pricing-info" v-html="this.buttonAuxiliaryCopy"></span>
@@ -11,10 +11,9 @@
                 <p class="sub-label m-0"
                    v-if="this.buttonLabelSubCopy"
                    v-html="this.buttonLabelSubCopy"></p>
-                <div class="hide-when-closed" style="display: block;">
-                    <!-- Parse the body text containing <ul> with logic -->
-                    <ul>
-                        <li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem">
+                <div>
+                    <ul >
+                        <li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem" class="mb-0">
                             <!-- no textLink -->
                             <span v-if="!doesCopyContainTextLink(listItem)"
                                   v-html="listItem"></span>
@@ -40,7 +39,8 @@
                         </li>
                     </ul>
                     <!-- End of body text parsing -->
-                    <div class="package-footer fw-bold caption ms-n6"
+                    <!--ms-n6-->
+                    <div class="package-footer fw-bold caption mt-4 ml-n4 mr-3"
                          v-if="this.buttonFooterCopy"
                          v-html="this.buttonFooterCopy"></div>
                 </div>
@@ -50,8 +50,8 @@
 </template>
 
 <script>
-import baseInputButton from '@/digital-components/base-input-button/base-input-button';
-import textLink from '@/ux-components/text-link/text-link';
+import baseInputButton         from '@/digital-components/base-input-button/base-input-button';
+import textLink                from '@/ux-components/text-link/text-link';
 import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
 import {
     getRouterLinkDisplayTextFromCopy,
@@ -64,12 +64,12 @@ export default {
     mixins: [inputButtonWrapperMixin],
     components: {
         baseInputButton,
-        textLink
+        textLink,
     },
     computed: {
         arrayOfListItemsFromBodyText() {
             return this.getArrayOfListItemsFromRawCmsCopy(this.buttonBodyCopy);
-        }
+        },
     },
     methods: {
         getRouterLinkDisplayTextFromCopy,
@@ -77,24 +77,26 @@ export default {
         splitCopyOnCMSPlaceHolder,
         doesCopyContainTextLink,
         stripUlTagFromCopy(copy) {
-            if (copy) {
-                const regex = /(?:<ul(?:.*?)>)|(?:<\/ul>)/g;
-                return copy.replace(regex, '');
-            }
+            return copy;
         },
         getArrayOfListItemsFromRawCmsCopy(copy) {
             if (copy) {
-                const withoutUlTags = this.stripUlTagFromCopy(copy);
-                return withoutUlTags
-                    .split(/(?:<li(?:.*?)>)|(?:<\/li>)/g)
-                    .filter((lineItem) => lineItem);
+                return copy
+                    .split('- ')  //At some point we'll want a better delimiter
+                    .filter((lineItem) => lineItem);    
             }
         }
-    }
+    },
 };
 </script>
 
 <style lang="scss" scoped>
+    .ml-n4 {
+        margin-left: -$spacer * 2;
+    }
+    .mr-3 {
+        margin-right: $spacer * 1.5;
+    }
     .package-main {
         .package-wrapper {
             margin: 0.5rem 0;
@@ -209,7 +211,7 @@ export default {
                 display: flex;
                 flex-direction: column;
                 width: 100%;
-                max-height: 0;
+                max-height: 1000px;
                 transition: all 0.5s ease;
 
                 p {
@@ -232,7 +234,7 @@ export default {
                 }
 
                 ul {
-                    margin: 1rem 0 0 -15px;
+                    margin: 1rem 0 0 -.6rem;
                     padding: 0;
 
                     li {
@@ -257,10 +259,6 @@ export default {
                         opacity: 0;
                     }
                 }
-
-                .hide-when-closed {
-                    display: none;
-                }
             }
         }
     }
diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue
index 1800c8e7..10015e54 100644
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@@ -3,7 +3,9 @@
         <div class="page-container-grouped-styles">
             <loadingModal ref="loadingModal" />
             <siteHeader cmsWidgetName="SiteHeaderWidget" />
-            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
+                           justification="left"
+                           issContainingPage="service-packages"/>
             <div class="fade-on-route-transition sub-container make-tall">
                 <servicePackageQuestion ref="servicePackage"
                                         cmsWidgetName="ServicePackage"
@@ -16,14 +18,14 @@
                 <textBlock cmsWidgetName="PriceDisclaimerWidget"
                            justifyText="left"
                            typeStyle="caption"
-                           class="mt-4" />
+                           style="margin-bottom: 6rem;"
+                           class="mt-2 mx-6" />
                 <!--<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
                 <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
                 <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
                 <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />-->
                 <siteFooter cmsWidgetName="SiteFooterWidget"
                             :isForwardActionDisabled="!meta.valid"
-                            :isBackButtonHidden="shouldHideBackButton"
                             @back-clicked="backButtonAction"
                             @ForwardClicked="forwardButtonAction" />
             </div>
@@ -33,23 +35,21 @@
 
 <script>
     // Components
-    import siteHeader                from '@/iss-components/site-header/site-header';
-    import siteFooter                from '@/iss-components/site-footer/site-footer';
-    import siteSubHeader             from '@/iss-components/site-sub-header/site-sub-header';
-    import servicePackageQuestion    from './service-package-question/service-package-question';
-    import textBlock                 from '@/digital-components/text-block/text-block';
-    //import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal';
-    import loadingModal              from '@/iss-components/loading-modal/loading-modal.vue';
-    //import vehicleQuestionsMixin from '../../mixins/vehicle-questions-mixin';
+    import siteHeader                 from '@/iss-components/site-header/site-header';
+    import siteFooter                 from '@/iss-components/site-footer/site-footer';
+    import siteSubHeader              from '@/iss-components/site-sub-header/site-sub-header';
+    import servicePackageQuestion     from './service-package-question/service-package-question';
+    import textBlock                  from '@/digital-components/text-block/text-block';
+    import loadingModal               from '@/iss-components/loading-modal/loading-modal.vue';
     import { settleAllPromises }      from '@/helpers/layout-helper';
     import { useMainStore }           from "@/store";
     import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
     import { required }               from '@/helpers/validation-rules';
     import { errorMessages }          from '@/constants/error-messages';
     import { Form, defineRule }       from 'vee-validate';
-    //import { navigateToHeritageFunnel } from '@/helpers/heritage-integration/navigation-helper';
-    //import { applicationConfig } from '@/constants/application-config';
+
     defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
+
     export default {
         name: 'service-packages',
         async beforeRouteEnter(to, from, next) {
@@ -58,30 +58,29 @@
             // Call APIs
             const cmsContentPromise      = fetchCmsContentForPage(to.query.issPage);
 
-            const carId                  = store.order.vehicle.carId;
-            const serviceZipCode         = store.order.serviceLocation.zipCode;
-            const wipersPromise          = store.getWipers(carId, serviceZipCode);
+            const wipersPromise          = store.getWipers();
             const rainDefensePromise     = store.getRainDefense();
             const supportingItemsPromise = store.getSupportingItems();
             const promiseResultMap = [
                 {
                     resultKey: 'cmsContent',
-                    promise: cmsContentPromise
+                    promise: cmsContentPromise,
                 },
                 {
                     resultKey: 'wipers',
-                    promise: wipersPromise
+                    promise: wipersPromise,
                 },
                 {
                     resultKey: 'rainDefense',
-                    promise: rainDefensePromise
+                    promise: rainDefensePromise,
                 },
                 {
                     resultKey: 'supportingItems',
-                    promise: supportingItemsPromise
-                }
+                    promise: supportingItemsPromise,
+                },
             ];
-            const resultMap        = await settleAllPromises(promiseResultMap);
+            const resultMap = await settleAllPromises(promiseResultMap);
+
             const clonedGlassParts = store.order.lineItems.glassParts
                 ? JSON.parse(JSON.stringify(store.order.lineItems.glassParts))
                 : [];
@@ -89,15 +88,11 @@
                 resultMap.rainDefense,
                 ...resultMap.supportingItems,
                 ...resultMap.wipers,
-                ...clonedGlassParts
+                ...clonedGlassParts,
             ];
-            //const pricingResults = await baseMixin.methods.dispatchStoreAction(
-            //    storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
-            //    {
-            //        availableLineItems: availableLineItems
-            //    },
-            //    false
-            //);
+
+            //const pricingResults = await store.getPriceOrderItems(availableLineItems);
+
             // Call the "next" function to complete the transition to this page.
             next((vm) => {
                 vm.setCmsContent(resultMap.cmsContent);
@@ -119,13 +114,14 @@
                 this.$refs[modalName].openModal();
             },
             arePagePrerequisitesValid() {
+                const store = useMainStore();
                 return (
-                    store.getters.order.serviceLocation.zipCode &&
-                    store.getters.order.serviceLocation.zipCodeCtu &&
-                    (store.getters.order.damage.isRepair ||
-                        (store.getters.order.lineItems?.glassParts != null &&
-                            store.getters.order.lineItems.glassParts.length > 0)) &&
-                    store.getters.order.referralNumber?.length !== 6
+                    store.order.serviceLocation.zipCode &&
+                    store.order.serviceLocation.zipCodeCtu &&
+                    (store.order.damage.isRepair ||
+                        (store.order.lineItems?.glassParts != null &&
+                         store.order.lineItems.glassParts.length > 0)) &&
+                    store.order.referralNumber?.length !== 6
                 );
             },
             vapsItemsSelectedAction(vapsItemsSelected) {
@@ -136,6 +132,21 @@
                     this.navigationScenarios.CLICKED_BACK,
                     this.$route
                 );
+            },
+            forwardButtonAction() {
+                //SAVE_PARENT_ACCOUNT_NUMBER,
+                //if (this.$store.order.payment.parentAccountNumber !=
+                //    applicationConfig.CASH_PARENT_ACCOUNT_NUMBER) {
+                //    this.supportingItems = this.filterOutFees(this.supportingItems);
+                //}
+                //if (this.pricedGlassParts.length > 0) {
+                //  this.storeActions.SAVE_GLASS_PARTS,
+                //  this.pricedGlassParts,
+                //}
+                //this.storeActions.SAVE_SUPPORTING_ITEMS,
+                //this.supportingItems,
+                //this.storeActions.SAVE_VAPS, this.selectedVaps
+                //navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
             }
         },
         components: {
diff --git a/src/router/router-constants/issPage-values.js b/src/router/router-constants/issPage-values.js
index 634039d4..f696f140 100644
--- a/src/router/router-constants/issPage-values.js
+++ b/src/router/router-constants/issPage-values.js
@@ -1,27 +1,28 @@
 export const issPageValues = {
     ENTRY_PAGE:            'entry-page',
     WELCOME_PAGE:          'welcome-page',
-    POLICY_HOLDER_DETAILS: 'policy-holder-details',
-    VEHICLE_MAKE:          'vehicle-make',
-    VEHICLE_YEAR:          'vehicle-year',
-    VEHICLE_MODEL:         'vehicle-model',
-    VEHICLE_STYLE:         'vehicle-style',
-    VEHICLE_DAMAGE:        'vehicle-damage',
-    VEHICLE_LOOKUP:        'vehicle-lookup',
+
     ADDRESS_LOOKUP:        'address-lookup',
     ADDRESS_VEHICLES:      'address-vehicles',
-    LICENSE_PLATE_LOOKUP:  'license-plate-lookup',
-    VIN_LOOKUP:            'vin-lookup',
-    VEHICLE_PARTS:         'vehicle-parts',
-    PART_QUESTIONS:        'part-questions',
-    MOLDING_QUESTIONS:     'molding-questions',
     CAPABILITY_QUESTIONS:  'capability-questions',
-    COVERAGE_STATEMENT:    'coverage-statement',
-    PROVIDER_PREFERENCE:   'provider-preference',
-    SERVICE_LOCATION:      'service-location',
-    REVEAL:                'reveal',
     ESTIMATE:              'estimate',
-    ADDRESS_VEHICLES:      'address-vehicles',
+    COVERAGE_STATEMENT:    'coverage-statement',
+    LICENSE_PLATE_LOOKUP:  'license-plate-lookup',
+    MOLDING_QUESTIONS:     'molding-questions',
+    PART_QUESTIONS:        'part-questions',
+    POLICY_HOLDER_DETAILS: 'policy-holder-details',
+    PROVIDER_PREFERENCE:   'provider-preference',
+    REVEAL:                'reveal',
+    REVIEW_ORDER:          'review-order',
+    SERVICE_LOCATION:      'service-location',
     SERVICE_PACKAGE:       'service-package',
+    VEHICLE_DAMAGE:        'vehicle-damage',
+    VEHICLE_LOOKUP:        'vehicle-lookup',
+    VEHICLE_MAKE:          'vehicle-make',
+    VEHICLE_MODEL:         'vehicle-model',
+    VEHICLE_PARTS:         'vehicle-parts',
+    VEHICLE_STYLE:         'vehicle-style',
+    VEHICLE_YEAR:          'vehicle-year',
+    VIN_LOOKUP:            'vin-lookup'
   };
   
\ No newline at end of file
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index ecc9a95a..a73527eb 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -425,7 +425,6 @@ const routingTable = function(store) {
           destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE,
         },
       ],
-
     },
     {
       issPageValue: issPageValues.PROVIDER_PREFERENCE,
@@ -440,7 +439,19 @@ const routingTable = function(store) {
         },
       ],
     },
-
+    {
+      issPageValue: issPageValues.SERVICE_PACKAGE,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.SERVICE_LOCATION
+        },
+        {
+          scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
+          destinationIssPageValue: issPageValues.REVIEW_ORDER
+        }
+      ]
+    }
   ];
 };
 
diff --git a/src/store/index.js b/src/store/index.js
index 527d854b..692ea89d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -85,9 +85,7 @@ const getDefaultState = () => {
       referralDate: null,
     },
     applicationUser: {
-      lastPageVisited: null,
       experiments: [],
-      triggeredSiteEntry: false,
       eventBus: [],
       pageData: {},
       savedSessionTimeout: getDateForSavedSessionTimeout(),
@@ -435,7 +433,7 @@ export const useMainStore = defineStore({
             },
         });
       },
-        getWipers() {
+      getWipers() {
         const carId = this.order.vehicle.carId;
         ///WARNING WARNING DANGER WILL ROBINSON
         ///TODO: this is temp test code until serviceLocation is complete.
@@ -486,6 +484,44 @@ export const useMainStore = defineStore({
             });
       },
 
+      async getPriceOrderItems(availableLineItems) {
+        let zipCodeToUse = this.order.serviceLocation.zipCode;
+        let ctuToUse = this.order.serviceLocation.zipCodeCtu;
+        const availableLineItemsFormattedForRequest =
+            getLineItemQueryStringForPricing(availableLineItems);
+        const vehicle = this.order.vehicle;
+
+        //TEMP
+          zipCodeToUse = "44902";
+          let accountNumber = 0;
+          ctuToUse = 0;
+        //eon
+        let queryString =
+            `ParentAccountNumber=${accountNumber}` +
+            `&CTU=${ctuToUse}` +
+            `&CarId=${vehicle.carId}` +
+            `&Make=${vehicle.make}` +
+            `&Model=${vehicle.model}` +
+            `&Year=${vehicle.year}` +
+            `&ZipCode=${zipCodeToUse}` +
+            `${availableLineItemsFormattedForRequest}`;
+
+        //const lineItemServerData = order.lineItems.serverData;
+
+        //if (lineItemServerData) {
+        //    queryString += `&ServerData=$(encodeURIComponent(lineItemServerData)}`;
+        //}
+
+        //return globalMethods
+        //    .callHttpClient({
+        //        method: endpoints.GetPriceOrderItems.method,
+        //        endpoint: `${endpoints.GetPriceOrderItems.url}?${queryString}`
+        //    }).catch((error) => {
+        //        console.error(error);
+        //        return [];
+        //    });
+      },
+
       lookupVehicleByVin(vin) {
         return globalMethods.callHttpClient({
           method: endpoints.LookupVehicleByVin.method,
@@ -1212,3 +1248,15 @@ function getAllPartNumbers(partsOrQuestions) {
             .join(",")
       : [];
 }
+
+function getLineItemQueryStringForPricing(lineItems) {
+  return lineItems
+        .map((lineItem) => {
+          let queryStringSnippet = `&LineItems=${lineItem.partNumber}`;
+          if (lineItem.childParts) {
+            queryStringSnippet += getLineItemQueryStringForPricing(lineItem.childParts);
+        }
+      return queryStringSnippet;
+    })
+    .join('');
+}