Fixing vehicle damage lines

src/helpers/damage-review-content-generator.js

@@ -0,0 +1,71 @@
+import damageLocationsSelected from '@/constants/damage-locations-selected.js';
+
+function getLocationAnswer(damageLocation, locationAnswers) {
+    return locationAnswers?.find((answer) => answer.Name === damageLocation);
+}
+
+function getGlassPieces(damageLocation, glassToReplace) {
+    return glassToReplace?.filter((item) => item.glassLocation === damageLocation);
+}
+
+function getWindshieldCopy(answerContent, glassToReplace, isRepair) {
+    const windshieldPieces = getGlassPieces(damageLocationsSelected.WINDSHIELD, glassToReplace);
+    return isRepair || !!windshieldPieces?.length ? [answerContent?.Text] : [];
+}
+
+function getRearCopy(answerContent, glassToReplace) {
+    const rearPieces = getGlassPieces(damageLocationsSelected.REAR, glassToReplace);
+    return rearPieces?.length ? [answerContent?.Text] : [];
+}
+
+function generateBulletedListFromAnswers(answers) {
+    const items = answers.map((answer) => `<li>${answer.Text}</li>`);
+    return `<ul>${items.join('')}</ul>`;
+}
+
+function getSideCopy(location, locationAnswers, damageAnswers, glassToReplace) {
+    const sideItems = getGlassPieces(location, glassToReplace);
+    const damageAnswersOnOrder = damageAnswers?.filter((answer) =>
+        sideItems?.some((glassPiece) => answer.Name === glassPiece.glassName));
+
+    return sideItems?.length
+        ? [
+            locationAnswers?.Text,
+            generateBulletedListFromAnswers(damageAnswersOnOrder)
+        ]
+        : [];
+}
+
+function getDamageDisplayContent(
+    locationAnswers,
+    driverSideDamageAnswers,
+    passengerSideDamageAnswers,
+    glassToReplace,
+    isRepair
+) {
+    return [
+        ...getWindshieldCopy(
+            getLocationAnswer(damageLocationsSelected.WINDSHIELD, locationAnswers),
+            glassToReplace,
+            isRepair
+        ),
+        ...getSideCopy(
+            damageLocationsSelected.DRIVER,
+            getLocationAnswer(damageLocationsSelected.DRIVER, locationAnswers),
+            driverSideDamageAnswers,
+            glassToReplace
+        ),
+        ...getSideCopy(
+            damageLocationsSelected.PASSENGER,
+            getLocationAnswer(damageLocationsSelected.PASSENGER, locationAnswers),
+            passengerSideDamageAnswers,
+            glassToReplace
+        ),
+        ...getRearCopy(
+            getLocationAnswer(damageLocationsSelected.REAR, locationAnswers),
+            glassToReplace
+        )
+    ];
+}
+
+export { getDamageDisplayContent, getLocationAnswer };

src/layouts/review-page/review-sections/damage-review/damage-review.vue

@@ -9,6 +9,8 @@
 <script>
 import damageLocationsSelected from '@/constants/damage-locations-selected.js';
 import reviewBlock from '@/layouts/review-page/review-block/review-block.vue';
+import { useMainStore } from '@/store';
+import { getDamageDisplayContent, getLocationAnswer } from '@/helpers/damage-review-content-generator.js';
 
 export default {
     name: 'damage-review',
@@ -21,83 +23,24 @@ export default {
         damage: Object
     },
     emits: ['edit-clicked'],
-    data() {
-        return {};
-    },
     computed: {
         displayContent() {
-            return [
+            const { glassToReplace, isRepair } = useMainStore().order.damage;
-                ...this.windshieldCopy,
+            return this.getDamageDisplayContent(
-                ...this.driverSideCopy,
+                this.locationAnswers,
-                ...this.passengerSideCopy,
+                this.driverSideDamageAnswers,
-                ...this.rearCopy
+                this.passengerSideDamageAnswers,
-            ];
+                glassToReplace,
+                isRepair
+            );
         },
-        hasWindshieldDamage() {
+        driverSideDamageAnswers() {
-            const windshieldPieces = this.getGlassPieces(damageLocationsSelected.WINDSHIELD);
+            const answerContent = this.getLocationAnswer(damageLocationsSelected.DRIVER, this.locationAnswers);
-
+            return this.getAnswersNullSafe(answerContent?.SubWidgetName);
-            return this.damage.isRepair || !!windshieldPieces?.length;
         },
-        hasDriverSideDamage() {
+        passengerSideDamageAnswers() {
-            const driverPieces = this.getGlassPieces(damageLocationsSelected.DRIVER);
+            const answerContent = this.getLocationAnswer(damageLocationsSelected.PASSENGER, this.locationAnswers);
-
+            return this.getAnswersNullSafe(answerContent?.SubWidgetName);
-            return !!driverPieces?.length;
-        },
-        hasPassengerSideDamage() {
-            const passengerPieces = this.getGlassPieces(damageLocationsSelected.PASSENGER);
-
-            return !!passengerPieces?.length;
-        },
-        hasRearDamage() {
-            const rearPieces = this.getGlassPieces(damageLocationsSelected.REAR);
-
-            return !!rearPieces?.length;
-        },
-        windshieldCopy() {
-            const answerContent = this.getLocationAnswer(damageLocationsSelected.WINDSHIELD);
-
-            if (this.hasWindshieldDamage) {
-                return [answerContent?.Text];
-            }
-            return [];
-        },
-        driverSideCopy() {
-            const answerContent = this.getLocationAnswer(damageLocationsSelected.DRIVER);
-            const damageAnswers = this.getAnswersNullSafe(answerContent?.SubWidgetName);
-            const driverSideItems = this.getGlassPieces(damageLocationsSelected.DRIVER);
-            const damageAnswersOnOrder = damageAnswers?.filter((answer) =>
-                driverSideItems?.some((glassPiece) => answer.Name === glassPiece.glassName));
-
-            if (this.hasDriverSideDamage) {
-                return [
-                    answerContent?.Text,
-                    this.generateBulletedListFromAnswers(damageAnswersOnOrder)
-                ];
-            }
-            return [];
-        },
-        passengerSideCopy() {
-            const answerContent = this.getLocationAnswer(damageLocationsSelected.PASSENGER);
-            const damageAnswers = this.getAnswersNullSafe(answerContent?.SubWidgetName);
-            const passengerSideItems = this.getGlassPieces(damageLocationsSelected.PASSENGER);
-            const damageAnswersOnOrder = damageAnswers?.filter((answer) =>
-                passengerSideItems?.some((glassPiece) => answer.Name === glassPiece.glassName));
-
-            if (this.hasPassengerSideDamage) {
-                return [
-                    answerContent?.Text,
-                    this.generateBulletedListFromAnswers(damageAnswersOnOrder)
-                ];
-            }
-            return [];
-        },
-        rearCopy() {
-            const answerContent = this.getLocationAnswer(damageLocationsSelected.REAR);
-
-            if (this.hasRearDamage) {
-                return [answerContent?.Text];
-            }
-            return [];
         },
         locationAnswers() {
             return this.getAnswersNullSafe(this.damageLocationsWidgetName);
@@ -109,26 +52,10 @@ export default {
         },
         getAnswersNullSafe(widgetName) {
             const rawAnswers = this.getCmsContent(widgetName, 'Answers');
-
             return rawAnswers || [];
         },
-        getLocationAnswer(damageLocation) {
+        getDamageDisplayContent,
-            return this.locationAnswers?.find((answer) => answer.Name === damageLocation);
+        getLocationAnswer
-        },
-        getGlassPieces(damageLocation) {
-            return this.damage?.glassToReplace?.filter((item) => item.glassLocation === damageLocation);
-        },
-        generateBulletedListFromAnswers(answers) {
-            let list = '<ul>';
-
-            answers.forEach((answer) => {
-                list += `<li>${answer.Text}</li>`;
-            });
-
-            list += '</ul>';
-
-            return list;
-        }
     }
 };
 </script>

src/layouts/tpa-submit/review-block/review-block.vue

@@ -21,8 +21,8 @@
         <p
             v-for="line in lines"
             :key="line"
-            class="small review-block__body--line">
+            class="small review-block__body--line"
-            {{ line }}
+            v-html="line">
         </p>
     </div>
 </template>

src/layouts/tpa-submit/tpa-submit.vue

@@ -78,7 +78,9 @@
                             :customText="orderDetailsBody"
                             :marginTopSizeOverride="4"
                             class="mb-4 px-4 small text-color--darker-gray" />
-                        <deductibleBox ref="deductibleBox" :value="deductibleBoxValue" />
+                        <deductibleBox
+                            ref="deductibleBox"
+                            :value="deductibleBoxValue" />
                     </div>
                     <siteFooter
                         ref="siteFooter"
@@ -109,6 +111,8 @@ import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
 import { useMainStore } from '@/store';
 import { toTitleCase, toDisplayPhoneNumber, formatAddress, formatAmountInDollars } from '@/helpers/text-helper.js';
+import { getDamageDisplayContent, getLocationAnswer } from '@/helpers/damage-review-content-generator.js';
+import damageLocationsSelected from '@/constants/damage-locations-selected.js';
 
 const VERIFYING_COVERAGE = 'Verifying coverage';
 
@@ -148,6 +152,7 @@ export default {
                     shop: 'PreferredShopSubTitle',
                     contactInfo: 'ContactDetailsSubTitle'
                 },
+                damageLocations: 'DamageLocationsWidget',
                 orderDetails: 'OrderDetailsContent',
                 footer: 'SiteFooterWidget'
             },
@@ -197,15 +202,34 @@ export default {
                 .join(' ');
             return [line];
         },
+        locationAnswers() {
+            return this.getAnswersNullSafe(this.widget.damageLocations);
+        },
+        driverSideDamageAnswers() {
+            const answerContent = this.getLocationAnswer(damageLocationsSelected.DRIVER, this.locationAnswers);
+            return this.getAnswersNullSafe(answerContent?.SubWidgetName);
+        },
+        passengerSideDamageAnswers() {
+            const answerContent = this.getLocationAnswer(damageLocationsSelected.PASSENGER, this.locationAnswers);
+            return this.getAnswersNullSafe(answerContent?.SubWidgetName);
+        },
+        // TODO finish
         getDamageLines() {
-            return [useMainStore().order.policy.damageCause ?? ''];
+            const { glassToReplace, isRepair } = useMainStore().order.damage;
+            return this.getDamageDisplayContent(
+                this.locationAnswers,
+                this.driverSideDamageAnswers,
+                this.passengerSideDamageAnswers,
+                glassToReplace,
+                isRepair
+            );
         },
         getPreferredShopLines() {
             const { phoneNumber, address } = useMainStore().order.serviceLocation.provider;
             const { streetAddress, city, state, zipCode } = address;
             const displayAddress = this.formatAddress(streetAddress, null, city, state, zipCode);
             const displayPhoneNumber = this.toDisplayPhoneNumber(phoneNumber);
-            return [this.companyName ?? '', displayAddress, displayPhoneNumber];
+            return [this.toTitleCase(this.companyName ?? ''), displayAddress, displayPhoneNumber];
         },
         getContactInfoLines() {
             const { firstName, lastName, emailAddress, phoneNumber } = useMainStore().contactInfo;
@@ -231,15 +255,12 @@ export default {
                 return {
                     title: this.getCmsContent(widgetName, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
                     lines,
-                    onClickEdit: this.getNavigateByScenarioMethod(scenario)
+                    onClickEdit: () => this.navigate(scenario)
                 };
             },
             forwardButtonAction() {
                 this.navigate(this.navigationScenarios.CLICKED_FORWARD);
             },
-            getNavigateByScenarioMethod(scenario) {
-                return () => this.navigate(scenario);
-            },
             navigate(scenario) {
                 this.$router.navigate(scenario, this.$route);
             },
@@ -255,12 +276,18 @@ export default {
                         return null;
                 }
             },
+            getAnswersNullSafe(widgetName) {
+                const rawAnswers = this.getCmsContent(widgetName, 'Answers');
+                return rawAnswers || [];
+            },
             processIfStatements,
             getStringWithCustomValues,
             toDisplayPhoneNumber,
             toTitleCase,
             formatAddress,
-            formatAmountInDollars
+            formatAmountInDollars,
+            getDamageDisplayContent,
+            getLocationAnswer
         }
 };
 </script>

src/store/index.js

@@ -13,7 +13,6 @@ import damageLocationsSelected from '@/constants/damage-locations-selected';
 import coverageStatuses from '@/constants/coverage-statuses';
 import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from '@/constants/schedule-constants';
 import { convertDateStringToDate, getDateDifferenceInDays, militaryToTwelveHourTime } from '@/helpers/date-helper';
-// import endorsementOptions from '@/constants/endorsement-options';
 
 const storeId = 'main';
 
@@ -220,6 +219,7 @@ export const useMainStore = defineStore({
         lineItems: (state) => state.order.lineItems,
         payment: (state) => state.order.payment,
         policy: (state) => state.order.policy,
+        hasExactlyOneChip: () => state.order.damage.numberOfChips === 1,
         hasAnyNonWindshieldGlassParts: (s) => !s.order.policy.isDamageGlassOnly,
         isMobileAppointment: (state) => state.order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
             || state.order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP,