@sc-360-v2/storefront-cms-library 0.3.57 → 0.3.58

package/dist/checkout.scss

@@ -171,8 +171,9 @@ $dark-color: #343a40;
       .chk_checkout_accordion {
         display: flex;
         padding: var(--_ctm-lt-pg);
+        gap: 4px;
         flex-direction: column;
-        gap: 24px;
+        // gap: 24px;
         // gap: var(--_ctm-lt-te-ad-it-gp);
         word-break: keep-all;
         padding-bottom: 24px;
@@ -220,11 +221,28 @@ $dark-color: #343a40;
         .accordion {
           border-radius: 4px;
           display: flex;
-          gap: 16px;
+          // gap: 16px;
           // gap: var(--_ctm-lt-an-hg-ad-ve-gp);
           flex-direction: column;
+          transition: max-height 800ms ease-in;
+          &.open {
+            transition: max-height 800ms ease-in;
+            .accordion-header {
+              background-color: var(--_gray-200);
+            }
+            .accordion-body {
+              transition: max-height 800ms ease-in;
+              max-height: 2000px;
+              padding-block: 12px 24px;
+              .shipping-address {
+                max-height: fit-content;
+                transition: max-height 800ms ease-in;
+              }
+            }
+          }
 
           .accordion-header {
+            height: 55px;
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -520,6 +538,11 @@ $dark-color: #343a40;
 
           .accordion-body {
             // margin-bottom: 16px;
+            transition: max-height 800ms ease-in;
+
+            max-height: 0px;
+            overflow: hidden;
+            padding: 0;
             .summary {
               .chk_shipping_method_label {
                 display: flex;
@@ -609,8 +632,16 @@ $dark-color: #343a40;
             }
 
             .shipping-address {
+              transition: max-height 800ms ease-in;
+              max-height: 0;
               display: flex;
               flex-direction: column;
+              .btn_link {
+                color: var(--_primary-400);
+                &:hover {
+                  text-decoration: underline;
+                }
+              }
               // gap: 24px;
               background-color: var(
                 --_ctm-mob-dn-an-tb-sg-ds-as-wr-as-cr-bd-cr,
@@ -889,12 +920,16 @@ $dark-color: #343a40;
                 display: flex;
                 flex-direction: column;
                 gap: 24px;
+                max-width: 485px;
               }
 
               .shipping_address_heading_container {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
+                font-size: 18px;
+                font-weight: 600;
+                color: var(--_gray-900);
               }
 
               form {
@@ -2168,6 +2203,29 @@ $dark-color: #343a40;
               .gift_crd_chk_payment_option {
                 border: 1px solid var(--_gray-300);
                 border-radius: 6px;
+                .add_gift_card {
+                  display: flex;
+                  gap: 12px;
+                  padding: 16px;
+
+                  .gc_icon {
+                    svg {
+                      width: 18px;
+                      height: 14px;
+                    }
+                  }
+
+                  .gc_info {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 6px;
+
+                    .gc_title {
+                      font-size: 14px;
+                      font-weight: 600;
+                    }
+                  }
+                }
                 .payment_heading {
                   padding: 16px;
                   .chk_payment_options_heading {
@@ -2606,6 +2664,10 @@ $dark-color: #343a40;
                           .chk_payment_section_col_left {
                             display: flex;
                             gap: 12px;
+                            svg {
+                              width: 24px;
+                              height: 24px;
+                            }
                             .chk_payment_section_method {
                               display: flex;
                               flex-direction: column;
@@ -2746,13 +2808,7 @@ $dark-color: #343a40;
                               align-items: center;
                               padding-inline: 12px;
                               gap: 12px;
-                              background-color: var(
-                                --_ctm-mob-dn-an-tb-fm-wr-is-bd-cr,
-                                var(
-                                  --_ctm-tab-dn-an-tb-fm-wr-is-bd-cr,
-                                  var(--_ctm-dn-an-tb-fm-wr-is-bd-cr)
-                                )
-                              );
+
                               border-color: var(
                                 --_ctm-mob-dn-an-tb-fm-wr-is-br-cr,
                                 var(
@@ -2795,6 +2851,10 @@ $dark-color: #343a40;
                               input {
                                 height: inherit;
                                 background-color: var(--_base-white);
+                                &:disabled {
+                                  opacity: 0.8;
+                                  cursor: not-allowed;
+                                }
                               }
                             }
                           }
@@ -3815,6 +3875,7 @@ $dark-color: #343a40;
                           .chk_payment_section_col_left {
                             display: flex;
                             gap: 12px;
+
                             .chk_payment_section_method {
                               display: flex;
                               flex-direction: column;
@@ -4622,10 +4683,7 @@ $dark-color: #343a40;
                     --_ctm-mob-an-tb-bg-as-bg-te-cr,
                     var(--_ctm-tab-an-tb-bg-as-bg-te-cr, var(--_ctm-an-tb-bg-as-bg-te-cr))
                   );
-                  font-weight: var(
-                    --_ctm-mob-an-tb-bg-as-bg-te-ft-wt,
-                    var(--_ctm-tab-an-tb-bg-as-bg-te-ft-wt, var(--_ctm-an-tb-bg-as-bg-te-ft-wt))
-                  );
+                  font-weight: 600;
                   font-size: var(
                     --_ctm-mob-an-tb-bg-as-bg-te-ft-se,
                     var(--_ctm-tab-an-tb-bg-as-bg-te-ft-se, var(--_ctm-an-tb-bg-as-bg-te-ft-se))
@@ -4650,6 +4708,7 @@ $dark-color: #343a40;
                   display: flex;
                   flex-direction: column;
                   gap: 24px;
+                  max-width: 485px;
                 }
 
                 .shipping_address_heading_container {
@@ -4667,13 +4726,16 @@ $dark-color: #343a40;
                     letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
                     text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
                   }
+                  .icon {
+                    cursor: pointer;
+                  }
                 }
 
                 form {
                   display: flex;
                   flex-direction: column;
                   gap: 0.75rem;
-                  max-width: 85%;
+                  // max-width: 85%;
 
                   @media (max-width: 500px) {
                     max-width: 100%;
@@ -4702,10 +4764,7 @@ $dark-color: #343a40;
                 .chk_shipping_address_form_label {
                   // color: var(--_gray-600);
                   // font-size: 14px;
-                  padding: var(
-                    --_ctm-mob-dn-an-tb-fm-wr-ls-pg,
-                    var(--_ctm-tab-dn-an-tb-fm-wr-ls-pg, var(--_ctm-dn-an-tb-fm-wr-ls-pg))
-                  );
+                  padding-bottom: 6px;
                   font-family: var(
                     --_ctm-mob-dn-an-tb-fm-wr-ls-ft-fy,
                     var(--_ctm-tab-dn-an-tb-fm-wr-ls-ft-fy, var(--_ctm-dn-an-tb-fm-wr-ls-ft-fy))
@@ -4756,7 +4815,6 @@ $dark-color: #343a40;
                   // padding: 8px 12px;
                   height: 40px;
                   width: -webkit-fill-available;
-                  height: auto;
                   // background-color: var(--_base-white);
                   // color: var(--_gray-600);
                   // border: 1px solid var(--_gray-300);
@@ -5388,6 +5446,15 @@ $dark-color: #343a40;
               font-family: sans-serif;
               gap: 12px;
 
+              .discard_btn {
+                padding: 12px 16px;
+                border-radius: 4px;
+                color: var(--_gray-600);
+                &:hover {
+                  background-color: var(--_gray-100);
+                }
+              }
+
               input[type="checkbox"] {
                 display: none;
               }
@@ -5588,6 +5655,11 @@ $dark-color: #343a40;
                 }
               }
             }
+            .chk_address_actions {
+              display: flex;
+              gap: 12px;
+            }
+
             .chk_payment-card__note {
               padding: 8px 6px;
               display: flex;
@@ -5673,6 +5745,7 @@ $dark-color: #343a40;
                   display: flex;
                   flex-direction: column;
                   gap: 12px;
+                  max-width: 700px;
 
                   .chk_address {
                     display: flex;
@@ -5856,7 +5929,7 @@ $dark-color: #343a40;
 
                 .right-btn {
                   display: none;
-                  align-items: flex-start;
+                  align-items: center;
                   gap: 24px;
 
                   &:has(.chk_saved_address_button.selected) {
@@ -5864,6 +5937,12 @@ $dark-color: #343a40;
                     height: fit-content;
                     align-items: center;
                   }
+                  .chk_saved_address_button {
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+                    color: var(--_primary-400);
+                  }
                 }
 
                 &:hover {
@@ -6230,6 +6309,10 @@ $dark-color: #343a40;
         input {
           height: inherit;
           background-color: var(--_base-white);
+          &:disabled {
+            opacity: 0.8;
+            cursor: not-allowed;
+          }
         }
       }
       .chk_payment_cred_section_col_left {
@@ -6394,6 +6477,7 @@ $dark-color: #343a40;
       //   color: var(--_primary-500);
       //   text-decoration: underline;
       // }
+      width: fit-content;
       background-color: var(
         --_ctm-mob-dn-an-tb-bs-ty-py-dt-se-bd-cr,
         var(--_ctm-tab-dn-an-tb-bs-ty-py-dt-se-bd-cr, var(--_ctm-dn-an-tb-bs-ty-py-dt-se-bd-cr))
@@ -6666,7 +6750,7 @@ $dark-color: #343a40;
       }
     }
     .chk_secondary_bnt {
-      padding: 12px 24px;
+      padding: 16px 24px;
       background-color: transparent;
       color: var(--_gray-600);
       font-weight: 600;
@@ -6810,6 +6894,10 @@ $dark-color: #343a40;
               outline: 2px solid var(--_primary-100);
               border: 1px solid var(--_primary-300);
             }
+            &:disabled {
+              opacity: 0.8;
+              cursor: not-allowed;
+            }
           }
         }
       }
@@ -6827,6 +6915,10 @@ $dark-color: #343a40;
         input[type="number"] {
           background-color: var(--_base-white);
           padding-right: 10px;
+          &:disabled {
+            opacity: 0.8;
+            cursor: not-allowed;
+          }
         }
         &:focus-within {
           outline: 2px solid var(--_primary-100);
@@ -6923,7 +7015,8 @@ $dark-color: #343a40;
 
       .cc_info {
         display: flex;
-        flex-direction: column;
+        justify-content: space-between;
+        width: 100%;
         gap: 6px;
 
         .cc_title {

package/dist/confirmationModal.scss

@@ -40,6 +40,7 @@
         font-size: 14px;
         color: #475467;
         text-align: left;
+        padding-block-end: 16px;
       }
     }
     .shp-type {

package/dist/dropdownTemplate.scss

@@ -136,6 +136,24 @@
           height: auto !important;
           max-height: 52px;
           border-radius: 4px;
+          .profile_block {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            overflow: hidden;
+            background-color: var(--_gray-200);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: var(--_gray-600);
+            font-size: 12px;
+            font-weight: 600;
+            img {
+              max-width: 100%;
+              max-height: 100%;
+              object-fit: contain;
+            }
+          }
           &:hover {
             background-color: var(--_primary-25);
             color: var(--_primary-400);
@@ -143,8 +161,8 @@
 
           .item-image {
             // background-image: url("");
-            width: 30px;
-            height: 30px;
+            width: 32px;
+            height: 32px;
             background-size: 100%;
             background-position: center;
             border-radius: 50%;
@@ -179,6 +197,45 @@
             width: auto;
           }
         }
+        // .input-checkbox {
+        //   display: flex;
+        //   align-items: center;
+        //   cursor: pointer;
+        //   font-size: 16px;
+        //   user-select: none;
+
+        //   input[type="checkbox"] {
+        //     display: none;
+
+        //     &:checked + .checkmark::after {
+        //       content: "";
+        //       position: absolute;
+        //       left: 5px;
+        //       top: 1px;
+        //       width: 6px;
+        //       height: 12px;
+        //       border: solid #2196f3;
+        //       border-width: 0 2px 2px 0;
+        //       transform: rotate(45deg);
+        //     }
+        //   }
+
+        //   .checkmark {
+        //     height: 18px;
+        //     width: 18px;
+        //     background-color: #eee;
+        //     border: 2px solid #ccc;
+        //     border-radius: 4px;
+        //     margin-right: 10px;
+        //     position: relative;
+        //     transition: all 0.2s ease;
+        //   }
+
+        //   &:hover .checkmark {
+        //     background-color: #f0f0f0;
+        //   }
+        // }
+
         .dropdown-item {
           height: 40px;
           &:not(:last-child) {
@@ -229,17 +286,25 @@
     }
     .dropdown_template_panel_search {
       background: none;
-      padding: 12px;
+      padding: 8px;
       border-bottom: 1px solid #dddddd;
       height: max-content !important;
+      position: relative;
       &:hover {
         background: none !important;
       }
       input {
         width: 100%;
-        padding: 10px 8px;
+        padding-inline: 10px;
         border-radius: 4px;
-        border: 1px solid #dddddd;
+        border: 1px solid var(--_gray-200);
+        height: 40px;
+      }
+      .close_btn {
+        position: absolute;
+        right: 20px;
+        top: 20px;
+        z-index: 10;
       }
     }
   }
@@ -284,4 +349,63 @@
   text-align: center;
   font-weight: 600;
   font-size: 16px;
+  width: 100%;
+  height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+}
+
+// spinner for dropdown
+.spinner_dropdown {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite;
+}
+.spinner_dropdown::before,
+.spinner_dropdown::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 2px solid var(--_primary-300);
+  animation: prixClipFix 2s linear infinite;
+}
+.spinner_dropdown::after {
+  border-color: var(--_primary-500);
+  animation:
+    prixClipFix 2s linear infinite,
+    rotate 0.5s linear infinite reverse;
+  inset: 6px;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes prixClipFix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  75% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
 }