From 9d3ce7a90f229ff49c03111b94f3d77d64ebbe73 Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Wed, 25 Feb 2026 17:24:05 -0500 Subject: [PATCH 1/5] INSR-7760: More HOP updates, afterpay button handling --- public/css/hop-styling.css | 16 +- public/css/site-2020Styling.css | 6 +- public/scss/hop-styling.scss | 20 ++- public/scss/site-2020Styling.scss | 6 +- src/layouts/payment-page/payment-page.vue | 149 ++++++++++++++++-- src/ux-components/alert/alert.vue | 4 +- src/ux-components/button-main/button-main.vue | 8 +- src/ux-components/text-link/text-link.vue | 8 +- 8 files changed, 182 insertions(+), 35 deletions(-) diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css index 66d1b1aa..f6d8b552 100644 --- a/public/css/hop-styling.css +++ b/public/css/hop-styling.css @@ -32,6 +32,7 @@ body span { body a { color: #0070D1; text-decoration: none; + font-weight: 500; } body a:hover { text-decoration: underline; @@ -175,13 +176,18 @@ body .has-error select { border-color: #db0020; } body .has-error select { - background: url(/icons/select-error.png) no-repeat 98% #ffffff; - background-size: 10px 17px; - appearance: none; + background-image: url(/icons/select-error.png); } body .has-error small { - margin-top: 4px; - color: #d4281c; + margin-bottom: 0.3125rem; + color: #db0020; +} +body .has-success input, +body .has-success select { + border-color: #0c7e47; +} +body .has-success select { + background-image: url(/icons/select-error.png); } body .cc-error-container #alert-message { background-color: #fcbfbb; diff --git a/public/css/site-2020Styling.css b/public/css/site-2020Styling.css index ae2f004f..7327505d 100644 --- a/public/css/site-2020Styling.css +++ b/public/css/site-2020Styling.css @@ -88,7 +88,7 @@ } .buy-backdrop { - background-color: rgba(0, 0, 0, 0.3) !important; + background-color: rgba(0, 0, 0, 0.8) !important; } .buy-backdrop #afterpay__iframe-checkout-container { width: 100%; @@ -97,10 +97,6 @@ display: none; } -.buy-container-closer { - display: none; -} - @keyframes rotate { 0% { transform: rotate(0); diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss index 6e2c274a..2bc6a195 100644 --- a/public/scss/hop-styling.scss +++ b/public/scss/hop-styling.scss @@ -36,6 +36,7 @@ body { a { color: #0070D1; text-decoration: none; + font-weight: 500; &:hover { text-decoration: underline; color: #167cac; @@ -200,13 +201,22 @@ body { border-color: #db0020; } select { - background: url(/icons/select-error.png) no-repeat 98% #ffffff;; - background-size: 10px 17px; - appearance: none; + background-image: url(/icons/select-error.png); } small { - margin-top: 4px; - color: #d4281c; + margin-bottom: .3125rem; + color: #db0020; + } + } + + + .has-success { + input, + select { + border-color: #0c7e47; + } + select { + background-image: url(/icons/select-error.png); } } diff --git a/public/scss/site-2020Styling.scss b/public/scss/site-2020Styling.scss index 14cd2c28..6ddde5dc 100644 --- a/public/scss/site-2020Styling.scss +++ b/public/scss/site-2020Styling.scss @@ -93,7 +93,7 @@ // AfterPay Styles .buy-backdrop { - background-color: rgba(0,0,0,.3)!important; + background-color: rgba(0,0,0,.8)!important; #afterpay__iframe-checkout-container { width: 100%; .style_closeWrapper__lIHJe { @@ -102,10 +102,6 @@ } } -.buy-container-closer { - display: none; -} - // Modal Spinner @keyframes rotate { diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue index 4fc81d7b..04b7bb9a 100644 --- a/src/layouts/payment-page/payment-page.vue +++ b/src/layouts/payment-page/payment-page.vue @@ -10,18 +10,22 @@
-
+
+
{{ cartTitle }}
+
+ +
+
+
{{ switchPaymentText }}
+ +
@@ -409,6 +439,9 @@ import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue'; import { formatAmountInDollars } from '@/helpers/text-helper'; import showIssLoadingModal from '@/helpers/loading-modal-helper'; import { supportsApplePay } from '@/helpers/browser-helper'; +import buttonMain from '@/ux-components/button-main/button-main.vue'; +import { submitWorkOrder } from '@/helpers/order-helper'; +import submitType from '@/constants/submit-type'; export default { name: 'payment-page', @@ -417,7 +450,8 @@ export default { siteHeader, siteFooter, Form, - alert + alert, + buttonMain }, directives: { resize: { @@ -434,7 +468,8 @@ export default { mixins: [BaseFormMixin], async beforeRouteEnter(to, from, next) { const paymentType = useMainStore().order.payment.paymentMethod; - if (paymentType === paymentMethods.PAYPAL) { + const alertToDisplay = to.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]; + if (paymentType === paymentMethods.PAYPAL || alertToDisplay) { useMainStore().savePaymentMethodChoice(paymentMethods.CREDIT_CARD); } @@ -499,7 +534,8 @@ export default { totalAmount: this.getAmountDue(), displayAmount: this.getDisplayAmountDue(), payInAdvanceLineItems: '', - shouldBlockInteraction: false + shouldBlockInteraction: false, + afterpayModalOpen: false }; }, computed: { @@ -537,6 +573,21 @@ export default { } return ''; }, + cartTitle() { + return this.getCmsContent('OrderSummaryTextWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT); + }, + switchPaymentText() { + return this.getCmsContent('SwitchPaymentTextWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT); + }, + submitPaymentText() { + return this.getCmsContent('SiteFooterWidget', widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT); + }, + afterpayButtonText() { + return this.getCmsContent('AfterpayButtonWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT); + }, + afterpayLogo() { + return this.getCmsContent('AfterpayButtonWidget', widgetFields.CONTENT_GROUP_WIDGET.IMAGE); + }, isPaypal() { return this.paymentType === paymentMethods.PAYPAL; }, @@ -720,6 +771,7 @@ export default { } if (this.isAfterPay) { + this.afterpayModalOpen = true; iframe.contentWindow.postMessage('afterpay', '*'); } else { iframe.contentWindow.postMessage('CreditCardChosen', '*'); @@ -730,12 +782,19 @@ export default { }); }, handleIFrameContentWindowMessage(event) { + console.log('Received message from iframe:', event.data); + const iframe = this.$refs.paymentFrame; if (typeof event.data !== 'string') { return; } if (event.data.includes('afterpayClosed')) { - this.backButtonAction(); + if (this.isAfterPay) { + this.backButtonAction(); + } else { + iframe.contentWindow.postMessage('CreditCardChosen', '*'); + this.afterpayModalOpen = false; + } } if (useMainStore().order.payment.paymentMethod !== paymentMethods.PayNow) { @@ -776,7 +835,10 @@ export default { this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT] === payMethod ); }, - paymentFailedPayLater() { + async paymentFailedPayLater() { + this.showIssLoadingModal(true); + this.mainStore.savePaymentMethodChoice(paymentMethods.PAY_AT_TIME_OF_SERVICE); + await submitWorkOrder({ submitType: submitType.SAFELITE }); this.$router.navigate( this.navigationScenarios.CLICKED_FORWARD, this.$route @@ -792,6 +854,15 @@ export default { this.$route ); }, + submitPaymentAction() { + const iframe = this.$refs.paymentFrame; + iframe.contentWindow.postMessage('submitPayment', '*'); + }, + switchToAfterPay() { + const iframe = this.$refs.paymentFrame; + this.afterpayModalOpen = true; + iframe.contentWindow.postMessage('afterpay-switch', '*'); + }, showIssLoadingModal } }; @@ -808,8 +879,66 @@ export default { } } + .order-summary-panel { + margin-bottom: 1.375rem; + } + + .cart-title { + font-size: 1rem; + font-weight: 500; + margin-top: 1.25rem; + margin-bottom: .625rem; + } + + .cart-dropdown-component:deep(*) { + font-size: .8125rem; + } + + .submit-payment-button { + width: 100%; + font-weight: $font-weight-normal; + } + + .switch-payment-container { + padding-top: 1.25rem + } + + .switch-payment-text { + padding-top: 1rem; + padding-bottom: .625rem; + border-top: 1px solid #f0f1f2 + } + .footer-component:deep(.footer) { - margin: 0; + margin: 1.25rem 0 0 0; + } + + .afterpay-button { + width: 100%; + height: 2.875rem; + border: solid 1px #cacbcc; + border-radius: 1.375rem; + background-color: white; + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2); + color: $darker-gray; + font-weight: 400; + margin-bottom: 1.25rem; + padding: .5rem 1rem; + + &:focus { + background: $background-color-selected; + } + &:active { + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); + } + } + + .pay-in-advance-alert { + width: 80%; + + @media (max-width: 35rem) { + width: 100%; + } } } diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue index 0e0ea2be..6b5ec5c5 100644 --- a/src/ux-components/alert/alert.vue +++ b/src/ux-components/alert/alert.vue @@ -106,6 +106,7 @@ :text="getRouterLinkDisplayTextFromCopy(copy)" href="#!" :data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)" + :preventDefaultOnClick="preventDefaultOnClick" @clickEvent="$emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))" /> Date: Thu, 26 Feb 2026 14:49:44 -0500 Subject: [PATCH 2/5] INSR-7760: Some more payment-page and HOP updates --- src/helpers/browser-helper.js | 16 +++++++++++++++- src/layouts/payment-page/payment-page.vue | 6 ++++-- vue.config.js | 2 +- 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/helpers/browser-helper.js b/src/helpers/browser-helper.js index 64c3a390..eb1d77fb 100644 --- a/src/helpers/browser-helper.js +++ b/src/helpers/browser-helper.js @@ -1,3 +1,17 @@ export function supportsApplePay() { - return !!(window.ApplePaySession && window.ApplePaySession.canMakePayments()); + var iOSversion = getiOSversion(); + var isMacOS = navigator.platform.indexOf("Mac") !== -1; + if (isMacOS || (iOSversion && iOSversion[0] >= 17)) { + if (window.ApplePaySession && window.ApplePaySession.canMakePayments()) { + return true; + } + } + return false; +} +function getiOSversion() { + if (/iP(hone|od|ad)/.test(navigator.platform)) { + // supports iOS 2.0 and later: + var v = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/); + return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)]; + } } \ No newline at end of file diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue index 04b7bb9a..e1f7daa0 100644 --- a/src/layouts/payment-page/payment-page.vue +++ b/src/layouts/payment-page/payment-page.vue @@ -890,7 +890,7 @@ export default { margin-bottom: .625rem; } - .cart-dropdown-component:deep(*) { + .cart-dropdown-component.cart-table { font-size: .8125rem; } @@ -900,7 +900,9 @@ export default { } .switch-payment-container { - padding-top: 1.25rem + @include media-breakpoint-up(lg) { + padding-top: 1.25rem + } } .switch-payment-text { diff --git a/vue.config.js b/vue.config.js index 3e5f6ffa..8d1b6687 100644 --- a/vue.config.js +++ b/vue.config.js @@ -2,7 +2,7 @@ process.env.VUE_APP_CONSUMER_CF_DISTRO = 'https://digitalapi.dev.safelite.io'; process.env.VUE_APP_CURRENT_ENVIRONMENT = 'Localhost'; process.env.VUE_APP_CUSTOMER_PORTAL_URL = 'https://myaccountdev.safelite.com/'; process.env.VUE_APP_GOOGLE_PLACES_API_KEY = 'AIzaSyCuLhQcDdZTTb4JzpUFms1OCch2dk5lHF0'; -process.env.VUE_APP_SAFELITE_HOP = 'https://iss-hop-dev.glassclaim.com/fmgCheckoutShared.aspx'; +process.env.VUE_APP_SAFELITE_HOP = 'https://iss-hop-sys.glassclaim.com/fmgCheckoutShared.aspx'; // GA & GTM // NOTE: Using the old ISS site GTM Cotnainer ID for now, will create a new one soon. From 98a227afced9eb4aa6e0b21be164f08fbd7fee80 Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Thu, 26 Feb 2026 15:08:57 -0500 Subject: [PATCH 3/5] INSR-7760: Address copilot comments - Add some missing semicolons - Better null checking for iframe - Better iOS check - Correct icon for successful dropdown input --- public/scss/hop-styling.scss | 2 +- src/helpers/browser-helper.js | 4 ++++ src/layouts/payment-page/payment-page.vue | 15 +++++++++------ 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss index 2bc6a195..ace72aa6 100644 --- a/public/scss/hop-styling.scss +++ b/public/scss/hop-styling.scss @@ -216,7 +216,7 @@ body { border-color: #0c7e47; } select { - background-image: url(/icons/select-error.png); + background-image: url(/icons/select-success.png); } } diff --git a/src/helpers/browser-helper.js b/src/helpers/browser-helper.js index eb1d77fb..5ce440e6 100644 --- a/src/helpers/browser-helper.js +++ b/src/helpers/browser-helper.js @@ -12,6 +12,10 @@ function getiOSversion() { if (/iP(hone|od|ad)/.test(navigator.platform)) { // supports iOS 2.0 and later: var v = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/); + if (!v) { + return null; + } return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)]; } + return null; } \ No newline at end of file diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue index e1f7daa0..d4bf082f 100644 --- a/src/layouts/payment-page/payment-page.vue +++ b/src/layouts/payment-page/payment-page.vue @@ -782,7 +782,6 @@ export default { }); }, handleIFrameContentWindowMessage(event) { - console.log('Received message from iframe:', event.data); const iframe = this.$refs.paymentFrame; if (typeof event.data !== 'string') { return; @@ -856,12 +855,16 @@ export default { }, submitPaymentAction() { const iframe = this.$refs.paymentFrame; - iframe.contentWindow.postMessage('submitPayment', '*'); + if (iframe && iframe.contentWindow) { + iframe.contentWindow.postMessage('submitPayment', '*'); + } }, switchToAfterPay() { const iframe = this.$refs.paymentFrame; - this.afterpayModalOpen = true; - iframe.contentWindow.postMessage('afterpay-switch', '*'); + if (iframe && iframe.contentWindow) { + this.afterpayModalOpen = true; + iframe.contentWindow.postMessage('afterpay-switch', '*'); + } }, showIssLoadingModal } @@ -901,14 +904,14 @@ export default { .switch-payment-container { @include media-breakpoint-up(lg) { - padding-top: 1.25rem + padding-top: 1.25rem; } } .switch-payment-text { padding-top: 1rem; padding-bottom: .625rem; - border-top: 1px solid #f0f1f2 + border-top: 1px solid #f0f1f2; } .footer-component:deep(.footer) { From 15130a3151293c2aedef7ee2f52df99c5eca3b4e Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Thu, 26 Feb 2026 15:22:08 -0500 Subject: [PATCH 4/5] Remove loopback-network permission --- src/layouts/payment-page/payment-page.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue index d4bf082f..4d307e34 100644 --- a/src/layouts/payment-page/payment-page.vue +++ b/src/layouts/payment-page/payment-page.vue @@ -35,7 +35,7 @@ name="card-frame" seamless scrolling="no" - allow="payment *; microphone *; geolocation *; loopback-network *;"> + allow="payment *; microphone *; geolocation *;">
From fd502a3b460d1219312ecfd737d6f85f663ef534 Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Fri, 27 Feb 2026 15:59:48 -0500 Subject: [PATCH 5/5] Revert change to hop config --- vue.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vue.config.js b/vue.config.js index 8d1b6687..3e5f6ffa 100644 --- a/vue.config.js +++ b/vue.config.js @@ -2,7 +2,7 @@ process.env.VUE_APP_CONSUMER_CF_DISTRO = 'https://digitalapi.dev.safelite.io'; process.env.VUE_APP_CURRENT_ENVIRONMENT = 'Localhost'; process.env.VUE_APP_CUSTOMER_PORTAL_URL = 'https://myaccountdev.safelite.com/'; process.env.VUE_APP_GOOGLE_PLACES_API_KEY = 'AIzaSyCuLhQcDdZTTb4JzpUFms1OCch2dk5lHF0'; -process.env.VUE_APP_SAFELITE_HOP = 'https://iss-hop-sys.glassclaim.com/fmgCheckoutShared.aspx'; +process.env.VUE_APP_SAFELITE_HOP = 'https://iss-hop-dev.glassclaim.com/fmgCheckoutShared.aspx'; // GA & GTM // NOTE: Using the old ISS site GTM Cotnainer ID for now, will create a new one soon.