wickes-css2 2.98.0-billie.4 → 2.98.0-develop.1

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

@@ -1,121 +1,16 @@
 @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;
@@ -230,73 +125,6 @@
       }
     }
 
-    &__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;
@@ -379,11 +207,6 @@
         .checkout-payment-details__descr {
           margin-bottom: 30px;
 
-          .form-row.first-name {
-            flex: 0 0 50%;
-            max-width: 50%;
-          }
-
           &::after {
             position: absolute;
             content: '';
@@ -398,66 +221,6 @@
   }
 }
 
-@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,7 +25,6 @@
 
     .paypal-checkout-logo,
     .klarna-checkout-logo,
-    .billie-checkout-logo,
     .clearpay-checkout-logo {
       margin-bottom: 25px;
     }
@@ -114,13 +113,6 @@
   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,7 +171,6 @@
       'header viewMore'
       'orderDetails orderDetails'
       'consignmentInfo consignmentInfo'
-      'paymentStatus paymentStatus'
       'shipment shipment';
 
       .order-header {
@@ -237,7 +236,6 @@
       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/_barcode.scss

@@ -0,0 +1,58 @@
+.barcode {
+  margin-top: 16px;
+  padding: 12px;
+  background: $white;
+  border-radius: 4px;
+  color: $gray-dark;
+  position: relative;
+  font-size: .75rem;
+  line-height: 1rem;
+
+  &__discount {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+
+    img {
+      border-radius: 40px;
+      width: 100%;
+      max-width: 58px;
+    }
+  }
+
+  &__content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    p {
+      margin-bottom: 0;
+      margin-left: 8px;
+      font-weight: 500;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .custom-icon {
+      width: 13px;
+      height: auto;
+    }
+  }
+
+  &__image {
+    display: flex;
+
+    svg {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  &__code {
+    text-align: center;
+    margin-bottom: 0;
+  }
+}

package/src/scss/components/my-account/_clipboard-code.scss

@@ -0,0 +1,77 @@
+.clipboard-code {
+  background: rgba(255, 255, 255, .08);
+  border-radius: 4px;
+  padding: 16px;
+
+  .icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+  }
+
+  .title {
+    margin-bottom: 0;
+    font-weight: 700;
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+
+  .subtitle {
+    display: inline-block;
+    font-weight: 400;
+    font-size: .875rem;
+    line-height: 1.375rem;
+  }
+
+  .icon {
+    color: $blue-satin;
+    font-size: 1.35rem;
+  }
+
+  .custom-icon path {
+    fill: $blue-satin;
+  }
+
+  &__content {
+    margin-left: 8px;
+  }
+
+  &__cta {
+    margin-top: 4px;
+    display: flex;
+    align-items: center;
+
+    .btn--icon {
+      padding: 4px;
+      margin-left: 4px;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      display: inline-flex;
+
+      .icon-copy {
+        width: 14px;
+        height: auto;
+        color: $white;
+      }
+    }
+  }
+
+  &__description {
+    margin-top: 16px;
+    color: rgba(255, 255, 255, .80);
+
+    p {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      margin-bottom: 0;
+    }
+
+    .link {
+      color: inherit;
+    }
+  }
+}

package/src/scss/components/my-account/_discount.scss

@@ -0,0 +1,51 @@
+.discount {
+  background: rgba(255, 255, 255, .08);
+  border-radius: 4px;
+  padding: 16px;
+
+  .icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+  }
+
+  .title {
+    margin-bottom: 0;
+    font-weight: 700;
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+
+  .subtitle {
+    display: inline-block;
+    font-weight: 400;
+    font-size: .875rem;
+    line-height: 1.375rem;
+  }
+
+  &__content {
+    display: flex;
+
+    .subtitle {
+      margin: 4px 0 0;
+    }
+
+    .icon {
+      font-size: 1.44rem;
+      height: 18px;
+      color: $blue-satin;
+    }
+  }
+
+  .barcode__image {
+    svg {
+      margin: 8px 0;
+    }
+  }
+
+  &__code {
+    margin-left: 8px;
+  }
+}

package/src/scss/emulation.scss

@@ -10,7 +10,7 @@
 }
 
 [data-logged-in='false'] {
-  visibility: hidden;
+  display: none;
 }
 
 // sass-lint:disable no-important

package/src/scss/helpers/_mixins.scss

@@ -147,3 +147,12 @@
 @mixin line-height($line-height-px) {
   line-height: #{$line-height-px / 16}rem;
 }
+
+@mixin icon-wrap($width: 24px, $height: 24px, $font-size-px: 16) {
+  width: $width;
+  height: $height;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: #{$font-size-px / 16}rem;
+}

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

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