Merge pull request #1398 from Safelite/feature/CSR-1389
Feature/csr 1389
This commit is contained in:
chloeherdsafelite
GitHub
commit
8ee5a11ec9
10 changed files with 576 additions and 51 deletions
|
|
@ -6,6 +6,8 @@ const experimentSettings = {
|
|||
GOOGLE_CUSTOM_DIMENSION_INDEX: "Google Custom Dimension Index",
|
||||
SUPPRESS_VIN_CAPTURE: "SuppressVinCapture",
|
||||
DISPLAY_AVAILABILITY_INDICATORS: "DisplayAvailabilityIndicators",
|
||||
PIA_EXPERIENCE: "PIA Experience",
|
||||
SUBMIT_ORDER_ENABLE_PIA: "SubmitOrder_Enable_PIA",
|
||||
};
|
||||
|
||||
const experimentTriggers = {
|
||||
|
|
|
|||
13
src/constants/payment-method-constants.js
Normal file
13
src/constants/payment-method-constants.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
export const paymentMethods = {
|
||||
NONE: null,
|
||||
LATER: "Later",
|
||||
CREDIT_CARD: "CreditCard",
|
||||
PAYPAL: "Paypal",
|
||||
AFTERPAY: "Afterpay",
|
||||
};
|
||||
|
||||
export const paymentTimes = {
|
||||
NONE: null,
|
||||
ADVANCE: "Advance",
|
||||
LATER: "Later",
|
||||
};
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
|
||||
import paymentMethodListButton from "@/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button";
|
||||
|
||||
const testConstants = {
|
||||
images: {
|
||||
A: "imageA",
|
||||
B: "imageB",
|
||||
NONE: null,
|
||||
},
|
||||
names: {
|
||||
A: "nameA",
|
||||
B: "nameB",
|
||||
},
|
||||
content: {
|
||||
withInline: "Button text with {custom:inlineImage} inline.",
|
||||
noInline: "Button text with no inline",
|
||||
},
|
||||
};
|
||||
|
||||
let cmsContent;
|
||||
|
||||
describe("Payment Method Question", () => {
|
||||
beforeEach(() => {
|
||||
cmsContent = {};
|
||||
});
|
||||
|
||||
describe("Side image", () => {
|
||||
it("Renders side image if image is present and not inline", () => {
|
||||
// Arrange
|
||||
const props = generateDefaultProps();
|
||||
const { wrapper } = setupMocks({
|
||||
propsData: props,
|
||||
});
|
||||
|
||||
// Act
|
||||
const showSideImage = wrapper.vm.shouldDisplaySideImage;
|
||||
|
||||
expect(showSideImage).toBe(true);
|
||||
});
|
||||
|
||||
it("Does not render side image if no image is present", () => {
|
||||
// Arrange
|
||||
let props = generateDefaultProps();
|
||||
|
||||
props.buttonImage = testConstants.images.NONE;
|
||||
|
||||
const { wrapper } = setupMocks({
|
||||
propsData: props,
|
||||
});
|
||||
|
||||
// Act
|
||||
const showSideImage = wrapper.vm.shouldDisplaySideImage;
|
||||
|
||||
expect(showSideImage).toBe(false);
|
||||
});
|
||||
|
||||
it("Does not render side image if inline", () => {
|
||||
// Arrange
|
||||
let props = generateDefaultProps();
|
||||
|
||||
props.buttonLabel = testConstants.content.withInline;
|
||||
props.altText = testConstants.content.withInline;
|
||||
|
||||
const { wrapper } = setupMocks({
|
||||
propsData: props,
|
||||
});
|
||||
|
||||
// Act
|
||||
const showSideImage = wrapper.vm.shouldDisplaySideImage;
|
||||
|
||||
expect(showSideImage).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function generateDefaultProps() {
|
||||
return {
|
||||
buttonLabel: testConstants.noInline,
|
||||
altText: testConstants.noInline,
|
||||
groupName: "payment-method",
|
||||
value: testConstants.names.A,
|
||||
buttonImage: testConstants.images.A,
|
||||
};
|
||||
}
|
||||
|
||||
function setupMocks(customMountOptions) {
|
||||
const mountOptions = getMountOptions(customMountOptions);
|
||||
|
||||
const mockMixin = {
|
||||
methods: {
|
||||
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
|
||||
return cmsContent?.[widgetName]?.[cmsFieldName] ?? "";
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
mountOptions.global.mixins = [mockMixin];
|
||||
|
||||
const wrapper = shallowMount(paymentMethodListButton, mountOptions);
|
||||
wrapper.vm.setCmsContent = jest.fn();
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<baseInputButton
|
||||
v-bind="$props"
|
||||
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
|
||||
v-model="selectedValue">
|
||||
<div class="button-content list-button-content d-flex flex-row py-3 px-4">
|
||||
<img
|
||||
v-if="shouldDisplaySideImage"
|
||||
:id="buttonImageId"
|
||||
class="ms-auto order-3"
|
||||
:src="buttonImage"
|
||||
:alt="altText" />
|
||||
<div class="order-2">
|
||||
<p class="m-0">
|
||||
<span v-for="token in tokens" :key="token">
|
||||
<span v-if="isInlineImageToken(token)">
|
||||
<img
|
||||
v-if="hasImage"
|
||||
:src="buttonImage"
|
||||
:alt="getInlineAltText(token)" />
|
||||
<span v-else> {{ getInlineAltText(token) }}</span>
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ token }}
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</baseInputButton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseInputButton from "@/digital-components/base-input-button/base-input-button";
|
||||
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
|
||||
import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
|
||||
|
||||
const INLINE_IMAGE_TOKEN = "custom:inlineImage";
|
||||
|
||||
function isInlineImageToken(token) {
|
||||
return token.includes(INLINE_IMAGE_TOKEN);
|
||||
}
|
||||
|
||||
function getInlineAltText(token) {
|
||||
let innerTokens = token.split(",");
|
||||
|
||||
return innerTokens[1] ?? "";
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "payment-method-list-button",
|
||||
mixins: [inputButtonWrapperMixin],
|
||||
components: {
|
||||
baseInputButton,
|
||||
},
|
||||
methods: {
|
||||
isInlineImageToken,
|
||||
getInlineAltText,
|
||||
},
|
||||
computed: {
|
||||
tokens() {
|
||||
return splitCopyOnCMSPlaceHolder(this.buttonLabel ?? "");
|
||||
},
|
||||
hasImage() {
|
||||
return !!this.buttonImage;
|
||||
},
|
||||
shouldDisplaySideImage() {
|
||||
return this.hasImage && this.tokens.every((token) => !isInlineImageToken(token));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-button {
|
||||
outline: none;
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: static; //override bootstrap
|
||||
|
||||
&:focus-visible + .list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:focus + .list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:checked + .list-button-content {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
}
|
||||
&:checked:focus + .list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:checked + .list-button-content p,
|
||||
&:checked + .list-button-content span {
|
||||
font-weight: 500;
|
||||
}
|
||||
&:checked + .list-button-content span:nth-child(2) {
|
||||
font-weight: 400;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-button-content {
|
||||
color: $gray-600;
|
||||
position: relative;
|
||||
background: $white;
|
||||
transition: all 150ms linear;
|
||||
border-radius: $border-radius-lg;
|
||||
border: 1px solid $gray-500;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
|
||||
span {
|
||||
&.small {
|
||||
font-size: 0.75rem;
|
||||
color: $gray-550;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
|
||||
import paymentMethodQuestion from "@/layouts/payment-method/payment-method-question/payment-method-question";
|
||||
|
||||
const testConstants = {
|
||||
cms: {
|
||||
question: {
|
||||
text: "Choose a payment option",
|
||||
},
|
||||
answers: {
|
||||
optionA: {
|
||||
name: "NameA",
|
||||
text: "TextA",
|
||||
subText: "SubTextA",
|
||||
imageId: "idA",
|
||||
image: "imageA",
|
||||
subWidget: "subWidgetA",
|
||||
},
|
||||
optionB: {
|
||||
name: "NameB",
|
||||
text: "TextB",
|
||||
subText: "SubTextB",
|
||||
imageId: "idB",
|
||||
image: "imageB",
|
||||
subWidget: "subWidgetB",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
let cmsContent;
|
||||
|
||||
describe("Payment Method Question", () => {
|
||||
beforeEach(() => {
|
||||
cmsContent = {
|
||||
PaymentMethodWidget: {
|
||||
QuestionText: testConstants.cms.question,
|
||||
Answers: [
|
||||
{
|
||||
Name: testConstants.cms.answers.optionA.name,
|
||||
Text: testConstants.cms.answers.optionA.text,
|
||||
SubText: testConstants.cms.answers.optionA.subText,
|
||||
ImageId: testConstants.cms.answers.optionA.imageId,
|
||||
AnswerImageUrl: testConstants.cms.answers.optionA.image,
|
||||
SubWidgetName: testConstants.cms.answers.optionA.subWidget,
|
||||
},
|
||||
{
|
||||
Name: testConstants.cms.answers.optionB.name,
|
||||
Text: testConstants.cms.answers.optionB.text,
|
||||
SubText: testConstants.cms.answers.optionB.subText,
|
||||
ImageId: testConstants.cms.answers.optionB.imageId,
|
||||
AnswerImageUrl: testConstants.cms.answers.optionB.image,
|
||||
SubWidgetName: testConstants.cms.answers.optionB.subWidget,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
it("Should map cms content correctly", () => {
|
||||
// Arrange
|
||||
const props = generateDefaultProps();
|
||||
|
||||
const { wrapper } = setupMocks({
|
||||
propsData: props,
|
||||
});
|
||||
|
||||
// Act
|
||||
const mappedContent = wrapper.vm.paymentMethodAnswerData;
|
||||
|
||||
// Assert
|
||||
expect(mappedContent).toEqual([
|
||||
{
|
||||
buttonLabel: testConstants.cms.answers.optionA.text,
|
||||
altText: testConstants.cms.answers.optionA.text,
|
||||
groupName: "payment-method",
|
||||
value: testConstants.cms.answers.optionA.name,
|
||||
buttonImage: testConstants.cms.answers.optionA.image,
|
||||
},
|
||||
{
|
||||
buttonLabel: testConstants.cms.answers.optionB.text,
|
||||
altText: testConstants.cms.answers.optionB.text,
|
||||
groupName: "payment-method",
|
||||
value: testConstants.cms.answers.optionB.name,
|
||||
buttonImage: testConstants.cms.answers.optionB.image,
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it("Handles null cms content gracefully", () => {
|
||||
// Arrange
|
||||
cmsContent = {};
|
||||
const props = generateDefaultProps();
|
||||
|
||||
const { wrapper } = setupMocks({
|
||||
propsData: props,
|
||||
});
|
||||
|
||||
// Act
|
||||
const mappedContent = wrapper.vm.paymentMethodAnswerData;
|
||||
|
||||
// Assert
|
||||
expect(mappedContent).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
function generateDefaultProps() {
|
||||
return {
|
||||
modelValue: "modelValue",
|
||||
};
|
||||
}
|
||||
|
||||
function setupMocks(customMountOptions) {
|
||||
const mountOptions = getMountOptions(customMountOptions);
|
||||
|
||||
const mockMixin = {
|
||||
methods: {
|
||||
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
|
||||
return cmsContent?.[widgetName]?.[cmsFieldName] ?? "";
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
mountOptions.global.mixins = [mockMixin];
|
||||
|
||||
const wrapper = shallowMount(paymentMethodQuestion, mountOptions);
|
||||
wrapper.vm.setCmsContent = jest.fn();
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div class="payment-method-question">
|
||||
<buttonQuestion
|
||||
groupName="payment-method"
|
||||
buttonTypeString="payment-method-list-button"
|
||||
:buttonTypeObject="paymentMethodListButton"
|
||||
isWide
|
||||
:questionText="paymentMethodQuestionText"
|
||||
:answers="paymentMethodAnswerData"
|
||||
isRequired
|
||||
v-model="selectedMethod"
|
||||
textPosition="text-start" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
import paymentMethodListButton from "./payment-method-list-button/payment-method-list-button";
|
||||
import { paymentMethods, paymentTimes } from "@/constants/payment-method-constants";
|
||||
|
||||
export default {
|
||||
name: "payment-method-question",
|
||||
data() {
|
||||
return {
|
||||
paymentMethodListButton: paymentMethodListButton,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
modelValue: String,
|
||||
},
|
||||
methods: {
|
||||
getAnswersNullSafe(widgetName) {
|
||||
const rawData = this.getCmsContent(widgetName, "Answers");
|
||||
|
||||
if (!rawData) {
|
||||
return [];
|
||||
} else {
|
||||
return rawData;
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
selectedMethod: {
|
||||
get: function () {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function (selectedMethod) {
|
||||
this.$emit("update:modelValue", selectedMethod);
|
||||
},
|
||||
},
|
||||
paymentMethodQuestionText() {
|
||||
return this.getCmsContent("PaymentMethodWidget", "QuestionText");
|
||||
},
|
||||
paymentMethodAnswerData() {
|
||||
const cmsData = this.getAnswersNullSafe("PaymentMethodWidget");
|
||||
|
||||
return cmsData.map((answer) => {
|
||||
return {
|
||||
buttonLabel: answer.Text,
|
||||
altText: answer.Text,
|
||||
groupName: "payment-method",
|
||||
value: answer.Name,
|
||||
buttonImage: answer.AnswerImageUrl,
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.payment-method-question {
|
||||
.question-text span {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,6 +5,7 @@ import customerDetails from "@/layouts/payment-method/payment-method.vue";
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import store from "@/store";
|
||||
import { experimentSettings } from "@/constants/experiments";
|
||||
|
||||
// Mock our module for promises.
|
||||
jest.mock("@/helpers/layout-helper.js", () => ({
|
||||
|
|
@ -15,6 +16,8 @@ jest.mock("@/helpers/heritage-integration/order-helper.js", () => ({
|
|||
submitWorkOrder: jest.fn(),
|
||||
}));
|
||||
|
||||
let piaDisabledFlag = false;
|
||||
|
||||
describe("payment-method.vue", () => {
|
||||
describe("navigation", () => {
|
||||
test("if the back button is clicked, navigate back", async () => {
|
||||
|
|
@ -52,19 +55,37 @@ function setupMocks() {
|
|||
},
|
||||
};
|
||||
|
||||
const wrapper = shallowMount(
|
||||
customerDetails,
|
||||
getMountOptions({
|
||||
router: {
|
||||
navigate: jest.fn(),
|
||||
navigateWithSaving: jest.fn(),
|
||||
navigateWithoutSaving: jest.fn(),
|
||||
},
|
||||
store: {
|
||||
getters: store.getters,
|
||||
},
|
||||
})
|
||||
);
|
||||
const mountOptions = getMountOptions({
|
||||
router: {
|
||||
navigate: jest.fn(),
|
||||
navigateWithSaving: jest.fn(),
|
||||
navigateWithoutSaving: jest.fn(),
|
||||
},
|
||||
store: {
|
||||
getters: store.getters,
|
||||
},
|
||||
});
|
||||
|
||||
const mockMixin = {
|
||||
methods: {
|
||||
getSettingValue: jest.fn((settingName) => {
|
||||
if (!piaDisabledFlag) {
|
||||
if (settingName === experimentSettings.PIA_EXPERIENCE) {
|
||||
return "PIA Optional";
|
||||
}
|
||||
if (settingName === experimentSettings.SUBMIT_ORDER_ENABLE_PIA) {
|
||||
return "true";
|
||||
}
|
||||
}
|
||||
|
||||
return "false";
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
mountOptions.global.mixins = [mockMixin];
|
||||
|
||||
const wrapper = shallowMount(customerDetails, mountOptions);
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,46 +38,13 @@
|
|||
:rainDefenseItem="availableRainDefense"
|
||||
vapsTilesCmsName="VapsProductTiles" />
|
||||
|
||||
<div>
|
||||
<button v-on:click="ccdPayment">
|
||||
<img
|
||||
src="data:image/png;base64,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"
|
||||
alt="We accept Visa" />
|
||||
</button>
|
||||
<button v-on:click="ccdPayment">
|
||||
<img
|
||||
src="data:image/png;base64,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"
|
||||
alt="Mastercard" />
|
||||
</button>
|
||||
<button v-on:click="ccdPayment">
|
||||
<img
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAdCAYAAADoxT9SAAAAAXNSR0IArs4c6QAACTtJREFUWAnVV1lsVNcZ/u69s49nt8f7bmPAxoQlFHBQCC2QVlXaSDRV+lBVClIkIrVqVSlCygNqH9qnqkIVIqryVClto0ppHvrQJCookAAhIYGAw2IbG+/7jGf1LHf6/WfwNoUi98k9xshz7jn3377v+//RIOsH7xioHfVAt3lg6oba26j/5XIabHoOKS2O58oX8NJLeXFVA07pOFERhtPci5zRjULBDegbNQzQPw2aloCW60UMH6NhdgKnTpkaTv4hhKT+BmP6Mb0P8uTGDWLZM+YfhQRM8yx062mMBUYtiBUOwtCO8UGQ0S4f3dh/0E9Nd8PQj6OQuYSqiYiFH9pRMH0b2/FHeFcwuan7yOkm5OHTiSQrK7GxCf6IOJa3NNMB3bRY1Ib2n8Swajp0cl7QZvKxIbrAf3luyK+FgiDPl28KbJeWIHTVZ5PnNeHoqvfpqz5rPCt2CvzRH9qRO+AZsSF/5+SpFKF0aZq6WQyk5KGD8e2sL0fIaadDGpKZLOxWA1ZDRzSVwZ2pCOr9boTL3Mo59S4aEf+XIijGUaATQFzuWwzYeF8+R1KLcNgscBrGcjLy3E9lc3DRjkHvU9m8CszOM5l8HjfG5jCVSJHfRSslLjOxpYsHd9eH8PrhHVjMmqj0OtEY8GA0ksRwJAY/g/t8ZBrdVUEkaLjW54KNTj6IxJHO5OGmg83lXoxHE5hPZlRwTpuBzsoAxmNJNAa9mI6nMDKfgM5oN4V9TEwUDgawRc5EEnxXDA20Wcff/ukobFYdv3n/Gt7/ehjpQk4lt9TttYEwWAvf/vyWRnw2NIP3bg4g7HHi19/Zgz9fu4e/8PfF7mb89Nnt+MetIZw5fx09m2rhtdtwbXgKTUEfmkIezDPjf7p6FwGnTRVoaC6B73Y18Mw0jm5pwJXBSSQXs2hiwJeHJvGvuyOwWDT8/sUD+OuXfXj7ym0c2lyHV5/pwtmPe/FMSzXyTLBA8HFLUL6y8iZaK3yoJWx6J+dwaFMdsrkCPqOTMRre1RDGvdkYvhqdwc3xGbRVheBhEAJnqUqFx0G4OVDGPbthQVu5X2XZSagaJIihGfiC1RSI/Oy57TjR04WBmSgOttcQZlZ8MjCBdC6Pp+l430wMF/onEE9nVtNtxdeSv9ZUxGA1epqrMcbyDs4u0MEC5lJpZv+BInhPUxXusdRnLtxEQ9CjIJhlEInFDJ0sckTxkXsmNbF3cpYV1skvHRVuBzmm8ZwGCwPKkhSfDk2hb3pB8WEqnlSVMU0T3bUVsNQBH/WPE44J5cd/KYYKaaUiLF044EJPW5XC+zc7anGkox7H921RRseI+aDbjm93NiBD8h5g1ppCXsUJt90KK7MeY0ARisFiPodKjws/P/gUfkVYthBuI7xP3cI+JqOScD19/gZOf3QDu1nl57fU47UD2wgdDYNMooucOvZUK4KEpgSgS5aesNZUpDXkRzWV6OjmepQ5rfigdxg76ivwkz0dmEumsZVkdBM2vzi8EzU+N7IMvomVybEMbQxqgfBzWi0Iuuz4XlejMj3KAI5sbUAZA+2uCaK1vMij25NR3surZJy7M4ptfPbDnW2YI+zq/GWEWA4v79qESDqtEpgh7JUkPyaglUCYjTEqz5mLX8FLZZpPpHGpbwyNJGR7VQAODsUXBsYRS2Xhd9lU9l02VoKSKoxWOSMsCuTCFRJYspti5VJUPi8rJhAr6OwHjHqEdoIuJ8XAjn/eHsGn9yforBNbqwNwUvVytDMdW4TbYcBjsyFBNRTJl64t9nJMING7Zq0KBCTeAgam5otgpyMUdESo39epNkurOuBFd10IDpI7tZhHilyQwX86nsYQ7zZV+BEgHyQ0MSaYvz+/oJy2khvscfA67Jhm5hcp33Y63tNaw5MFyncOk9Ek7HYLIcsWXNAxNB+DhdDaUVfOXhTG8HwcN8bnEGf1V6+VQGRXhF1fu6VSvbTHTOxtCeOVvZ1KTRLZ4sskSx67ndzIwmWxKoVLkydKzViJer8HHqcFfewXcd6RqUDEwuOwquTFMxlWzFCwM9m+R8mTBB1tLvcoBRxmz4lSdMIeN8VmHqMLSdqnbQWDYjglXq+O8dF/lxFOlwbH8eGdEYRcDsLQRhikUc3GKNx6t3cA9ynRo1SbjvIAFtKECDP8NEl9jnd8vBOjpHocNmyvC7LJjaLcY0eVt4xZzuADQk16jIdwPEjBuUtVE7n383wneeQm1ERdS9eKapU+ecxngYtkWpyTnrObYvDG0R0Kaiffu6SI/sr+zdjOHvP97kYc7qgjYbNKzUJUsmfZM7bVlFPlNPKlABff0044dpGHIaqiQK/C68LmmhAr5EeO40mAwW+i0Mi9zuqgknJFzVU+rjuQpbsUEWUkS0MZ9gShlN2i00HygN7IOPL25324MTGLl3e2o6PSr3qSdPc7MxFFdi9FQ4gkPUX4UuUpw6v7O1VgV9n937r8NQ6112J/cyX65xbwu3PXSXQT9RxzZAYrkrno0bqhJYYNks/BlOiiTBzu3rp8WwXxy2/txMX741SYec5JZXiNI4Y0SxfhcG86gj2E1wudLRxHgDcv9hKSKQUTg2omjXSWEj/JPZNZEugFKRoyd8UXc/BSFGRq8FHpGH5xCTweomzdgcRIzN11YeLfr2Yq0fYjHR7CwqEa4bHtrWq/gnAQZTn57ieoI2mP7+vEC1sbMTgXRTsHxR/tbmPwFuyqD6tpWCZemYZlPiuQ8LUBN7oIrwiDe0ClqiLcWmhzipXuZaIWiQQ1ej+MaX2BMPqrg9OEwi342BiXsiHfIQYpk3ep9Z2ciqVzaySkZHyQTkwnF3HW5B2q1Bjl1cdsy5Rs8h7RqHqOJPccIcZ41HeSCEXinS/6OW3b2DsII9r+25f96J3gOM/pmUeX7Uss6wyETXMhgbGbCbm7dj0s8fl7oyv7skf4RdkYx3ofFPdlT5z4X9fDd5Zet9AQ2+Q63iyslpc9bj3qWemdR5153PueuC96xaaMfJ5zsqaG1ife2XgH5PtvmiNAll8SjNsENIcjSsf/05IqF/IzdLkfzlSUX5xxAcnc3zkwHSPTQhwxpVYbd7Fl8UemxiQ0448cwa/hfnOyiNbX3/RxLvgGq9IFzXQpUd+4oZCjRhqmdgtluIzfnojQ1cK/AZjByIeFlRG5AAAAAElFTkSuQmCC"
|
||||
alt="American Express" />
|
||||
</button>
|
||||
<button v-on:click="ccdPayment">
|
||||
<img
|
||||
src="data:image/png;base64,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"
|
||||
alt="and Discover" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button v-on:click="paypal">
|
||||
<img
|
||||
src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/PP_logo_h_100x26.png"
|
||||
alt="PayPal" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button v-on:click="afterpay">
|
||||
<img
|
||||
src="https://business.afterpay.com/rs/539-RJA-633/images/AP_logo_badge_6328x2204_blackmint_png.png"
|
||||
width="100"
|
||||
height="26"
|
||||
alt="Afterpay" />
|
||||
</button>
|
||||
</div>
|
||||
<paymentMethodQuestion
|
||||
v-if="!isPiaDisabled"
|
||||
v-model="paymentMethodInternalModel" />
|
||||
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
ref="navbar"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
:isBackButtonHidden="shouldHideBackButton"
|
||||
@back-clicked="backButtonAction"
|
||||
|
|
@ -93,6 +60,7 @@
|
|||
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
||||
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||
import paymentMethodQuestion from "@/layouts/payment-method/payment-method-question/payment-method-question";
|
||||
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||
import cart from "@/fmg-components/cart/cart";
|
||||
import addVapsModalButtons from "@/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons";
|
||||
|
|
@ -104,6 +72,9 @@ import { settleAllPromises } from "@/helpers/layout-helper";
|
|||
import { storeActions } from "@/constants/store-actions";
|
||||
import store from "@/store";
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { paymentMethods } from "@/constants/payment-method-constants";
|
||||
import { experimentSettings } from "@/constants/experiments";
|
||||
|
||||
import { Form } from "vee-validate";
|
||||
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
|
||||
|
||||
|
|
@ -190,6 +161,7 @@ export default {
|
|||
supportingItems: null,
|
||||
pricedGlassParts: null,
|
||||
displayPaypalAlert: this.getPaypalAlert(),
|
||||
paymentMethodInternalModel: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -318,6 +290,38 @@ export default {
|
|||
// console.log("storeLineItems, aka lineItems from store: ", this.$store.getters.lineItems)
|
||||
return this.$store.getters.lineItems;
|
||||
},
|
||||
customCtaCopy() {
|
||||
switch (this.paymentMethod) {
|
||||
case paymentMethods.CREDIT_CARD:
|
||||
return "Continue to checkout";
|
||||
case paymentMethods.PAYPAL:
|
||||
return "Continue to Paypal";
|
||||
case paymentMethods.AFTERPAY:
|
||||
return "Continue to Afterpay";
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
},
|
||||
isPiaDisabled() {
|
||||
const piaExperience =
|
||||
this.getSettingValue(experimentSettings.PIA_EXPERIENCE) === "PIA Optional";
|
||||
const enablePIA =
|
||||
this.getSettingValue(experimentSettings.SUBMIT_ORDER_ENABLE_PIA) === "true";
|
||||
|
||||
return !(piaExperience && enablePIA);
|
||||
},
|
||||
paymentMethod() {
|
||||
if (this.isPiaDisabled) {
|
||||
return paymentMethods.LATER;
|
||||
}
|
||||
|
||||
return this.paymentMethodInternalModel;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
customCtaCopy(newValue) {
|
||||
this.$refs.navbar.updateButtonText(newValue);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
funnelHeader,
|
||||
|
|
@ -328,6 +332,7 @@ export default {
|
|||
cart,
|
||||
alert,
|
||||
addVapsModalButtons,
|
||||
paymentMethodQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -598,7 +598,10 @@ export const getters = {
|
|||
funnelServiceCity: state.order.serviceLocation.city,
|
||||
funnelServiceState: state.order.serviceLocation.state,
|
||||
funnelServiceZipCode: state.order.serviceLocation.zipCode,
|
||||
funnelServiceZipCodeCtu: state.order.serviceLocation.zipCodeCtu,
|
||||
funnelProviderNumber: state.order.serviceLocation.provider.providerNumber,
|
||||
funnelParentAccountNumber: state.order.payment.parentAccountNumber,
|
||||
funnelReferralType: state.order.payment.isInsurance ? "INSURANCE" : "CASH QUOTE",
|
||||
funnelIsCoverageVerified: state.order.payment.insuranceCoverage.isVerified,
|
||||
funnelHasRecalibrationPart: getHasRecalibrationPart(state),
|
||||
funnelSelectedMultiGlass: state.order.damage.glassToReplace?.length > 1,
|
||||
|
|
|
|||
|
|
@ -2934,6 +2934,9 @@ describe("Getters", () => {
|
|||
funnelSupportingItems: null,
|
||||
funnelVaps: null,
|
||||
funnelGlassToReplace: null,
|
||||
funnelProviderNumber: "1",
|
||||
funnelReferralType: "CASH QUOTE",
|
||||
funnelServiceZipCodeCtu: "11111",
|
||||
};
|
||||
|
||||
//Act
|
||||
|
|
@ -2948,12 +2951,17 @@ describe("Getters", () => {
|
|||
city: mockStateValues.funnelServiceCity,
|
||||
state: mockStateValues.funnelServiceState,
|
||||
zipCode: mockStateValues.funnelServiceZipCode,
|
||||
zipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
|
||||
provider: {
|
||||
providerNumber: mockStateValues.funnelProviderNumber,
|
||||
},
|
||||
});
|
||||
mutations.updateParentAcctNumber(storeState, mockStateValues.funnelParentAccountNumber);
|
||||
mutations.updateInsuranceVerifiedStatus(
|
||||
storeState,
|
||||
mockStateValues.funnelIsCoverageVerified
|
||||
);
|
||||
mutations.updateIsInsurance(storeState, false);
|
||||
mutations.updateGlassParts(storeState, mockStateValues.funnelGlassParts);
|
||||
mutations.updateSupportingItems(storeState, mockStateValues.funnelSupportingItems);
|
||||
mutations.updateVaps(storeState, mockStateValues.funnelVaps);
|
||||
|
|
@ -2981,6 +2989,9 @@ describe("Getters", () => {
|
|||
funnelSelectedBackGlass: false,
|
||||
funnelSelectedDriverSideGlass: false,
|
||||
funnelSelectedPassengerSideGlass: false,
|
||||
funnelProviderNumber: mockStateValues.funnelProviderNumber,
|
||||
funnelReferralType: mockStateValues.funnelReferralType,
|
||||
funnelServiceZipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -3003,6 +3014,9 @@ describe("Getters", () => {
|
|||
funnelGlassParts: [],
|
||||
funnelOtherParts: [],
|
||||
funnelGlassToReplace: [],
|
||||
funnelProviderNumber: "1",
|
||||
funnelReferralType: "CASH QUOTE",
|
||||
funnelServiceZipCodeCtu: "11111",
|
||||
};
|
||||
|
||||
//Act
|
||||
|
|
@ -3017,12 +3031,17 @@ describe("Getters", () => {
|
|||
city: mockStateValues.funnelServiceCity,
|
||||
state: mockStateValues.funnelServiceState,
|
||||
zipCode: mockStateValues.funnelServiceZipCode,
|
||||
zipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
|
||||
provider: {
|
||||
providerNumber: mockStateValues.funnelProviderNumber,
|
||||
},
|
||||
});
|
||||
mutations.updateParentAcctNumber(storeState, mockStateValues.funnelParentAccountNumber);
|
||||
mutations.updateInsuranceVerifiedStatus(
|
||||
storeState,
|
||||
mockStateValues.funnelIsCoverageVerified
|
||||
);
|
||||
mutations.updateIsInsurance(storeState, false);
|
||||
mutations.updateGlassParts(storeState, mockStateValues.funnelGlassParts);
|
||||
mutations.updateSupportingItems(storeState, mockStateValues.funnelSupportingItems);
|
||||
mutations.updateVaps(storeState, mockStateValues.funnelVaps);
|
||||
|
|
@ -3050,6 +3069,9 @@ describe("Getters", () => {
|
|||
funnelSelectedBackGlass: false,
|
||||
funnelSelectedDriverSideGlass: false,
|
||||
funnelSelectedPassengerSideGlass: false,
|
||||
funnelProviderNumber: mockStateValues.funnelProviderNumber,
|
||||
funnelReferralType: mockStateValues.funnelReferralType,
|
||||
funnelServiceZipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -3085,6 +3107,9 @@ describe("Getters", () => {
|
|||
glassName: "Single",
|
||||
},
|
||||
],
|
||||
funnelProviderNumber: "1",
|
||||
funnelReferralType: "CASH QUOTE",
|
||||
funnelServiceZipCodeCtu: "11111",
|
||||
};
|
||||
|
||||
//Act
|
||||
|
|
@ -3099,9 +3124,14 @@ describe("Getters", () => {
|
|||
city: mockStateValues.serviceCity,
|
||||
state: mockStateValues.serviceState,
|
||||
zipCode: mockStateValues.serviceZipCode,
|
||||
zipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
|
||||
provider: {
|
||||
providerNumber: mockStateValues.funnelProviderNumber,
|
||||
},
|
||||
});
|
||||
mutations.updateParentAcctNumber(storeState, mockStateValues.parentAccountNumber);
|
||||
mutations.updateInsuranceVerifiedStatus(storeState, mockStateValues.isCoverageVerified);
|
||||
mutations.updateIsInsurance(storeState, false);
|
||||
mutations.updateGlassParts(storeState, mockStateValues.glassParts);
|
||||
mutations.updateSupportingItems(storeState, mockStateValues.funnelSupportingItems);
|
||||
mutations.updateVaps(storeState, mockStateValues.funnelVaps);
|
||||
|
|
@ -3129,6 +3159,9 @@ describe("Getters", () => {
|
|||
funnelSelectedBackGlass: false,
|
||||
funnelSelectedDriverSideGlass: false,
|
||||
funnelSelectedPassengerSideGlass: false,
|
||||
funnelProviderNumber: mockStateValues.funnelProviderNumber,
|
||||
funnelReferralType: mockStateValues.funnelReferralType,
|
||||
funnelServiceZipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -3190,6 +3223,9 @@ describe("Getters", () => {
|
|||
glassName: "Quarter",
|
||||
},
|
||||
],
|
||||
funnelProviderNumber: "1",
|
||||
funnelReferralType: "CASH QUOTE",
|
||||
funnelServiceZipCodeCtu: "11111",
|
||||
};
|
||||
|
||||
//Act
|
||||
|
|
@ -3204,9 +3240,14 @@ describe("Getters", () => {
|
|||
city: mockStateValues.serviceCity,
|
||||
state: mockStateValues.serviceState,
|
||||
zipCode: mockStateValues.serviceZipCode,
|
||||
zipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
|
||||
provider: {
|
||||
providerNumber: mockStateValues.funnelProviderNumber,
|
||||
},
|
||||
});
|
||||
mutations.updateParentAcctNumber(storeState, mockStateValues.parentAccountNumber);
|
||||
mutations.updateInsuranceVerifiedStatus(storeState, mockStateValues.isCoverageVerified);
|
||||
mutations.updateIsInsurance(storeState, false);
|
||||
mutations.updateGlassParts(storeState, mockStateValues.glassParts);
|
||||
mutations.updateSupportingItems(storeState, mockStateValues.funnelSupportingItems);
|
||||
mutations.updateVaps(storeState, mockStateValues.funnelVaps);
|
||||
|
|
@ -3234,6 +3275,9 @@ describe("Getters", () => {
|
|||
funnelSelectedBackGlass: true,
|
||||
funnelSelectedDriverSideGlass: true,
|
||||
funnelSelectedPassengerSideGlass: true,
|
||||
funnelProviderNumber: mockStateValues.funnelProviderNumber,
|
||||
funnelReferralType: mockStateValues.funnelReferralType,
|
||||
funnelServiceZipCodeCtu: mockStateValues.funnelServiceZipCodeCtu,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue