diff --git a/public/css/README.md b/public/css/README.md index a228213b2..0b09019ec 100644 --- a/public/css/README.md +++ b/public/css/README.md @@ -11,3 +11,9 @@ sass --watch scss:css This will compile and output .css files (into the public/css folder) that can be consumed by the Payment page. # Do not use the .css files on their own. You must use the .scss files and have Sass compile them to .css files. + +From a windows machine, I ran an install for sass even though it is listed in node_modules. It would not run unless I did an install: +npm install -g sass +sass --no-source-map --watch scss:css + +Then committed the css files and reverted the package.json file so I didn't commit an upgraded version of sass \ No newline at end of file diff --git a/public/css/site-2020Styling.css b/public/css/site-2020Styling.css index 07d331589..8d9551c36 100644 --- a/public/css/site-2020Styling.css +++ b/public/css/site-2020Styling.css @@ -112,3 +112,514 @@ .creditCardSpecific { display: none; } + +* { + box-sizing: border-box; +} + +*:before, +*:after { + box-sizing: border-box; +} + +.form-group.radio .list-group .list-group-item { + border-radius: 22px; + text-align: center; + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2); +} + +.form-group.radio .list-group .list-group-item .radio .list-group, +.form-group.radio .list-group .list-group-item .radio.list-group { + margin: 0 0 22px 0; +} + +.form-group.radio .list-group .list-group-item > label { + padding: 10px 32px 10px 32px; +} + +.form-group.radio .list-group .list-group-item .checkbox .list-group .list-group-item label, +.form-group.radio .list-group .list-group-item .radio .list-group .list-group-item label, +.form-group.radio .list-group .list-group-item .checkbox.list-group .list-group-item label, +.form-group.radio .list-group .list-group-item .radio.list-group .list-group-item label { + padding-left: 55px; +} + +.list-group.radio .list-group-item { + border-radius: 22px; + text-align: center; + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2); +} + +.list-group.radio .list-group-item .radio .list-group, +.list-group.radio .list-group-item .radio.list-group { + margin: 0 0 22px 0; +} + +.list-group.radio .list-group-item > label { + padding: 10px 32px 10px 32px; +} + +@media (max-width: 992px) { + .list-group.radio .list-group-item > label { + padding: 12px 20px 12px 20px; + } +} +html .list-group .list-group-item .list-group.radio .list-group-item { + text-align: left; + border-radius: 0; +} + +html .list-group .list-group-item .list-group.radio .list-group-item input[type=radio] { + visibility: visible; +} + +html .in-shop.vspacing .list-group.radio.vspacing .list-group-item { + border-radius: 48px; +} + +.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; +} + +.form-group .control-label { + display: block; + margin-bottom: 2px; +} + +.form-group .form-control { + margin-bottom: 2px; +} + +@media (min-width: 500px) { + .form-group { + width: 80%; + } +} +@media (min-width: 800px) { + .form-group { + 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; +} + +.list-group-item { + position: relative; + display: block; + padding: 10px 15px; + margin-bottom: -1px; + background-color: #ffffff; + border: 1px solid #dddddd; +} + +.list-group-item:first-child { + border-top-right-radius: 5px; + border-top-left-radius: 5px; +} + +.list-group-item:last-child { + margin-bottom: 0; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; +} + +a.list-group-item { + color: #555555; +} + +a.list-group-item .list-group-item-heading { + color: #333333; +} + +a.list-group-item:hover, +a.list-group-item:focus { + text-decoration: none; + color: #555555; + background-color: #f5f5f5; +} + +.list-group-item.disabled, +.list-group-item.disabled:hover, +.list-group-item.disabled:focus { + background-color: #f0f1f2; + color: #9aa1a3; + cursor: not-allowed; +} + +.list-group-item.disabled .list-group-item-heading, +.list-group-item.disabled:hover .list-group-item-heading, +.list-group-item.disabled:focus .list-group-item-heading { + color: inherit; +} + +.list-group-item.disabled .list-group-item-text, +.list-group-item.disabled:hover .list-group-item-text, +.list-group-item.disabled:focus .list-group-item-text { + color: #9aa1a3; +} + +.list-group-item.active, +.list-group-item.active:hover, +.list-group-item.active:focus { + z-index: 2; + color: #ffffff; + background-color: #167cac; + border-color: #167cac; +} + +.list-group-item.active .list-group-item-heading, +.list-group-item.active:hover .list-group-item-heading, +.list-group-item.active:focus .list-group-item-heading, +.list-group-item.active .list-group-item-heading > small, +.list-group-item.active:hover .list-group-item-heading > small, +.list-group-item.active:focus .list-group-item-heading > small, +.list-group-item.active .list-group-item-heading > .small, +.list-group-item.active:hover .list-group-item-heading > .small, +.list-group-item.active:focus .list-group-item-heading > .small { + color: inherit; +} + +.list-group-item.active .list-group-item-text, +.list-group-item.active:hover .list-group-item-text, +.list-group-item.active:focus .list-group-item-text { + color: #9cd7f2; +} + +.list-group-item-success { + color: #cacbcc; + background-color: #e6f2ec; +} + +a.list-group-item-success { + color: #cacbcc; +} + +a.list-group-item-success .list-group-item-heading { + color: inherit; +} + +a.list-group-item-success:hover, +a.list-group-item-success:focus { + color: #cacbcc; + background-color: #d5e9df; +} + +a.list-group-item-success.active, +a.list-group-item-success.active:hover, +a.list-group-item-success.active:focus { + color: #fff; + background-color: #cacbcc; + border-color: #cacbcc; +} + +.list-group-item-info { + color: #125b7e; + background-color: #e7f1f6; +} + +a.list-group-item-info { + color: #125b7e; +} + +a.list-group-item-info .list-group-item-heading { + color: inherit; +} + +a.list-group-item-info:hover, +a.list-group-item-info:focus { + color: #125b7e; + background-color: #d4e6ef; +} + +a.list-group-item-info.active, +a.list-group-item-info.active:hover, +a.list-group-item-info.active:focus { + color: #fff; + background-color: #125b7e; + border-color: #125b7e; +} + +.list-group-item-warning { + color: #f8af1c; + background-color: #fef6e8; +} + +a.list-group-item-warning { + color: #f8af1c; +} + +a.list-group-item-warning .list-group-item-heading { + color: inherit; +} + +a.list-group-item-warning:hover, +a.list-group-item-warning:focus { + color: #f8af1c; + background-color: #fdecd0; +} + +a.list-group-item-warning.active, +a.list-group-item-warning.active:hover, +a.list-group-item-warning.active:focus { + color: #fff; + background-color: #f8af1c; + border-color: #f8af1c; +} + +.list-group-item-danger { + color: #da291c; + background-color: #fbe9e8; +} + +a.list-group-item-danger { + color: #da291c; +} + +a.list-group-item-danger .list-group-item-heading { + color: inherit; +} + +a.list-group-item-danger:hover, +a.list-group-item-danger:focus { + color: #da291c; + background-color: #f7d4d2; +} + +a.list-group-item-danger.active, +a.list-group-item-danger.active:hover, +a.list-group-item-danger.active:focus { + color: #fff; + background-color: #da291c; + border-color: #da291c; +} + +.list-group-item-heading { + margin-top: 0; + margin-bottom: 5px; +} + +.list-group-item-text { + margin-bottom: 0; + line-height: 1.3; +} + +.radio .list-group.paymentSelection, .radio.list-group.paymentSelection { + margin-top: 0; + margin-bottom: 0; +} +@media (max-width: 33.9em) { + .radio .list-group.paymentSelection label, .radio .list-group.paymentSelection a, .radio.list-group.paymentSelection label, .radio.list-group.paymentSelection a { + max-height: 52px; + } +} + +.radio, +.checkbox, +.form-group.checkbox .list-group, +.form-group.checkbox .list-group, +.form-group.radio .list-group, +.form-group.radio .list-group, +.checkbox.list-group, +.checkbox.list-group, +.radio.list-group, +.radio.list-group { + position: relative; + display: block; + margin-top: 10px; + margin-bottom: 10px; +} + +.form-group.checkbox .list-group .list-group-item > label, +.form-group.radio .list-group .list-group-item > label, +.checkbox.list-group .list-group-item > label, +.radio.list-group .list-group-item > label { + margin-bottom: initial; + width: 100%; + font-weight: normal; + padding: 12px 27px 12px 33px; + color: #525656; +} + +.form-group.checkbox .list-group .list-group-item, +.form-group.radio .list-group .list-group-item, +.checkbox.list-group .list-group-item, +.radio.list-group .list-group-item { + margin-bottom: 12px; + border-width: 1px; + /* border-color: #cacbcc; */ + border-radius: 5px; + padding: 0; +} + +.form-group.checkbox .list-group .list-group-item.active, +.form-group.radio .list-group .list-group-item.active, +.checkbox.list-group .list-group-item.active, +.radio.list-group .list-group-item.active { + background-color: #e7f1f6; + color: #000000; +} + +.radio label, +.checkbox label { + min-height: 23px; + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; + color: #525656; +} + +img { + vertical-align: middle; +} + +#paypalParentLink label, +#afterpayParentLink label, +#creditCardParentLink label { + padding-top: 9px; + padding-bottom: 9px; +} + +#paypalParentLink label .paymentOptionText, +#creditCardParentLink label .paymentOptionText { + padding-left: 20px; + text-align: left; +} + +#paypalParentLink { + margin-top: 12px; +} + +html #creditCardParentLink.list-group-item { + border-radius: 48px; + text-align: center; +} + +@media (max-width: 992px) { + .list-group.radio .list-group-item > label { + padding: 12px 20px 12px 20px; + } +} +label { + display: inline-block; + max-width: 100%; + margin-bottom: 5px; + font-weight: 500; + color: #000000; +} diff --git a/public/index.html b/public/index.html index edf50a0f4..e88f8ca8f 100644 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,7 @@ window.dataLayer = [{}]; + diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss index ec4a7f203..59165d58b 100644 --- a/public/scss/hop-styling.scss +++ b/public/scss/hop-styling.scss @@ -220,5 +220,4 @@ body { border: 1px solid #d4281c; } } - } diff --git a/public/scss/site-2020Styling.scss b/public/scss/site-2020Styling.scss index 3cd0839bc..129ac36f1 100644 --- a/public/scss/site-2020Styling.scss +++ b/public/scss/site-2020Styling.scss @@ -116,3 +116,453 @@ .creditCardSpecific { display: none; } + +* { + box-sizing: border-box; +} + +*:before, +*:after { + box-sizing: border-box; +} + +.form-group.radio .list-group .list-group-item { + border-radius: 22px; + text-align: center; + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2); + } + .form-group.radio .list-group .list-group-item .radio .list-group, + .form-group.radio .list-group .list-group-item .radio.list-group { + margin: 0 0 22px 0; + } + .form-group.radio .list-group .list-group-item > label { + padding: 10px 32px 10px 32px; + } + .form-group.radio .list-group .list-group-item .checkbox .list-group .list-group-item label, + .form-group.radio .list-group .list-group-item .radio .list-group .list-group-item label, + .form-group.radio .list-group .list-group-item .checkbox.list-group .list-group-item label, + .form-group.radio .list-group .list-group-item .radio.list-group .list-group-item label { + padding-left: 55px; + } + .list-group.radio .list-group-item { + border-radius: 22px; + text-align: center; + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2); + } + .list-group.radio .list-group-item .radio .list-group, + .list-group.radio .list-group-item .radio.list-group { + margin: 0 0 22px 0; + } + .list-group.radio .list-group-item > label { + padding: 10px 32px 10px 32px; + } + @media (max-width: 992px) { + .list-group.radio .list-group-item > label { + padding: 12px 20px 12px 20px; + } + } + html .list-group .list-group-item .list-group.radio .list-group-item { + text-align: left; + border-radius: 0; + } + html .list-group .list-group-item .list-group.radio .list-group-item input[type="radio"] { + visibility: visible; + } + html .in-shop.vspacing .list-group.radio.vspacing .list-group-item { + border-radius: 48px; + } + .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; + } + + .form-group .control-label { + display: block; + margin-bottom: 2px; + } + + .form-group .form-control { + margin-bottom: 2px; + } + + @media (min-width: 500px) { + .form-group { + width: 80%; + } + } + @media (min-width: 800px) { + .form-group { + 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; + } + .list-group-item { + position: relative; + display: block; + padding: 10px 15px; + margin-bottom: -1px; + background-color: #ffffff; + border: 1px solid #dddddd; + } + .list-group-item:first-child { + border-top-right-radius: 5px; + border-top-left-radius: 5px; + } + .list-group-item:last-child { + margin-bottom: 0; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + } + a.list-group-item { + color: #555555; + } + a.list-group-item .list-group-item-heading { + color: #333333; + } + a.list-group-item:hover, + a.list-group-item:focus { + text-decoration: none; + color: #555555; + background-color: #f5f5f5; + } + .list-group-item.disabled, + .list-group-item.disabled:hover, + .list-group-item.disabled:focus { + background-color: #f0f1f2; + color: #9aa1a3; + cursor: not-allowed; + } + .list-group-item.disabled .list-group-item-heading, + .list-group-item.disabled:hover .list-group-item-heading, + .list-group-item.disabled:focus .list-group-item-heading { + color: inherit; + } + .list-group-item.disabled .list-group-item-text, + .list-group-item.disabled:hover .list-group-item-text, + .list-group-item.disabled:focus .list-group-item-text { + color: #9aa1a3; + } + .list-group-item.active, + .list-group-item.active:hover, + .list-group-item.active:focus { + z-index: 2; + color: #ffffff; + background-color: #167cac; + border-color: #167cac; + } + .list-group-item.active .list-group-item-heading, + .list-group-item.active:hover .list-group-item-heading, + .list-group-item.active:focus .list-group-item-heading, + .list-group-item.active .list-group-item-heading > small, + .list-group-item.active:hover .list-group-item-heading > small, + .list-group-item.active:focus .list-group-item-heading > small, + .list-group-item.active .list-group-item-heading > .small, + .list-group-item.active:hover .list-group-item-heading > .small, + .list-group-item.active:focus .list-group-item-heading > .small { + color: inherit; + } + .list-group-item.active .list-group-item-text, + .list-group-item.active:hover .list-group-item-text, + .list-group-item.active:focus .list-group-item-text { + color: #9cd7f2; + } + .list-group-item-success { + color: #cacbcc; + background-color: #e6f2ec; + } + a.list-group-item-success { + color: #cacbcc; + } + a.list-group-item-success .list-group-item-heading { + color: inherit; + } + a.list-group-item-success:hover, + a.list-group-item-success:focus { + color: #cacbcc; + background-color: #d5e9df; + } + a.list-group-item-success.active, + a.list-group-item-success.active:hover, + a.list-group-item-success.active:focus { + color: #fff; + background-color: #cacbcc; + border-color: #cacbcc; + } + .list-group-item-info { + color: #125b7e; + background-color: #e7f1f6; + } + a.list-group-item-info { + color: #125b7e; + } + a.list-group-item-info .list-group-item-heading { + color: inherit; + } + a.list-group-item-info:hover, + a.list-group-item-info:focus { + color: #125b7e; + background-color: #d4e6ef; + } + a.list-group-item-info.active, + a.list-group-item-info.active:hover, + a.list-group-item-info.active:focus { + color: #fff; + background-color: #125b7e; + border-color: #125b7e; + } + .list-group-item-warning { + color: #f8af1c; + background-color: #fef6e8; + } + a.list-group-item-warning { + color: #f8af1c; + } + a.list-group-item-warning .list-group-item-heading { + color: inherit; + } + a.list-group-item-warning:hover, + a.list-group-item-warning:focus { + color: #f8af1c; + background-color: #fdecd0; + } + a.list-group-item-warning.active, + a.list-group-item-warning.active:hover, + a.list-group-item-warning.active:focus { + color: #fff; + background-color: #f8af1c; + border-color: #f8af1c; + } + .list-group-item-danger { + color: #da291c; + background-color: #fbe9e8; + } + a.list-group-item-danger { + color: #da291c; + } + a.list-group-item-danger .list-group-item-heading { + color: inherit; + } + a.list-group-item-danger:hover, + a.list-group-item-danger:focus { + color: #da291c; + background-color: #f7d4d2; + } + a.list-group-item-danger.active, + a.list-group-item-danger.active:hover, + a.list-group-item-danger.active:focus { + color: #fff; + background-color: #da291c; + border-color: #da291c; + } + .list-group-item-heading { + margin-top: 0; + margin-bottom: 5px; + } + .list-group-item-text { + margin-bottom: 0; + line-height: 1.3; + } + + +.radio .list-group.paymentSelection, .radio.list-group.paymentSelection { + margin-top: 0; + margin-bottom: 0; + + @media (max-width: 33.9em) { + label, a { + max-height: 52px; + } + } +} + +.radio, +.checkbox, +.form-group.checkbox .list-group, +.form-group.checkbox .list-group, +.form-group.radio .list-group, +.form-group.radio .list-group, +.checkbox.list-group, +.checkbox.list-group, +.radio.list-group, +.radio.list-group { + position: relative; + display: block; + margin-top: 10px; + margin-bottom: 10px; +} + +.form-group.checkbox .list-group .list-group-item > label, +.form-group.radio .list-group .list-group-item > label, +.checkbox.list-group .list-group-item > label, +.radio.list-group .list-group-item > label { + margin-bottom: initial; + width: 100%; + font-weight: normal; + padding: 12px 27px 12px 33px; + color: #525656; +} + +.form-group.checkbox .list-group .list-group-item, +.form-group.radio .list-group .list-group-item, +.checkbox.list-group .list-group-item, +.radio.list-group .list-group-item { + margin-bottom: 12px; + border-width: 1px; + /* border-color: #cacbcc; */ + border-radius: 5px; + padding: 0; +} + +.form-group.checkbox .list-group .list-group-item.active, +.form-group.radio .list-group .list-group-item.active, +.checkbox.list-group .list-group-item.active, +.radio.list-group .list-group-item.active { + background-color: #e7f1f6; + color: #000000; +} + +.radio label, +.checkbox label { + min-height: 23px; + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; + color: #525656; +} + +img { + vertical-align: middle; +} + +#paypalParentLink label, +#afterpayParentLink label, +#creditCardParentLink label { + padding-top: 9px; + padding-bottom: 9px; +} + +#paypalParentLink label .paymentOptionText, +#creditCardParentLink label .paymentOptionText { + padding-left: 20px; + text-align: left; +} +#paypalParentLink { + margin-top: 12px; +} +html #creditCardParentLink.list-group-item { + border-radius: 48px; + text-align: center; +} + +@media (max-width: 992px) { + .list-group.radio .list-group-item > label { + padding: 12px 20px 12px 20px; + } +} + +label { + display: inline-block; + max-width: 100%; + margin-bottom: 5px; + font-weight: 500; + color: #000000; +} \ No newline at end of file diff --git a/src/constants/application-config.js b/src/constants/application-config.js index 25d24d5c8..d4a0ceb8c 100644 --- a/src/constants/application-config.js +++ b/src/constants/application-config.js @@ -5,6 +5,7 @@ const applicationConfig = { SAVED_SESSION_TIMEOUT_DAYS: 45, COOKIE_PATH: "/", CURRENT_ENVIRONMENT: process.env.VUE_APP_CURRENT_ENVIRONMENT, // "Localhost", "Dev", "QA", and "Prod" + HERITAGE_FUNNEL: process.env.VUE_APP_HERITAGE_FUNNEL, APPLICATION_NAME: "FixMyGlass", ANALYTICS_APPLICATION_NAME: "FixMyGlassNextGen", APPLICATION_ABBREVIATION: "fmg", diff --git a/src/constants/payment-method-constants.js b/src/constants/payment-method-constants.js index 0799f2b2a..8e01c2794 100644 --- a/src/constants/payment-method-constants.js +++ b/src/constants/payment-method-constants.js @@ -4,4 +4,6 @@ export const paymentMethods = { CREDIT_CARD: "CreditCard", PAYPAL: "Paypal", AFTERPAY: "Afterpay", + PAY_NOW: "PayNow", + INSURANCE: "Insurance", }; diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 9ac22878a..0ef03beb8 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -343,6 +343,7 @@ export default { availableVaps: [], paymentMethodInternalModel: this.getPaymentMethodFromStore(), inactivePromos: this.getInactivePromosFromStore(), + isAppleDevice: false, isRecalAckOptIn: false, }; }, @@ -519,7 +520,15 @@ export default { this.$route ); } else { - this.setupPia(); + if (this.paymentMethod == paymentMethods.INSURANCE) { + this.dispatchStoreAction(this.storeActions.SAVE_PAYMENT_TYPE, true, false); + this.$router.navigateWithoutSaving( + this.navigationScenarios.CLICKED_INSURANCE, + this.$route + ); + } else { + this.setupPia(); + } } }, async setupPia() { @@ -611,6 +620,10 @@ export default { }, customCtaCopy() { switch (this.paymentMethod) { + case paymentMethods.PAY_NOW: + return "Continue to checkout"; + case paymentMethods.INSURANCE: + return "Continue to insurance"; case paymentMethods.CREDIT_CARD: return "Continue to checkout"; case paymentMethods.PAYPAL: diff --git a/src/layouts/payment-pia-return/payment-pia-return.vue b/src/layouts/payment-pia-return/payment-pia-return.vue index dbea6493d..4d7fb7d61 100644 --- a/src/layouts/payment-pia-return/payment-pia-return.vue +++ b/src/layouts/payment-pia-return/payment-pia-return.vue @@ -45,23 +45,11 @@ export default { ); } } else { - switch (store.getters.order.payment.piaType) { - case paymentMethods.CREDIT_CARD: - case paymentMethods.AFTERPAY: - await this.processCreditCardResponse(); - break; - case paymentMethods.PAYPAL: - await this.processPaypalResponse(); - break; - default: - var msg = "Unknown Pia type: " + store.getters.order.payment.piaType; - console.log(msg); - this.$router.navigateWithoutSaving( - this.navigationScenarios.PIA_ERROR, - this.$route, - {}, - { [routerParams.DISPLAY_PIA_ALERT]: true } - ); + const token = getQuerystringParameter(queryStrings.TOKEN); + if (token) { + await this.processPaypalResponse(); + } else { + await this.processCreditCardResponse(); } } }, diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue index 7f7b531f5..2d596a8b2 100644 --- a/src/layouts/payment/payment.vue +++ b/src/layouts/payment/payment.vue @@ -40,7 +40,8 @@ name="card-frame" id="card-frame" seamless - scrolling="no"> + scrolling="no" + allow="payment *; microphone *; geolocation *;"> @@ -192,6 +193,7 @@ + @@ -256,7 +258,6 @@ export default { piaLineItems: "", lineItems: [], availableVaps: [], - shouldBlockInteraction: false, }; }, @@ -405,6 +406,13 @@ export default { }); }, computed: { + parentNomainName() { + var a = document.createElement("a"); + a.href = applicationConfig.HERITAGE_FUNNEL; + + const protocol = window.location.protocol; + return `${protocol}//${a.hostname}`; + }, dynamicCSSUrl() { const { protocol, hostname, port } = window.location; return `${protocol}//${hostname}:${port}/fmg/css/site-2020Styling.css`; @@ -650,10 +658,19 @@ export default { this.$nextTick(() => { this.$refs.hopForm.submit(); + var isApplePayAvailable = false; + if (window.ApplePaySession && window.ApplePaySession.canMakePayments()) { + isApplePayAvailable = true; + } + const iframe = this.$refs.paymentFrame; if (iframe) { iframe.onload = () => { if (iframe.contentWindow) { + if (isApplePayAvailable) { + iframe.contentWindow.postMessage("hybrid-with-applepay", "*"); + } + if (this.paymentType == "cc") { iframe.contentWindow.postMessage("CreditCardChosen", "*"); } else if (this.paymentType == "ap") { @@ -683,6 +700,9 @@ export default { if (event.data.indexOf("creditCardSubmit") > -1) { this.setUIBlock(true); } + if (event.data.indexOf("hybrid") > -1) { + this.setUIBlock(true); + } } }, setIFrameListener() { diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js index 5181b9879..56a40926a 100644 --- a/src/router/router-constants/navigation-scenarios.js +++ b/src/router/router-constants/navigation-scenarios.js @@ -49,6 +49,7 @@ const navigationScenarios = { CLICKED_CHANGE_LOCATION: "CLICKED_CHANGE_LOCATION", // Payment + CLICKED_INSURANCE: "CLICKED_INSURANCE", CLICKED_PAY_NOW: "CLICKED_PAY_NOW", PIA_ERROR: "PIA_ERROR", PIA_CC_ERROR: "PIA_CC_ERROR", diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 94c4217d8..d1a89897d 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -487,6 +487,10 @@ const routingTable = function (store) { scenario: navigationScenarios.CLICKED_PAY_NOW, destinationFmgPageValue: fmgPageValues.PAYMENT, }, + { + scenario: navigationScenarios.CLICKED_INSURANCE, + destinationFmgPageValue: fmgPageValues.INSURANCE_COMPANY, + }, ], }, { diff --git a/vue.config.js b/vue.config.js index fec376da7..b111f079d 100644 --- a/vue.config.js +++ b/vue.config.js @@ -5,8 +5,8 @@ process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4M process.env.VUE_APP_CURRENT_ENVIRONMENT = "Localhost"; process.env.VUE_APP_MY_ACCOUNT = "https://myaccountdev.safelite.com/"; -//process.env.VUE_APP_SAFELITE_HOP = "http://localhost:60966/fmgCheckoutEmbedded.aspx"; -process.env.VUE_APP_SAFELITE_HOP = "https://sv2-safelitehop-sys.safelite.com/fmgCheckoutEmbedded.aspx"; +//process.env.VUE_APP_SAFELITE_HOP = "http://localhost:60966/fmgCheckoutShared.aspx"; +process.env.VUE_APP_SAFELITE_HOP = "https://sv2-safelitehop-sys.safelite.com/fmgCheckoutShared.aspx"; // GA & GTM process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY =