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

Merge branch 'release/2025.09.04' into feature/bugfix/CASH-1420

Browse source
This commit is contained in:
AdamCaouetteSafelite 2025-08-27 10:18:58 -04:00
commit 03be0d6f94
4 changed files with 105 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
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 {
@ -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) {

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

@ -20,7 +20,7 @@ body {
}
.italicSmall {
font-style: normal;
font-style: italic;
font-size: 14px;
}
@ -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;
}
}

19
src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
View file

@ -1,18 +1,15 @@
<template>
<div class="save-progress-modal-question" :class="isProgressSaved ? 'progress-saved' : ''">
<div
class="save-progress-modal-question"
:class="isProgressSaved ? 'progress-saved' : ''"
v-if="!isProgressSaved">
<buttonMain
type="button"
v-if="!isProgressSaved"
:buttonText="buttonText"
loaderColor="white"
:suppressLoader="true"
class="open-save-progress-button"
@click-event="openModal" />
<alert
class="my-4"
v-else
cmsWidgetName="SaveProgressModalAlertWidget"
alertClass="alert-success" />
<modal
:ref="modalName"
:headerText="modalHeaderText"
@ -30,6 +27,11 @@
</template>
</modal>
</div>
<alert
class="my-4 save-your-progress-alert"
v-else
cmsWidgetName="SaveProgressModalAlertWidget"
alertClass="alert-success" />
</template>
<script>
@ -239,7 +241,9 @@ export default {
}
}
}
}
.save-your-progress-alert {
.alert {
border-radius: $border-radius-lg;
border: 1px solid $green;
@ -250,7 +254,6 @@ export default {
font-weight: 600;
font-size: 1rem;
color: $black;
text-align: left;
padding-left: 1.5rem;
&::before {
position: absolute;

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;
}
}