wickes-css2 2.98.0-develop.8 → 2.98.0-develop.9

package/src/scss/components/_donation-cart-new.scss

@@ -0,0 +1,192 @@
+.donation-cart-new {
+  &__cost {
+    font-weight: 500;
+    font-size: .875rem;
+    line-height: 1rem;
+    display: flex;
+    align-items: center;
+    margin-top: 12px;
+    height: 24px;
+
+    &-hide {
+      display: none;
+    }
+  }
+
+  .order-item__remove {
+    position: static;
+    margin-left: auto;
+    display: block;
+
+    .btn__text {
+      display: inline-block;
+      width: 1em;
+      text-align: center;
+    }
+
+    i.fas {
+      display: inline-block;
+      width: 1em;
+    }
+  }
+
+  &__price-value,
+  &__price {
+    display: inline-block;
+    line-height: 1rem;
+    font-weight: 400;
+    font-size: .750rem;
+  }
+
+  &__description {
+    font-weight: 500;
+    font-size: .875rem;
+    margin-bottom: 12px;
+  }
+
+  &__value {
+    min-width: 14px;
+    margin-left: -3px;
+  }
+
+  &__currency,
+  &__value {
+    font-size: .750rem;
+  }
+
+  &__divider {
+    border: none;
+    border-top: 1px solid $gray;
+    margin: 16px 0;
+  }
+
+  &__charity-info {
+    color: $squant;
+    font-weight: 400;
+    font-size: .75rem;
+    line-height: 1rem;
+    margin: 0;
+  }
+
+  &__holder {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  &__btn {
+    width: 58px;
+    height: 36px;
+    margin-bottom: 0;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:nth-of-type(odd),
+    &:nth-of-type(even) {
+      margin-left: 0;
+    }
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+
+    &.btn-secondary {
+      color: $black;
+      border-color: $gray;
+
+      &:hover {
+        color: $white;
+        border-color: $blue;
+      }
+    }
+
+    &.btn-selected {
+      color: $white;
+      border-color: $blue;
+      background: $blue;
+      pointer-events: none;
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .donation-cart-new {
+    &__btn {
+      width: 52px;
+      height: 36px;
+      margin-bottom: 0;
+    }
+
+    &__description {
+      font-weight: 700;
+      font-size: .875rem;
+      margin-bottom: 12px;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .donation-cart-new {
+    justify-content: space-between;
+
+    &:not(.donation-cart__hide) {
+      display: flex;
+    }
+
+    &__definition {
+      max-width: 50%;
+    }
+
+    &__details {
+      width: 100%;
+    }
+
+    &__definition {
+      padding-right: 15px;
+    }
+
+    &__btn {
+      width: 56px;
+      height: 36px;
+      margin-bottom: 0;
+    }
+
+    .order-item__remove {
+      position: static;
+      margin-left: auto;
+      display: block;
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .donation-cart-new {
+    &__holder {
+      width: 588px;
+    }
+
+    &__btn {
+      width: 56px;
+      height: 36px;
+      margin-bottom: 0;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .donation-cart-new {
+    &__holder {
+      width: 100%;
+    }
+  }
+}
+
+@media (min-width: 350px) and (max-width: 575px) {
+  .donation-cart-new {
+    &__btn {
+      width: 72px;
+    }
+  }
+}

package/src/scss/components/_payments-checkout.scss

@@ -26,7 +26,8 @@
   }
 
   &-klarna {
-    display: block;
+    display: flex;
+    align-items: center;
     height: 30px;
     width: 48px;
   }

package/src/scss/components/_payments-v2.scss

@@ -52,6 +52,14 @@
 }
 
 @include media-breakpoint-up(sm) {
+  .payways {
+    max-width: 100%;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+@include media-breakpoint-up(md) {
   .payways {
     max-width: 100%;
     flex-direction: row;

package/src/scss/components/_tooltip.scss

@@ -0,0 +1,19 @@
+.tooltip {
+  filter: drop-shadow(0 0 8px rgba(0, 0, 0, .12));
+  position: absolute;
+
+  .tooltip-inner {
+    background: $white;
+    color: $gray-dark;
+    padding: 8px 16px !important;
+    border-radius: 4px;
+    font-weight: 400;
+    font-size: .875rem;
+    line-height: 1.375rem;
+    max-width: 340px !important;
+  }
+
+  .arrow:before {
+    border-top-color: $white;
+  }
+}

package/src/scss/components/checkout-payment-details-v2.scss

@@ -1,16 +1,121 @@
 @import '../helpers/helpers';
+@import '../components/tooltip';
 
 .checkout-payment-details-v2 {
   .checkout-payment-details {
     margin: 0;
 
+    .warning-required {
+      margin: 16px 0;
+    }
+
+    .addr-billie.billie-form {
+      margin-bottom: 24px;
+    }
+
+    .address-postcode {
+      margin-bottom: 24px;
+    }
+
+    &__populated-address {
+      display: block;
+      margin-top: -11px;
+    }
+
+    &__populated-text {
+      margin-right: 4px;
+    }
+
+    .radio-expanded-content {
+      display: flex;
+      flex-wrap: wrap;
+
+      > .form-row {
+        &:first-child {
+          margin-top: 16px;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    .radio-option-wrapper {
+      position: relative;
+    }
+
+    .radio-group {
+      display: flex;
+      flex-direction: column;
+
+      > .form-row:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .billie-tooltip {
+      right: auto;
+      top: 0;
+      transform: none;
+      left: 252px;
+    }
+
+    .form-row.radio-group {
+      margin-bottom: 0;
+    }
+
+    .form-row__field.radio-group {
+      margin-top: 6px;
+    }
+
+    .rbn_align {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 24px;
+    }
+
     .form-row {
       padding: 0;
+      width: 100%;
+      margin-left: 0;
+      margin-right: 0;
+      margin-bottom: 16px;
 
       &__field-klarna {
         margin-bottom: -10px;
       }
 
+      &__label,
+      &__error,
+      &__info,
+      &__field {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      &.first-name {
+        flex: 0 0 100%;
+        margin-top: 16px;
+      }
+
+      &.last-name {
+        flex: 0 0 100%;
+      }
+
+      .registered-business {
+        margin-top: 16px;
+        padding-right: 0;
+      }
+
+      .reg-number {
+        padding-left: 0;
+      }
+
+      .registered-label {
+        margin-right: 8px;
+      }
+
       &__action {
         &:before {
           content: none;
@@ -125,6 +230,73 @@
       }
     }
 
+    &__billie {
+      .billie-info {
+        background: $white;
+        margin-bottom: 20px;
+        padding: 20px;
+
+        &__header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 20px;
+          padding-bottom: 20px;
+          border-bottom: 1px solid $gray;
+
+          &_title {
+            margin: 0;
+            font-size: 1rem;
+            font-weight: 500;
+            line-height: 1.5rem;
+          }
+        }
+
+        &__list {
+          padding: 0;
+          margin: 0;
+          list-style-type: none;
+          border-bottom: 1px solid $gray;
+
+          &_item {
+            font-size: 0.875rem;
+            font-weight: 400;
+            line-height: 1.375rem;
+            height: 30px;
+            display: flex;
+            align-items: center;
+
+            .fa-check {
+              margin-right: 10px;
+            }
+
+            &:last-child {
+              margin-bottom: 15px;
+            }
+          }
+        }
+
+        &__learn-more {
+          display: flex;
+          align-items: center;
+          border-bottom: 1px solid $gray;
+        }
+
+        &__accept-info {
+          margin-top: 15px;
+          margin-bottom: 10px;
+          color: $warm-grey;
+          font-weight: 400;
+          font-size: 0.75rem;
+          line-height: 1rem;
+        }
+
+        &__link {
+          color: $black;
+        }
+      }
+    }
+
     .apple {
       &-logo {
         height: 28px;
@@ -207,6 +379,11 @@
         .checkout-payment-details__descr {
           margin-bottom: 30px;
 
+          .form-row.first-name {
+            flex: 0 0 50%;
+            max-width: 50%;
+          }
+
           &::after {
             position: absolute;
             content: '';
@@ -221,6 +398,66 @@
   }
 }
 
+@include media-breakpoint-up(sm) {
+  .checkout-payment-details-v2 {
+    .checkout-payment-details {
+      margin: 0;
+
+      &__populated-address {
+        display: flex;
+      }
+
+      .radio-expanded-content {
+        align-items: baseline;
+      }
+
+      .form-row {
+        &.first-name {
+          flex: 0 0 50%;
+          max-width: 50%;
+          padding-right: 8px;
+
+          .form-row__label,
+          .form-row__field,
+          .form-row__error {
+            padding: 0;
+          }
+        }
+
+        &.registered-business {
+          flex: 0 0 50%;
+          max-width: 50%;
+          margin-bottom: 0;
+        }
+
+        &.reg-number {
+          flex: 0 0 50%;
+          max-width: 50%;
+          margin-bottom: 0;
+          padding-left: 8px;
+        }
+
+        &.registered-business {
+          padding-right: 8px;
+        }
+
+        &.last-name {
+          flex: 0 0 50%;
+          max-width: 50%;
+          padding-left: 8px;
+          margin-top: 16px;
+
+          .form-row__label,
+          .form-row__field,
+          .form-row__error {
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
 @include media-breakpoint-up(md) {
   .checkout-payment-details-v2 {
     .checkout-payment-details {

package/src/scss/components/loader.scss

@@ -25,6 +25,7 @@
 
     .paypal-checkout-logo,
     .klarna-checkout-logo,
+    .billie-checkout-logo,
     .clearpay-checkout-logo {
       margin-bottom: 25px;
     }
@@ -113,6 +114,13 @@
   margin-bottom: 20px;
 }
 
+.billie-spinner-logo {
+  display: block;
+  background: url('../img/billie-spinner.svg') no-repeat;
+  height: 38px;
+  width: 111px;
+}
+
 .apple-spinner-logo {
   height: 58px;
   width: 136px;

package/src/scss/components/my-account/_active-orders.scss

@@ -171,6 +171,7 @@
       'header viewMore'
       'orderDetails orderDetails'
       'consignmentInfo consignmentInfo'
+      'paymentStatus paymentStatus'
       'shipment shipment';
 
       .order-header {
@@ -236,6 +237,7 @@
       grid-template-areas:
       'header consignmentInfo viewMore'
       'orderDetails orderDetails orderDetails'
+      'paymentStatus paymentStatus paymentStatus'
       'shipment shipment shipment';
       grid-template-columns: auto auto 1fr;
       align-items: center;

package/src/scss/components/my-account/_payment-status.scss

@@ -0,0 +1,84 @@
+.payment-status {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  background-color: $gray-bg;
+  gap: 8px;
+  margin-top: 12px;
+  border-radius: 4px;
+  grid-area: paymentStatus;
+
+  &__logo {
+    width: 38px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    .payments-status__image {
+      max-width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+
+  &__content {
+    font-size: .75rem;
+    line-height: 1rem;
+  }
+
+  &__text {
+    font-size: .75rem;
+    font-weight: 400;
+    line-height: 1rem;
+  }
+
+  &__title {
+    font-weight: 500;
+  }
+
+  &--success {
+    background-color: #67a5091a;
+  }
+
+  &--overdue {
+    background-color: #cf000f1a;
+  }
+
+  &--partial {
+    background-color: #ffc4391a;
+  }
+}
+
+@include media-breakpoint-up(xs) {
+  .wismo__order-pay .payment-status {
+    margin-top: 8px;
+
+    &--default {
+      background-color: $white;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .payment-status {
+    &__content {
+      flex-direction: row;
+      gap: 8px;
+    }
+  }
+
+  .wismo__order-pay .payment-status {
+    &__content {
+      flex-direction: column;
+      gap: 0;
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .payment-status {
+    margin-top: 16px;
+  }
+}

package/src/scss/components/price-block-v2-critical.scss

@@ -19,6 +19,10 @@
       border: 1px solid $gray;
       margin-bottom: 8px;
     }
+
+    &__billie-payment {
+      margin-bottom: 8px;
+    }
   }
 
   .pdp-price__price,

package/src/scss/components/price-block-v2.scss

@@ -20,6 +20,10 @@
       margin-bottom: 8px;
     }
 
+    &__billie-payment {
+      margin-bottom: 8px;
+    }
+
     &_bw {
       outline: 4px solid $warm-grey;
       border-left: 0;

package/src/scss/pages/_checkout-confirmation-new.scss

@@ -253,7 +253,8 @@
         &__klarna,
         &__apple,
         &__google,
-        &__clearpay {
+        &__clearpay,
+        &__billie {
           display: flex;
           flex-direction: column;
         }
@@ -273,7 +274,8 @@
         }
 
         &__klarna,
-        &__clearpay {
+        &__clearpay,
+        &__billie {
           margin-bottom: 0;
         }
       }
@@ -325,11 +327,16 @@
           &__klarna,
           &__apple,
           &__google,
-          &__clearpay {
+          &__clearpay,
+          &__billie {
             flex-direction: row;
             justify-content: space-between;
           }
 
+          &__billie {
+            align-items: center;
+          }
+
           &__paypal,
           &__apple,
           &__google {

package/src/scss/pages/checkout-new.scss

@@ -6,7 +6,10 @@
 @import 'checkout-confirmation-new';
 @import '../components/checkout_order';
 @import '../components/payments-checkout';
+@import "../components/donation-cart-new";
 @import 'checkout-tradepro';
+@import '../components/billie-online-messaging';
+@import '../components/billie-modal';
 
 @import 'checkout-sign-in';
 @import 'checkout_delivery-details';

package/src/scss/pages/my-account-v2.scss

@@ -9,7 +9,9 @@
 @import '../components/my-account/barcode';
 @import '../components/my-account/discount';
 @import '../components/my-account/clipboard-code';
+@import '../components/my-account/payment-status';
 @import '../libs/font-awesome-icons';
+@import '../components/my-account/payment-status';
 
 .my-account {
   margin: 0;

package/src/scss/pages/page_wismo-details.scss

@@ -1,4 +1,5 @@
 @import '../helpers/helpers';
+@import '../components/my-account/payment-status';
 
 .page_wismo-details {
   .layout_right-aside .page-header::before {