Merge branch 'develop' into feature/SSR-1115

src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`cart-dropdown component initial data rendered as expected 1`] = `
+Object {
+  "currencyFormatter": NumberFormat {},
+  "isExpanded": false,
+  "widget": Object {
+    "amountDue": "AmountDueTextWidget",
+  },
+}
+`;

src/iss-components/cart-dropdown/cart-dropdown.spec.js

@@ -0,0 +1,159 @@
+import { shallowMount } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue';
+
+// Supporting Files
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
+import { useMainStore } from '@/store';
+
+function getMountedComponent(mainInitialState = {}, initialData = {}, propsData = {}) {
+    const mountOptions = getMountOptions({
+        router: {
+            navigate: jest.fn()
+        }
+    });
+
+    const testingPinia = createTestingPinia({
+        initialState: {
+            main: mainInitialState
+        }
+    });
+    useMainStore(testingPinia);
+
+    mountOptions.global.plugins = [testingPinia];
+    mountOptions.data = () => (initialData);
+    mountOptions.propsData = propsData;
+
+    const wrapper = shallowMount(cartDropdown, mountOptions);
+    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {});
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}
+
+describe('cart-dropdown component', () => {
+    test('initial data rendered as expected', () => {
+        // Arrange
+        const { wrapper } = getMountedComponent();
+
+        // Assert
+        expect(wrapper.vm.$data).toMatchSnapshot();
+    });
+    describe('displays', () => {
+        test('cart dropdown head', () => {
+            // Arrange
+            const reference = '#cart-dropdown-head';
+            const { wrapper } = getMountedComponent(cartDropdown);
+
+            // Act
+            const head = wrapper.find(reference);
+
+            // Assert
+            expect(head.exists()).toBeTruthy();
+        });
+        test('cart table', () => {
+            // Arrange
+            const reference = '#cart-table';
+            const isExpanded = true;
+            const initialData = { isExpanded };
+            const { wrapper } = getMountedComponent(cartDropdown, {}, initialData);
+
+            // Act
+            const cartTable = wrapper.find(reference);
+
+            // Assert
+            expect(cartTable.exists()).toBeTruthy();
+        });
+    });
+    describe('computed', () => {
+        test.each([
+            [true, true],
+            [false, false],
+            [false, null]
+        ])('isVerified returns %p when isVerified store value is %p', (expected, isVerified) => {
+            // Arrange
+            const storeData = {
+                order: {
+                    payment: {
+                        insuranceCoverage: { isVerified }
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(storeData);
+
+            // Act
+            const result = wrapper.vm.isVerified;
+
+            // Assert
+            expect(result).toBe(expected);
+        });
+        describe('amountDueDisplayed', () => {
+            test('returns verifying coverage text when isVerified false', () => {
+                // Arrange
+                const VERIFYING_COVERAGE = 'Verifying coverage';
+                const storeData = {
+                    order: {
+                        payment: {
+                            insuranceCoverage: {
+                                isVerified: false
+                            }
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(storeData);
+
+                // Act
+                const result = wrapper.vm.amountDueDisplayed;
+
+                // Assert
+                expect(result).toBe(VERIFYING_COVERAGE);
+            });
+            test('returns formatted amount due when isVerified false', () => {
+                // TODO finish when methods done
+            });
+        });
+        describe('amountDue', () => {
+            test('returns 0 when showAsPaid is true', () => {
+                // Arrange
+                const propsData = {
+                    showAsPaid: true
+                };
+                const { wrapper } = getMountedComponent({}, {}, propsData);
+
+                // Act
+                const result = wrapper.vm.amountDue;
+
+                // Assert
+                expect(result).toBe(0);
+            });
+            test('returns sum of subTotal and salesTax when showAsPaid is false', () => {
+                // TODO when subTotal and salesTax are finished
+            });
+        });
+        describe('subTotal', () => {
+            // TODO when method implemented
+        });
+        describe('salesTax', () => {
+            // TODO when method implemented
+        });
+    });
+    describe('method', () => {
+        test.each([
+            ['$0.00', 0],
+            ['$12.00', 12],
+            ['$12.30', 12.3],
+            ['$12.34', 12.34],
+            ['$12.35', 12.345],
+            ['$12.34', 12.344],
+            ['-$1.00', -1]
+        ])('get FormattedAmount returns `%` when amount %', (expected, amount) => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+
+            // Act
+            const result = wrapper.vm.getFormattedAmount(amount);
+
+            // Assert
+            expect(result).toBe(expected);
+        });
+    });
+});

src/iss-components/cart-dropdown/cart-dropdown.vue

@@ -0,0 +1,131 @@
+<template>
+    <div :class="[isExpanded ? 'pb-3' : 'pb-4']">
+        <div
+            id="cart-dropdown-head"
+            class="row cart-toggle flex align-items-center pt-4"
+            :class="[isExpanded ? 'expanded' : '']"
+            @click="toggleIsExpanded">
+            <a
+                aria-label="expand cart details"
+                href="javascript:void(0)"
+                class="col d-flex justify-content-between py-0">
+                <span class="label color-black">{{ amountDueLabel }}</span>
+                <span class="label amount-due">{{ amountDueDisplayed }}</span>
+            </a>
+        </div>
+        <div
+            id="cart-table"
+            class="cart-table px-4">
+            <span>Cart Table Placeholder</span>
+        </div>
+    </div>
+</template>
+
+<script>
+import { useMainStore } from '@/store';
+
+const VERIFYING_COVERAGE = 'Verifying coverage';
+
+export default {
+    name: 'cart-dropdown',
+    components: {},
+    props: {
+        showAsPaid: Boolean,
+        amountDueLabel: String
+    },
+    data() {
+        return {
+            isExpanded: false,
+            currencyFormatter: new Intl.NumberFormat('en-US', {
+                style: 'currency',
+                currency: 'USD'
+            }),
+            widget: {
+                amountDue: 'AmountDueTextWidget'
+            }
+        };
+    },
+    computed: {
+        isVerified() {
+            return useMainStore().payment?.insuranceCoverage?.isVerified ?? false;
+        },
+        amountDueDisplayed() {
+            return this.isVerified
+                ? this.getFormattedAmount(this.amountDue)
+                : VERIFYING_COVERAGE;
+        },
+        amountDue() {
+            return this.showAsPaid
+                ? 0
+                : this.subTotal + this.salesTax;
+        },
+        subTotal() {
+            return 0;
+        },
+        salesTax() {
+            return 0;
+        }
+    },
+    methods: {
+        toggleIsExpanded() {
+            this.isExpanded = !this.isExpanded;
+        },
+        getFormattedAmount(amount) {
+            return this.currencyFormatter.format(amount);
+        }
+    }
+};
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/ux-variables-svg-strings.scss";
+
+.color-black {
+    color: $black;
+}
+
+.cart-table {
+    max-height: 0;
+    transition: all 350ms ease-in;
+    overflow: hidden;
+    visibility: hidden;
+}
+
+.cart-toggle {
+    .amount-due {
+        color: $green;
+    }
+
+    &:after {
+        content: "";
+        transition: all 0.5s ease;
+        background-image: url($svg-payment-method-review-toggle);
+        background-repeat: no-repeat;
+        background-position: right center;
+        width: 1rem;
+        height: 0.5625rem;
+        display: inline-flex;
+        position: relative;
+        right: 0.75rem;
+        margin: 0.5rem 0 0.5rem 1rem;
+        cursor: pointer;
+    }
+    &.expanded:after {
+        transform: rotate(180deg);
+    }
+    &.expanded + .cart-table {
+        max-height: 50rem;
+        transition: all 150ms ease-in;
+        overflow: hidden;
+        visibility: visible;
+    }
+    a {
+        text-decoration: none;
+    }
+    .label {
+        font-weight: $font-weight-bold;
+        line-height: 1.625;
+    }
+}
+</style>

src/layouts/payment-method/payment-method.vue

@@ -19,8 +19,10 @@
                 <hr class="my-0" />
                 <reviewDropdown ref="reviewDropdown" />
                 <hr class="my-0" />
-                <div>Cart Placeholder</div>
+                <cartDropdown
-                <hr class="my-5" />
+                    :showAsPaid="false"
+                    :amountDueLabel="amountDueText" />
+                <hr class="mt-0 mb-5" />
                 <div>Pia Alert Placeholder</div>
                 <paymentMethodQuestion
                         v-model="paymentMethodInternalModel"
@@ -47,6 +49,7 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import reviewDropdown from '@/layouts/payment-method/review-dropdown/review-dropdown.vue';
+import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue';
 import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue';
 
 // Supporting Items
@@ -56,6 +59,7 @@ import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { paymentMethods } from '@/constants/payment-method-constants';
 import globalRules from '@/constants/global-rules';
 import { Form } from 'vee-validate';
+import widgetFields from '@/constants/cms-widget-fields.js';
 
 import { AppointmentTypeStrings } from '@/constants/schedule-constants';
 
@@ -68,6 +72,7 @@ export default {
         siteSubHeader,
         siteFooter,
         reviewDropdown,
+        cartDropdown,
         paymentMethodQuestion
     },
     mixins: [baseFormMixin],
@@ -102,6 +107,9 @@ export default {
             paymentMethodInternalModel: this.getPaymentMethodFromStore(),
             rules: {
                 optionRequired: globalRules.OPTION_REQUIRED
+            },
+            widget: {
+                amountDue: 'AmountDueTextWidget'
             }
         };
     },
@@ -123,6 +131,9 @@ export default {
         },
         paymentMethod() {
             return this.paymentMethodInternalModel;
+        },
+        amountDueText() {
+            return this.getCmsContent(this.widget.amountDue, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
         }
     },
     watch: {

src/layouts/payment-method/review-dropdown/review-dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div :class="[isExpanded ? 'pb-3' : 'pb-4']">
         <div
             class="row review-toggle flex align-items-center pt-4"
             :class="[isExpanded ? 'expanded' : '']"
@@ -134,12 +134,6 @@ export default {
 }
 
 .review-toggle {
-    margin-bottom: 1rem;
-
-    &.expanded {
-        margin-bottom: 0;
-    }
-
     &:after {
         content: "";
         transition: all 0.5s ease;