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

CSR-2130

Browse source 
CSR-2130 more style updates and save the payment method type once we know what it is after being selected on the hop page
This commit is contained in:
CarlNation 2024-07-10 14:50:19 -04:00
parent e52329ffea
commit 22f36dea4e
5 changed files with 290 additions and 209 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -203,3 +203,107 @@ body .cc-error-container #alert-message {
background-color: #fcbfbb;
border: 1px solid #d4281c;
}
#fmg-checkout-shared .form-group .list-group.radio .list-group-item {
border-radius: 5px;
}
#fmg-checkout-shared .form-group .list-group.radio .list-group-item label {
padding: 12px 20px;
}
#fmg-checkout-shared #applepay-and-paypal-container {
display: inline-flex;
width: 100%;
justify-content: space-between;
}
#fmg-checkout-shared #applepay-and-paypal-container #paypalParentDiv {
padding-left: 10px;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group {
margin: 0;
width: 100%;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink {
margin: 0;
padding: 10px 0;
background-color: #000000;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink label {
padding: 0;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink label apple-pay-button {
vertical-align: middle;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink.list-group-item {
border-radius: 100px;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink {
margin: 0;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink #paypalImage {
max-width: 40%;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink.list-group-item {
border-radius: 100px;
}
#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .form-group {
width: 100%;
}
#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .form-group#applepayParentDiv {
display: none;
}
#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .form-group .list-group.paymentSelection {
width: 100%;
}
#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .form-group .list-group #paypalParentLink #paypalImage {
max-width: 20%;
}
#fmg-checkout-shared #other-payments-container label {
display: inline-flex;
text-align: left;
align-items: flex-start;
justify-content: space-between;
}
#fmg-checkout-shared #other-payments-container label span.paymentOptionText {
margin: auto 0;
padding-left: 0;
}
#fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type {
width: 100%;
}
#fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:last-of-type {
width: 0;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv.active {
padding-bottom: 10px;
border: 1px solid #0070D1;
border-radius: 5px;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv.active > .paymentSelection #creditCardParentLink {
border-bottom-color: #0070D1;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages {
width: 50%;
text-align: right;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages > img {
width: 20%;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific {
padding: 0 2%;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific > .form-group {
width: 100%;
}
#fmg-checkout-shared #other-payments-container .italicSmall {
margin-top: 10px;
}
@media only screen and (max-device-width: 767px) {
#fmg-checkout-shared #applepay-and-paypal-container {
width: 100%;
}
#fmg-checkout-shared #other-payments-container > .form-group {
width: 100%;
}
}

114
public/css/site-2020Styling.css
View file

@ -181,19 +181,6 @@ html .in-shop.vspacing .list-group.radio.vspacing .list-group-item {
right: 15px;
}
#fmg-checkout-shared #other-payments-container label {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
text-align: left;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.form-group {
margin-bottom: 10px;
}
@ -217,103 +204,6 @@ html .in-shop.vspacing .list-group.radio.vspacing .list-group-item {
width: 60%;
}
}
#fmg-checkout-shared .form-group .list-group.radio .list-group-item {
border-radius: 5px;
}
#fmg-checkout-shared #applepay-and-paypal-container {
display: inline-flex;
width: 100%;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group {
margin: 0;
width: 100%;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection {
width: 95%;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink {
margin: 0;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink #paypalImage {
max-width: 35%;
}
#fmg-checkout-shared #applepay-and-paypal-container.no-applepay #applepayParentDiv {
display: none;
}
#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .list-group.paymentSelection {
width: 100%;
}
#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .list-group #paypalParentLink #paypalImage {
max-width: 25%;
}
#fmg-checkout-shared #other-payments-container label span.paymentOptionText {
margin: auto 0;
padding-left: 0;
}
#fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type {
width: 100%;
}
#fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:last-of-type {
width: 0;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv {
padding-bottom: 10px;
border-radius: 5px;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv.active > .paymentSelection #creditCardParentLink {
border-bottom-color: #0070d1;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv.active {
padding-bottom: 10px;
border: 1px solid #0070d1;
border-radius: 5px;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages {
width: 50%;
text-align: right;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages > img {
width: 20%;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific {
padding: 0 2%;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific > .form-group {
width: 100%;
}
#fmg-checkout-shared #other-payments-container .italicSmall {
margin-top: 10px;
}
@media only screen and (max-device-width: 767px) {
#fmg-checkout-shared #applepay-and-paypal-container {
width: 100%;
}
#fmg-checkout-shared #other-payments-container > .form-group {
width: 100%;
}
}
.list-group {
margin-bottom: 20px;
padding-left: 0;
@ -602,10 +492,6 @@ img {
text-align: left;
}
#paypalParentLink {
margin-top: 12px;
}
html #creditCardParentLink.list-group-item {
border-radius: 48px;
text-align: center;

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

@ -221,3 +221,175 @@ body {
}
}
}
#fmg-checkout-shared {
.form-group {
.list-group {
&.radio {
.list-group-item {
border-radius: 5px;
label {
padding: 12px 20px;
}
}
}
}
}
#applepay-and-paypal-container {
display: inline-flex;
width: 100%;
justify-content: space-between;
#paypalParentDiv {
padding-left: 10px;
}
.form-group {
margin: 0;
width: 100%;
.list-group {
&.paymentSelection {
#applepayParentLink {
margin: 0;
padding: 10px 0;
background-color: #000000;
label {
padding: 0;
apple-pay-button {
vertical-align: middle;
}
}
&.list-group-item {
border-radius: 100px;
}
}
}
#paypalParentLink {
margin: 0;
#paypalImage {
max-width: 40%;
}
&.list-group-item {
border-radius: 100px;
}
}
}
}
&.no-applepay {
.form-group {
width: 100%;
&#applepayParentDiv {
display: none;
}
.list-group {
&.paymentSelection {
width: 100%;
}
#paypalParentLink {
#paypalImage {
max-width: 20%;
}
}
}
}
}
}
#other-payments-container {
label {
display: inline-flex;
text-align: left;
align-items: flex-start;
justify-content: space-between;
span {
&.paymentOptionText {
margin: auto 0;
padding-left: 0;
}
}
}
#afterpayParentLink {
label {
> span {
&:first-of-type {
width: 100%;
}
&:last-of-type {
width: 0;
}
}
}
}
#creditCardParentDiv {
&.active {
padding-bottom: 10px;
border: 1px solid #0070D1;
border-radius: 5px;
> .paymentSelection {
#creditCardParentLink {
border-bottom-color: #0070D1;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
}
.paymentSelection {
#creditCardImages {
width: 50%;
text-align: right;
> img {
width: 20%;
}
}
}
.creditCardSpecific {
padding: 0 2%;
> .form-group {
width: 100%;
}
}
}
.italicSmall {
margin-top: 10px;
}
}
@media only screen and (max-device-width: 767px) {
#applepay-and-paypal-container {
width: 100%;
}
#other-payments-container {
> .form-group {
width: 100%;
}
}
}
}

97
public/scss/site-2020Styling.scss
View file

@ -174,20 +174,7 @@
.row > .form-group > .glyphicon {
right: 15px;
}
#fmg-checkout-shared #other-payments-container label {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
text-align: left;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.form-group {
margin-bottom: 10px;
}
@ -212,84 +199,6 @@
}
}
#fmg-checkout-shared .form-group .list-group.radio .list-group-item {
border-radius: 5px;
}
#fmg-checkout-shared #applepay-and-paypal-container {
display: inline-flex;
width: 100%;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group {
margin: 0;
width: 100%;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection {
width: 95%;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink {
margin: 0;
}
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink #paypalImage {
max-width: 35%;
}
#fmg-checkout-shared #applepay-and-paypal-container.no-applepay #applepayParentDiv {
display: none;
}
#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .list-group.paymentSelection {
width: 100%;
}
#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .list-group #paypalParentLink #paypalImage {
max-width: 25%;
}
#fmg-checkout-shared #other-payments-container label span.paymentOptionText {
margin: auto 0;
padding-left: 0;
}
#fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type {
width: 100%;
}
#fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:last-of-type {
width: 0;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv {
padding-bottom: 10px;
border-radius: 5px;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv.active > .paymentSelection #creditCardParentLink {
border-bottom-color: #0070d1;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv.active {
padding-bottom: 10px;
border: 1px solid #0070d1;
border-radius: 5px;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages {
width: 50%;
text-align: right;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages > img {
width: 20%;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific {
padding: 0 2%;
}
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific > .form-group {
width: 100%;
}
#fmg-checkout-shared #other-payments-container .italicSmall {
margin-top: 10px;
}
@media only screen and (max-device-width: 767px) {
#fmg-checkout-shared #applepay-and-paypal-container {
width: 100%;
}
#fmg-checkout-shared #other-payments-container > .form-group {
width: 100%;
}
}
.list-group {
margin-bottom: 20px;
padding-left: 0;
@ -545,9 +454,7 @@ img {
padding-left: 20px;
text-align: left;
}
#paypalParentLink {
margin-top: 12px;
}
html #creditCardParentLink.list-group-item {
border-radius: 48px;
text-align: center;

12
src/layouts/payment-pia-return/payment-pia-return.vue
View file

@ -58,6 +58,12 @@ export default {
return true;
},
async processPaypalResponse() {
await this.dispatchStoreAction(
storeActions.SAVE_PAYMENT_METHOD_CHOICE,
paymentMethods.PAYPAL,
false
);
const token = getQuerystringParameter(queryStrings.TOKEN);
const payerId = getQuerystringParameter(queryStrings.PAYERID);
@ -71,6 +77,12 @@ export default {
await this.saveAndSubmitWorkOrder();
},
async processCreditCardResponse() {
await this.dispatchStoreAction(
storeActions.SAVE_PAYMENT_METHOD_CHOICE,
paymentMethods.CREDIT_CARD,
false
);
const subscriptionID = getQuerystringParameter(queryStrings.SUBSCRIPTIONID);
const referralSeqNum = getQuerystringParameter(queryStrings.REFERRAL_SEQ_NUM);