jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1486 from Safelite/feature/CSR-1391.1

Browse source 
Feature/csr 1391.1
This commit is contained in:
Matt Caimi 2023-11-02 14:26:57 -04:00 committed by GitHub
commit 0e003cc284
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 179 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue Normal file
View file

@ -0,0 +1,73 @@
<template>
<button
type="button"
class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
@click="handleClick">
<!-- <span class="m-0">{{ buttonLabelText }}</span> -->
<span v-for="token in tokens" :key="token">
<span v-if="isInlineImageToken(token)">
<img
v-if="hasImage"
class="ms-2"
:src="buttonImage"
:alt="getInlineAltText(token)" />
<span v-else> {{ getInlineAltText(token) }}</span>
</span>
<span v-else>
{{ token }}
</span>
</span>
</button>
</template>
<script>
import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
const INLINE_IMAGE_TOKEN = "custom:inlineImage";
export default {
name: "payment-switch-button",
props: {
buttonText: String,
buttonImage: String,
buttonImageId: String,
},
methods: {
handleClick(clickValue) {
this.pushEventToGA(
this.$route.query[this.queryStrings.FMG_PAGE],
this.GaActions.CLICKED,
this.buttonText,
true
);
this.$emit("click-event", clickValue);
},
isInlineImageToken(token) {
return token.includes(INLINE_IMAGE_TOKEN);
},
getInlineAltText(token) {
let innerTokens = token.split(",");
return innerTokens[1] ?? "";
},
},
computed: {
tokens() {
return splitCopyOnCMSPlaceHolder(this.buttonText ?? "");
},
hasImage() {
return !!this.buttonImage;
},
buttonLabelText() {
return this.tokens[0];
},
},
};
</script>
<style lang="scss" scoped>
.btn {
border: 1px solid $gray-600;
border-radius: 8px;
}
</style>

99
src/layouts/payment/payment-switch/payment-switch.vue Normal file
View file

@ -0,0 +1,99 @@
<template>
<div class="switch-payment-header pb-3">{{ switchPaymentHeaderText }}</div>
<div class="switch-payment-button">
<paymentSwitchButton
v-if="paymentType !== paymentTypes.cc"
:buttonText="paymentMethodsInfo[paymentTypes.cc]?.buttonText"
:buttonImage="paymentMethodsInfo[paymentTypes.cc]?.answerImageUrl"
:buttonImageId="paymentMethodsInfo[paymentTypes.cc]?.imageId"
@click-event="switchPaymentClick(paymentTypes.cc)" />
</div>
<div class="switch-button-separator py-3" v-if="paymentType !== paymentTypes.cc">or</div>
<div class="switch-payment-button">
<paymentSwitchButton
v-if="paymentType !== paymentTypes.pp"
:buttonText="paymentMethodsInfo[paymentTypes.pp]?.buttonText"
:buttonImage="paymentMethodsInfo[paymentTypes.pp]?.answerImageUrl"
:buttonImageId="paymentMethodsInfo[paymentTypes.pp]?.imageId"
@click-event="switchPaymentClick(paymentTypes.pp)" />
</div>
<div class="switch-button-separator py-3" v-if="paymentType === paymentTypes.cc">or</div>
<div class="switch-payment-button">
<paymentSwitchButton
v-if="paymentType !== paymentTypes.ap"
:buttonText="paymentMethodsInfo[paymentTypes.ap]?.buttonText"
:buttonImage="paymentMethodsInfo[paymentTypes.ap]?.answerImageUrl"
:buttonImageId="paymentMethodsInfo[paymentTypes.ap]?.imageId"
@click-event="switchPaymentClick(paymentTypes.ap)" />
</div>
</template>
<script>
import paymentSwitchButton from "./payment-switch-button/payment-switch-button";
export default {
name: "paymentSwitch",
data() {
return {
paymentTypes: {
cc: "cc",
pp: "pp",
ap: "ap",
},
};
},
props: {
cmsWidgetName: String,
paymentType: String,
},
computed: {
switchPaymentHeaderText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
paymentMethodAnswerData() {
const rawData = this.getCmsContent(this.cmsWidgetName, "Answers");
if (!rawData) {
return [];
} else {
return rawData;
}
},
paymentMethodsInfo() {
return this.paymentMethodAnswerData.reduce((accumulator, paymentMethod) => {
accumulator[paymentMethod.Name] = {
buttonText: paymentMethod.Text,
answerImageUrl: paymentMethod.AnswerImageUrl,
imageId: paymentMethod.ImageId,
};
return accumulator;
}, {});
},
},
methods: {
switchPaymentClick(paymentType) {
this.$emit("switch-payment-event", paymentType);
},
},
components: {
paymentSwitchButton,
},
};
</script>
<style lang="scss">
.switch-payment-header {
font-weight: 500;
color: $black;
}
.switch-button-separator {
text-align: center;
color: $black;
}
.switch-payment-button button {
width: 100%;
color: $black;
}
</style>

40
src/layouts/payment/payment.vue
View file

@ -21,39 +21,10 @@
scrolling="no">
</iframe>
</div>
<div>{{ switchPaymentText }}</div>
<div>
<button
v-if="paymentType !== 'cc'"
ref="switchToCCButton"
type="button"
@mousedown="switchPIAMethod('cc')"
aria-label="Switch to Credit Card">
Switch to Credit Card
</button>
</div>
<div v-if="paymentType !== 'cc'">or</div>
<div>
<button
v-if="paymentType !== 'pp'"
ref="switchToPPButton"
type="button"
@mousedown="switchPIAMethod('pp')"
aria-label="Switch to PayPal">
Switch to PayPal
</button>
</div>
<div v-if="paymentType === 'cc'">or</div>
<div>
<button
v-if="paymentType !== 'ap'"
ref="switchToAPButton"
type="button"
@mousedown="switchPIAMethod('ap')"
aria-label="Switch to Afterpay">
Switch to Afterpay
</button>
</div>
<paymentSwitch
cmsWidgetName="PaymentMethodWidget"
:paymentType="paymentType"
@switch-payment-event="switchPIAMethod" />
<navbar
cmsWidgetName="FunnelFooterWidget"
isForwardActionDisabled="true"
@ -193,6 +164,8 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import paymentSwitch from "./payment-switch/payment-switch.vue";
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import { externalUrls } from "@/router/router-constants/externalUrl-values";
@ -493,6 +466,7 @@ export default {
funnelHeader,
navbar,
loadingModal,
paymentSwitch,
},
};
</script>