From 81fd0eec8dd4d3f668cd2a42b9f73d12523344f4 Mon Sep 17 00:00:00 2001 From: hiteshkumar87 Date: Wed, 23 Apr 2025 12:04:29 +0530 Subject: [PATCH 1/2] CASH-205 afterpay breakout --- src/assets/img/icons/calendar-icon-black.svg | 6 + src/assets/img/icons/calendar-icon-grey.svg | 6 + src/assets/img/icons/info-circle.svg | 4 + src/assets/img/icons/payment-icon-green.svg | 6 + src/assets/img/icons/payment-icon-grey.svg | 6 + .../afterpay-breakout/afterpay-breakout.vue | 259 ++++++++++++++++++ src/layouts/payment-method/payment-method.vue | 22 ++ 7 files changed, 309 insertions(+) create mode 100644 src/assets/img/icons/calendar-icon-black.svg create mode 100644 src/assets/img/icons/calendar-icon-grey.svg create mode 100644 src/assets/img/icons/info-circle.svg create mode 100644 src/assets/img/icons/payment-icon-green.svg create mode 100644 src/assets/img/icons/payment-icon-grey.svg create mode 100644 src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue diff --git a/src/assets/img/icons/calendar-icon-black.svg b/src/assets/img/icons/calendar-icon-black.svg new file mode 100644 index 000000000..9c66862ac --- /dev/null +++ b/src/assets/img/icons/calendar-icon-black.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/img/icons/calendar-icon-grey.svg b/src/assets/img/icons/calendar-icon-grey.svg new file mode 100644 index 000000000..5a67d0eae --- /dev/null +++ b/src/assets/img/icons/calendar-icon-grey.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/img/icons/info-circle.svg b/src/assets/img/icons/info-circle.svg new file mode 100644 index 000000000..7f176afd2 --- /dev/null +++ b/src/assets/img/icons/info-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/img/icons/payment-icon-green.svg b/src/assets/img/icons/payment-icon-green.svg new file mode 100644 index 000000000..931226bee --- /dev/null +++ b/src/assets/img/icons/payment-icon-green.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/img/icons/payment-icon-grey.svg b/src/assets/img/icons/payment-icon-grey.svg new file mode 100644 index 000000000..bef98d2de --- /dev/null +++ b/src/assets/img/icons/payment-icon-grey.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue b/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue new file mode 100644 index 000000000..06a717289 --- /dev/null +++ b/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue @@ -0,0 +1,259 @@ + + + diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 33e070a93..242e2915a 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -39,6 +39,10 @@ :isExpandedOnLoad="false" :isMSRFeeApplicable="isMSRFeeApplicable" /> +
@@ -118,6 +122,7 @@ import alert from "@/ux-components/alert/alert"; import textBlock from "@/digital-components/text-block/text-block"; import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question"; import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal"; +import afterpayBreakout from "@/layouts/payment-method/afterpay-breakout/afterpay-breakout"; // Supporting Items import baseMixin from "@/mixins/base-mixin.js"; @@ -805,6 +810,22 @@ export default { lineItemsCloneForWatcher() { return Object.assign({}, this.lineItems); }, + isRecalPriceRemove() { + return ( + experimentMixin.methods + .getSettingValue(experimentSettings.RECAL_PRICE_REMOVE) + ?.toLowerCase() === "true" + ); + }, + isAfterpayBreakoutDisplay() { + return ( + (!this.isRecalPriceRemove || !this.isRecalibrationOnOrder) && + experimentMixin.methods.hasSettingEqualTo( + experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY, + "true" + ) + ); + }, }, watch: { customCtaCopy(newValue) { @@ -856,6 +877,7 @@ export default { textBlock, checkboxQuestion, contentGroupModal, + afterpayBreakout, }, }; From 8452917fc46dc98a97a05d905ae94afa736370af Mon Sep 17 00:00:00 2001 From: hiteshkumar87 Date: Wed, 23 Apr 2025 13:00:05 +0530 Subject: [PATCH 2/2] CASH-205 unit test case --- src/layouts/payment-method/payment-method.spec.js | 6 ++++++ src/layouts/payment-method/payment-method.vue | 11 +++-------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/layouts/payment-method/payment-method.spec.js b/src/layouts/payment-method/payment-method.spec.js index 013916af0..3e31f88c5 100644 --- a/src/layouts/payment-method/payment-method.spec.js +++ b/src/layouts/payment-method/payment-method.spec.js @@ -117,6 +117,12 @@ function setupMocks() { return "false"; }), + hasSettingEqualTo: jest.fn((settingName) => { + if (settingName === experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY) { + return true; + } + return false; + }), getCmsContent: jest.fn().mockImplementation(() => { return "test text"; }), diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 242e2915a..d5c7d93c3 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -136,7 +136,6 @@ import { } from "@/helpers/cms-content-helper"; import { paymentMethods } from "@/constants/payment-method-constants"; import { experimentSettings } from "@/constants/experiments"; -import experimentMixin from "@/mixins/experiment-mixin.js"; import { revalidatePromosAndValidateQueryStringPromo, buildToastMessagesFromRevalidateOrValidatePromoResponse, @@ -812,18 +811,14 @@ export default { }, isRecalPriceRemove() { return ( - experimentMixin.methods - .getSettingValue(experimentSettings.RECAL_PRICE_REMOVE) - ?.toLowerCase() === "true" + this.getSettingValue(experimentSettings.RECAL_PRICE_REMOVE)?.toLowerCase() === + "true" ); }, isAfterpayBreakoutDisplay() { return ( (!this.isRecalPriceRemove || !this.isRecalibrationOnOrder) && - experimentMixin.methods.hasSettingEqualTo( - experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY, - "true" - ) + this.hasSettingEqualTo(experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY, "true") ); }, },