99 lines
3.1 KiB
Vue
99 lines
3.1 KiB
Vue
<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>
|