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

CSR-1391 switch payment functionality

Browse source
This commit is contained in:
Matt Caimi 2023-11-01 13:09:46 -04:00
parent 28288df804
commit c9610e2aa2
3 changed files with 159 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,74 @@
<template>
<baseInputButton v-bind="$props" @update:modelValue="handleClick">
<div class="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-switch-button",
mixins: [inputButtonWrapperMixin],
methods: {
isInlineImageToken,
getInlineAltText,
handleClick(newValue) {
this.$emit("click-event", newValue);
},
},
computed: {
tokens() {
return splitCopyOnCMSPlaceHolder(this.buttonLabel ?? "");
},
hasImage() {
return !!this.buttonImage;
},
shouldDisplaySideImage() {
return this.hasImage && this.tokens.every((token) => !isInlineImageToken(token));
},
},
components: {
baseInputButton,
},
};
</script>
<style lang="scss" scoped></style>

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

@ -0,0 +1,78 @@
<template>
<div class="switch-payment-header pb-3">{{ switchPaymentHeaderText }}</div>
<div class="switch-payment-button">
<paymentSwitchButton
v-if="paymentType !== 'cc'"
buttonLabel="Credit or Debit"
imageSrc="https://digitalconsumercms.dev.safelite.io/images/default-source/default-album/icons/credit-card-group.svg?sfvrsn=553dfb5b_0"
@click-event="switchPaymentClick('cc')" />
</div>
<div class="switch-button-separator py-3" v-if="paymentType !== 'cc'">or</div>
<div class="switch-payment-button">
<paymentSwitchButton
v-if="paymentType !== 'pp'"
buttonLabel="PayPal"
@click-event="switchPaymentClick('pp')" />
</div>
<div class="switch-button-separator py-3" v-if="paymentType === 'cc'">or</div>
<div class="switch-payment-button">
<paymentSwitchButton
v-if="paymentType !== 'ap'"
buttonLabel="Afterpay"
@click-event="switchPaymentClick('ap')" />
</div>
</template>
<script>
import paymentSwitchButton from "./payment-switch-button/payment-switch-button";
export default {
name: "paymentSwitch",
data() {
return {};
},
props: {
cmsWidgetName: String,
paymentType: String,
},
computed: {
switchPaymentHeaderText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
ccButtonText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
ppButtonText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
apButtonText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
},
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>