schedule sub header and change loc link

src/iss-components/site-sub-header/site-sub-header.vue

@@ -19,7 +19,7 @@
             :class="justifySubheader">
             <p
                 class="fw-normal mb-0"
-                :class="alternateFormatting">
+                :class="[alternateFormatting, subTextClasses]">
                 <span v-html="subText"> </span>
             </p>
         </div>
@@ -49,7 +49,8 @@ export default {
         issContainingPage: String,
         justification: String,
         stripRteStyle: Boolean,
-        subContentProperty: String
+        subContentProperty: String,
+        subTextClasses: String
     },
     emits: ['click-event'],
     computed: {

src/layouts/schedule-page/schedule-page.vue

@@ -5,18 +5,26 @@
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
         <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <div class="container-fluid pb-2">
-                    <p>Placeholder for schedule page</p>
-                    <siteFooter
-                        ref="siteFooter"
-                        class="mt-5"
-                        cmsWidgetName="SiteFooterWidget"
-                        :isForwardActionDisabled="!meta.valid"
-                        @ForwardClicked="forwardButtonAction"
-                        @backClicked="backButtonAction" />
-                </div>
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            <siteSubHeader
+                cmsWidgetName="ScheduleSubHeaderWidget"
+                subTextClasses="text-center small sub-text"
+                class="mt-5" />
+            <template v-if="ChangeShopLink.length">
+                <textBlock
+                    cmsWidgetName="ChangeShopLink"
+                    justifyText="center"
+                    class="mb-3 text-link-small"
+                    marginTopSizeOverride="1" />
+            </template>
+            <div class="main-content-container">
+                <siteFooter
+                    ref="siteFooter"
+                    class="mt-5"
+                    cmsWidgetName="SiteFooterWidget"
+                    :isForwardActionDisabled="!meta.valid"
+                    @backClicked="backButtonAction"
+                    @forwardClicked="forwardButtonAction" />
             </div>
         </div>
     </Form>
@@ -24,11 +32,13 @@
 <script>
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import textBlock from '@/digital-components/text-block/text-block.vue';
 
 // Supporting files
 import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { fetchCmsContentForPage, splitCopyOnCMSPlaceHolder } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
@@ -38,7 +48,9 @@ export default {
     name: 'schedule-page',
     components: {
         siteHeader,
+        siteSubHeader,
         siteFooter,
+        textBlock,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form
     },
@@ -56,7 +68,6 @@ export default {
 
         // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
-
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
         });
@@ -67,8 +78,18 @@ export default {
     },
     data() {
 
+    },
+    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: {
+        splitCopyOnCMSPlaceHolder,
         arePagePrerequisitesValid() {
             const { serviceLocation } = useMainStore().order;
             const serviceLocationPreReqs = serviceLocation.zipCode
@@ -98,3 +119,27 @@ export default {
     }
 };
 </script>
+<style lang="scss" scoped>
+$page-side-padding: 1.5rem;
+
+.page-container-grouped-styles {
+    overflow: auto;
+
+    .main-content-container {
+        padding: 0 1.5rem !important;
+    }
+}
+
+:deep(.text-link-small) {
+    a, .btn-link {
+        font-size: 0.875rem;
+        line-height: 1.5;
+    }
+}
+
+:deep(.subheader-primary) {
+    h5.dark-header {
+        margin-bottom: 0.25rem !important;
+    }
+}
+</style>