diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css index 8a9e68081..7633ddf35 100644 --- a/public/css/hop-styling.css +++ b/public/css/hop-styling.css @@ -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%; + } +} diff --git a/public/css/site-2020Styling.css b/public/css/site-2020Styling.css index 8d9551c36..a605df285 100644 --- a/public/css/site-2020Styling.css +++ b/public/css/site-2020Styling.css @@ -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; diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss index 59165d58b..42c75e25d 100644 --- a/public/scss/hop-styling.scss +++ b/public/scss/hop-styling.scss @@ -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%; + } + } + } +} \ No newline at end of file diff --git a/public/scss/site-2020Styling.scss b/public/scss/site-2020Styling.scss index 129ac36f1..ec72ae1b9 100644 --- a/public/scss/site-2020Styling.scss +++ b/public/scss/site-2020Styling.scss @@ -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; diff --git a/src/layouts/payment-pia-return/payment-pia-return.vue b/src/layouts/payment-pia-return/payment-pia-return.vue index 4d7fb7d61..c1f6330b3 100644 --- a/src/layouts/payment-pia-return/payment-pia-return.vue +++ b/src/layouts/payment-pia-return/payment-pia-return.vue @@ -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);