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

CASH-1403: Payment parity changes

Browse source
This commit is contained in:
Chris Redelinghuys 2025-08-26 14:58:51 -04:00
parent 55fc7589c2
commit df9ee7d958
3 changed files with 100 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
public/css/hop-styling.css
View file

@ -18,7 +18,7 @@ body .validation-info {
display: none;
}
body .italicSmall {
font-style: normal;
font-style: italic;
font-size: 14px;
}
body span {
@ -153,13 +153,13 @@ body .buttonContainer button {
}
}
body .buttonContainer button:focus {
box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
}
body .buttonContainer button:focus, body .buttonContainer button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
color: #fff;
background: linear-gradient(270deg, rgb(6, 87, 124) 0%, rgb(6, 87, 124) 100%);
background: #db0020;
}
body .buttonContainer button:disabled {
background: #e3e4e4 !important;
@ -274,7 +274,7 @@ body .cc-error-container #alert-message {
#fmg-checkout-shared #other-payments-container label span.paymentOptionText {
margin: auto 0;
padding-left: 0;
font-weight: 400;
font-weight: 600;
}
#fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type {
width: 100%;
@ -297,7 +297,7 @@ body .cc-error-container #alert-message {
text-align: right;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages > img {
width: 20%;
width: 12%;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific {
padding: 0 2%;
@ -309,11 +309,13 @@ body .cc-error-container #alert-message {
margin-top: 24px;
margin-bottom: 24px;
font-size: 14px;
font-weight: 600;
color: #525656;
}
#fmg-checkout-shared #other-payments-container .disclaimerContainerv2 {
margin-bottom: 24px;
font-size: 14px;
font-weight: 600;
color: #525656;
}
@media only screen and (max-device-width: 767px) {

14
public/scss/hop-styling.scss
View file

@ -20,7 +20,7 @@ body {
}
.italicSmall {
font-style: normal;
font-style: italic;
font-size: 14px;
}
@ -161,15 +161,15 @@ body {
cursor: pointer;
}
&:focus {
box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
}
&:focus, // Mouse, touch, stylus focus
&:focus-visible {
// Keyboard focus for accessibility
outline: none;
box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
color: #fff;
background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
background: #db0020;
}
&:disabled {
background: #e3e4e4 !important;
@ -332,7 +332,7 @@ body {
&.paymentOptionText {
margin: auto 0;
padding-left: 0;
font-weight: 400;
font-weight: 600;
}
}
}
@ -372,7 +372,7 @@ body {
text-align: right;
> img {
width: 20%;
width: 12%;
}
}
}
@ -390,12 +390,14 @@ body {
margin-top: 24px;
margin-bottom: 24px;
font-size: 14px;
font-weight: 600;
color: #525656;
}
.disclaimerContainerv2 {
margin-bottom: 24px;
font-size: 14px;
font-weight: 600;
color: #525656;
}
}

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

@ -4,7 +4,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<div class="col-12">
<div>
<alert
ref="piaCCErrorAlert"
@ -37,45 +37,51 @@
seamless
scrolling="no"
allow="payment *; microphone *; geolocation *;"></iframe>
<div id="cart-container">
<cart
ref="cart"
:damage="damageInfo"
:availableVaps="availableVaps"
:allowItemRemoval="false"
v-model="lineItems"
servicePackageOptionsCmsName="ServicePackageTitle"
recyclingModalCmsWidgetName="RecycleModal"
:isInsurance="isInsurance"
:insuranceDeductible="currentDeductible"
:insuranceCompanyName="insuranceCompanyName"
:showInsuranceCoverageAs="showInsuranceCoverageAs"
:isItac="isItac"
:isNoComp="isNoComp"
:isExpandedOnLoad="true" />
<button
v-if="showSwitchPaymentMethod"
id="submit-payment"
class="btn btn-primary rounded-pill py-3 px-6 delay w-100"
type="button"
@click="submitPayment">
Submit payment
</button>
<div class="payment-method-question">
<buttonQuestion
v-if="showSwitchPaymentMethod"
groupName="payment-method"
buttonTypeString="payment-method-list-button"
:buttonTypeObject="paymentMethodListButton"
isWide
:questionText="paymentMethodQuestionText"
:answers="paymentMethodAnswerData"
isRequired
:validationRules="validationRules"
:showApplePay="false"
:isInsurance="isInsurance"
v-model="switchedPaymentMethod" />
</div>
</div>
</div>
<hr />
<cart
ref="cart"
:damage="damageInfo"
:availableVaps="availableVaps"
:allowItemRemoval="false"
v-model="lineItems"
servicePackageOptionsCmsName="ServicePackageTitle"
recyclingModalCmsWidgetName="RecycleModal"
:isInsurance="isInsurance"
:insuranceDeductible="currentDeductible"
:insuranceCompanyName="insuranceCompanyName"
:showInsuranceCoverageAs="showInsuranceCoverageAs"
:isItac="isItac"
:isNoComp="isNoComp"
:isExpandedOnLoad="true" />
<div class="payment-method-question">
<buttonQuestion
v-if="showSwitchPaymentMethod"
groupName="payment-method"
buttonTypeString="payment-method-list-button"
:buttonTypeObject="paymentMethodListButton"
isWide
:questionText="paymentMethodQuestionText"
:answers="paymentMethodAnswerData"
isRequired
:validationRules="validationRules"
:showApplePay="false"
:isInsurance="isInsurance"
v-model="switchedPaymentMethod"
textPosition="text-start" />
</div>
<hr class="mb-5" />
<navbar
cmsWidgetName="FunnelFooterWidget"
isForwardActionDisabled="true"
@ -889,6 +895,12 @@ export default {
}
return false;
},
submitPayment() {
const iframe = this.$refs.paymentFrame;
if (iframe) {
iframe.contentWindow.postMessage("submitPayment", "*");
}
},
},
components: {
funnelHeader,
@ -904,18 +916,48 @@ export default {
<style lang="scss">
.hop-iframe {
position: relative;
min-height: 650px;
width: 100%;
min-height: 650px;
border: 0 none;
@include media-breakpoint-down(lg) {
min-height: 1688px;
}
}
#pageLoadingModal {
background-color: red;
}
#card-container {
display: flex;
& > iframe {
flex-basis: 55%;
margin-right: 9%;
}
& > #cart-container {
flex-basis: 36%;
}
@include media-breakpoint-down(lg) {
flex-direction: column;
& > iframe {
flex-basis: 100%;
margin-right: 0;
}
& > #cart-container {
flex-basis: 100%;
& > button#submit-payment {
display: none;
}
}
}
}
.payment-method-question {
padding: 0 1.5rem;
.question-text span {
text-align: left;
padding: 0;
& .list-button-content {
justify-content: center;
}
}