CSR-1129: formatting changes

src/digital-components/date-picker/date-picker.vue

@@ -637,5 +637,4 @@ export default {
         }
     }
 }
-
 </style>

src/layouts/schedule/schedule.vue

@@ -0,0 +1,136 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <div class="page-container-grouped-styles">
+            <loadingModal ref="loadingModal" />
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
+            <div class="text-center mt-1 mb-3" v-if="ChangeShopLink.length">
+                <span v-for="copy in ChangeShopLink" :key="copy">
+                    <span v-if="doesCopyContainRouterLink(copy)" class="text-body">
+                        <router-link
+                            :to="{
+                                query: { fmgPage: `${getRouterLinkRouteFromCopy(copy)}` },
+                                name: 'root',
+                            }"
+                            >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
+                        >
+                    </span>
+                    <span v-else class="m-0 text-body" v-html="copy"></span>
+                </span>
+            </div>
+            <date-picker
+                selectableDates="custom"
+                v-model="selectedDate"
+                :customSelectableDatesCallback="getAvailableDates" />
+            <funnel-footer
+                cmsWidgetName="FunnelFooterWidget"
+                ref="funnelFooter"
+                :isForwardActionDisabled="!meta.valid"
+                @back-clicked="backButtonAction"
+                @ForwardClicked="forwardButtonAction" />
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import { Form, defineRule } from "vee-validate";
+import datePicker from "@/digital-components/date-picker/date-picker";
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import {
+    doesCopyContainRouterLink,
+    splitCopyOnCMSPlaceHolder,
+    getRouterLinkRouteFromCopy,
+    getRouterLinkDisplayTextFromCopy,
+} from "@/helpers/cms-content-helper";
+import { errorMessages } from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
+
+defineRule("date-required", required(errorMessages.DATE_REQUIRED));
+
+export default {
+    name: "schedule",
+    data() {
+        return {
+            selectedDate: null,
+            mockSelectableDatesData: [
+                { year: 2023, month: 4, date: 13 },
+                { year: 2023, month: 4, date: 14 },
+                { year: 2023, month: 4, date: 26 },
+                { year: 2023, month: 5, date: 4 },
+                { year: 2023, month: 5, date: 5 },
+                { year: 2023, month: 5, date: 14 },
+                { year: 2023, month: 5, date: 21 },
+                { year: 2023, month: 5, date: 23 },
+                { year: 2023, month: 5, date: 25 },
+                { year: 2023, month: 6, date: 11 },
+            ],
+        };
+    },
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    computed: {
+        ChangeShopLinkText() {
+            return this.getCmsContent("ChangeShopLink", "Text");
+        },
+        ChangeShopLink() {
+            // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
+            return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
+        },
+    },
+    methods: {
+        doesCopyContainRouterLink,
+        splitCopyOnCMSPlaceHolder,
+        getRouterLinkRouteFromCopy,
+        getRouterLinkDisplayTextFromCopy,
+        arePagePrerequisitesValid() {
+            return true;
+            // NEED TODO - WHAT ARE PAGE REQ'S FOR THIS PAGE?
+        },
+        getAvailableDates(startDate, endDate) {
+            return this.mockSelectableDatesData;
+        },
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        forwardButtonAction() {
+            navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
+        },
+    },
+    components: {
+        funnelHeader,
+        funnelFooter,
+        funnelSubHeader,
+        Form,
+        loadingModal,
+        datePicker,
+    },
+};
+</script>
+
+<style lang="scss"></style>

src/layouts/service-location/service-location.vue

@@ -284,7 +284,10 @@ export default {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         forwardButtonAction() {
-            navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.SELECTED_LOCATION,
+                this.$route
+            );
         },
     },
     components: {