@licklist/design 0.58.11 → 0.59.0-dev.0

package/src/setting/admin/AdminSettingForm.tsx

@@ -11,7 +11,7 @@ import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import { Link } from "react-router-dom";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { ProviderType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
+import { ProvidableType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
 import Icon from "../../static/Icon";
 import { PaymentFeeForm, PaymentFeeFormFieldValues } from "./PaymentFeeForm";
 import { Currency } from "../../types/currency";
@@ -33,7 +33,7 @@ export interface AdminSettingFormProps extends HasPermissionProp {
   providerMetadata: {
     country?: string;
     providableId?: number;
-    providerType?: ProviderType;
+    providerType?: ProvidableType;
   };
 }
 

package/src/sortable-tree/SortableTreeItem.tsx

@@ -374,7 +374,7 @@ export function SortableTreeItem({
                   items={sortableItems}
                   strategy={verticalListSortingStrategy}
                 >
-                  <Collapse  in={expanded}>
+                  <Collapse in={expanded}>
                     <div className="ml-0">{children}</div>
                   </Collapse>
                 </SortableContext>

package/src/static/manual-date-picker/ManualDatePicker.tsx

@@ -61,9 +61,9 @@ export const ManualDatePicker = ({
             disabled={isDisabled}
           >
             <option value="">{t("Design:monthShort")}</option>
-            {MONTHS_ARRAY.map((key) => (
-              <option key={key} value={key}>
-                {key}
+            {MONTHS_ARRAY.map((object) => (
+              <option key={object.key} value={object.value}>
+                {object.key}
               </option>
             ))}
           </Form.Control>

package/src/static/manual-date-picker/constants/index.ts

@@ -1,5 +1,9 @@
-import { generateDatesArray, generateYearsArray } from "../utils";
+import {
+  generateDatesArray,
+  generateMonthsOptionsArray,
+  generateYearsArray,
+} from "../utils";
 
 export const DAYS_ARRAY = generateDatesArray(1, 31, 1);
-export const MONTHS_ARRAY = generateDatesArray(1, 12, 1);
+export const MONTHS_ARRAY = generateMonthsOptionsArray();
 export const YEARS_ARRAY = generateYearsArray();

package/src/static/manual-date-picker/utils/index.ts

@@ -4,6 +4,17 @@ export const generateDatesArray = (start: number, end: number, step: number) =>
     (_, index) => 1 + index * step
   );
 
+export const generateMonthsOptionsArray = () =>
+  Array.from({ length: 12 }, (_, index) => {
+    const value = index + 1;
+    let key = String(value);
+    if (value < 10) {
+      key = `0${key}`;
+    }
+
+    return { key, value };
+  });
+
 export const generateYearsArray = () => {
   const currentYear = new Date().getFullYear();
   const ageBackYear = currentYear - 100;

package/src/static/switch/BooleanSwitch.tsx

@@ -23,7 +23,7 @@ export function BooleanSwitch({
   const { t } = useTranslation("Design");
 
   const options: SelectItem[] = [
-    { id: 1, value: firstValueTitle ??  t("yes") },
+    { id: 1, value: firstValueTitle ?? t("yes") },
     { id: 0, value: secondValueTitle ?? t("no") },
   ];
 

package/src/styles/iframe-events/Card.scss

@@ -1,4 +1,5 @@
 @import "../snippet-templates/snippetVariables";
+@import "../themes//bookedit/variables";
 
 .iframe-event-card {
   position: relative;
@@ -18,12 +19,27 @@
     background-size: cover;
     background-position: center;
     cursor: pointer;
-    border: 1px solid transparent;
     border-radius: 0.5rem;
   }
 
   .card-body {
-    padding: 0.5rem 0 0.875rem;
+    padding: 0.5rem 0 0.875rem 0;
+
+    @include media-breakpoint-down(sm) {
+      padding: 1rem 0;
+    }
+  }
+
+  &__info-icon {
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    background-color: "#ffffff";
+    border-radius: 1.5rem;
+    padding: 0 0.5rem;
+    font-size: 0.75rem;
+    font-weight: $white;
+    border: 1px solid $black;
   }
 
   &__title {
@@ -33,7 +49,7 @@
     line-height: 1.25rem;
     cursor: pointer;
     margin-bottom: 0.5rem;
-    font-size: 1.125rem;
+    font-size: 0.95rem;
   }
 
   &__label {
@@ -82,7 +98,8 @@
         color: $snippet-elements-button-color;
         border: none;
         background-color: $snippet-elements-button-background-color;
-        box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
+        box-shadow: 0 0 0 $input-btn-focus-width
+          $snippet-elements-button-background-color;
       }
 
       &:disabled {
@@ -95,14 +112,14 @@
     &:focus,
     &.focus {
       &:not(:disabled) {
-        opacity: .7;
+        opacity: 0.7;
       }
     }
 
     &:active,
     &.active {
       &:not(:disabled) {
-        opacity: .8;
+        opacity: 0.8;
       }
     }
   }
@@ -123,7 +140,7 @@
   }
 
   .card-text {
-    font-size: 0.875rem;
+    font-size: 0.82rem;
   }
 
   &.event-info {
@@ -202,7 +219,6 @@
 
   @media (max-width: 576px) {
     &.list-view {
-
       .card-image {
         margin-right: 0.5rem;
       }

package/src/styles/iframe-events/PoweredBy.scss

@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 0.75rem;
+    padding: 0 0.75rem 0 2rem;
     height: 2rem;
     width: 100%;
     font-size: 0.75rem;
@@ -27,4 +27,4 @@
       color: $blue;
     }
   }
-}
+}

package/src/styles/iframe-order-process/IframeOrderProcess.scss

@@ -46,9 +46,8 @@
     color: $snippet-page-header-steps-body-color;
     transition: $color-transition;
     margin-left: 0.5rem;
-    width: 6rem;
     word-break: break-word;
-    font-size: 0.75rem;
+    font-size: 0.875rem;
 
     @include media-breakpoint-down(sm) {
       display: none;
@@ -58,12 +57,35 @@
 
 .payment-booking-summary {
   transition: $color-transition;
-  background-color: transparent;
-  border: 1px solid transparent;
   border-radius: $iframe-border-radius;
   font-weight: 400;
   font-size: 0.875rem;
 
+  .payment-page-toggle {
+    p {
+      font-size: 1rem;
+      font-weight: 600;
+    }
+    .price {
+      font-weight: 700;
+    }
+  }
+
+  .payment-metadata {
+    font-weight: 500;
+  }
+
+  .total {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    div {
+      font-size: 1rem;
+      font-weight: 700;
+    }
+  }
+
   b {
     display: block;
     font-size: 1rem;
@@ -115,6 +137,15 @@
 
   .cart-items {
     font-weight: 400;
+    margin-bottom: 1.4rem;
+    border-bottom: 2px solid $separator-color;
+
+    .people {
+      margin-bottom: 0;
+      p {
+        margin-bottom: 0;
+      }
+    }
 
     .empty-cart {
       margin: 1rem 0;
@@ -127,8 +158,11 @@
     }
 
     .products-by-menu-step {
+      margin-top: 1.4rem;
+      font-size: 0.875rem;
       .title {
-        font-weight: 500;
+        font-size: 1rem;
+        font-weight: 600;
       }
 
       .categories {
@@ -138,8 +172,8 @@
       }
 
       .products {
-        margin-top: 0.5rem;
-
+        margin-top: 1.4rem;
+        font-size: 0.875rem;
         .product {
           margin: 0.5rem 0;
 
@@ -150,6 +184,15 @@
               margin-bottom: 0.5rem;
             }
           }
+
+          .name {
+            font-weight: 600;
+          }
+
+          .price {
+            font-weight: 400;
+            font-size: 0.875rem;
+          }
         }
 
         &:not(:last-child) {
@@ -170,6 +213,12 @@
         margin: 0 0 0.5rem;
 
         .title {
+          font-size: 1rem;
+          font-weight: 600;
+        }
+
+        .metadata {
+          font-size: 0.95rem;
           font-weight: 600;
         }
       }
@@ -183,19 +232,7 @@
   }
 
   hr {
-    margin: 0;
-    border-width: 2px;
-    border-color: $separator-color;
-  }
-
-  .products {
-    font-size: 0.75rem;
-
-    .product {
-      .name {
-        font-weight: 500;
-      }
-    }
+    margin-bottom: 1.5rem;
   }
 }
 

package/src/styles/iframe-page/Page.scss

@@ -21,6 +21,7 @@
 
   @include media-breakpoint-down(sm) {
     height: 100svh;
+    min-width: auto;
   }
 
   .header-block {

package/src/styles/iframe-page/PageBody.scss

@@ -1,3 +1,4 @@
+// TODO when all iframe pages will be ready, think how we can combine it all in page-body style
 .page-body {
   display: flex;
   background-color: transparent;
@@ -12,9 +13,6 @@
   .left-block {
     flex: 1;
     align-items: stretch;
-    border-radius: 0.5rem;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
     padding: 1rem;
     background-color: $snippet-page-body-left-block-background-color;
     border: 0;
@@ -33,7 +31,6 @@
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
-
       .title {
         color: $snippet-elements-body-color;
         margin: 0;
@@ -64,7 +61,7 @@
       overflow-x: hidden;
       scrollbar-width: thin;
       .iframe-event-card {
-        border-bottom: 2px solid $separator-color;
+        border-bottom: 1px solid $separator-color;
       }
 
       @include media-breakpoint-down(sm) {
@@ -81,9 +78,7 @@
   }
 
   .right-block {
-    margin-left: 1rem;
-    border-radius: 0.5rem;
-    height: calc(100% - 1rem);
+    height: 100%;
     max-width: 17.5rem;
     min-width: 17.5rem;
     width: 100%;
@@ -115,7 +110,7 @@
       }
 
       .collapse {
-        max-height: calc(100vh - 19rem);
+        max-height: calc(100vh - 15rem);
         transition: none 0s ease 0s;
 
         &.show {
@@ -125,7 +120,7 @@
         }
 
         @include media-breakpoint-down(sm) {
-          max-height: 7.5rem;
+          max-height: 100%;
         }
       }
       .collapse-with-people-input {
@@ -151,8 +146,14 @@
     }
 
     .iframe-event-card {
-      background-color: transparent;
-      border-color: transparent;
+      border: none;
+
+      .card-image {
+        border-radius: 0;
+      }
+      .card-body {
+        padding-left: 1rem;
+      }
     }
 
     .price {
@@ -262,3 +263,24 @@
     }
   }
 }
+
+.event-list-page-body {
+  overflow: auto;
+  .left-block {
+    .navigation {
+      font-size: 1.125rem;
+      font-weight: 500;
+      padding-bottom: 2.625rem;
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-top: 0.125rem;
+
+      .title {
+        position: absolute;
+        color: $snippet-elements-body-color;
+        margin: 0;
+      }
+    }
+  }
+}

package/src/styles/iframe-page/PageHeader.scss

@@ -20,55 +20,57 @@ $base-height: 2.5rem;
       transition: $color-transition;
       border: 0;
     }
+  }
+}
 
-    .button-wrapper {
-      background-color: $snippet-page-header-steps-close-button-background-color;
-      height: $base-height;
+.iframe-page {
+  .button-wrapper {
+    background-color: $snippet-page-header-steps-close-button-background-color;
+    height: $base-height;
+    width: $base-height;
+    border-radius: $base-height;
+    transition: $color-transition;
+
+    .close-button {
+      font-size: 1.25rem;
       width: $base-height;
-      border-radius: $base-height;
+      height: $base-height;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: $snippet-page-header-steps-close-button-border-color;
       transition: $color-transition;
 
-      .close-button {
-        font-size: 1.25rem;
-        width: $base-height;
-        height: $base-height;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: $snippet-page-header-steps-close-button-border-color;
-        transition: $color-transition;
-
-        &:hover {
-          cursor: pointer;
-        }
+      &:hover {
+        cursor: pointer;
       }
+    }
 
-      &.close-button {
-        margin-left: 1rem;
-      }
+    &.close-button {
+      margin-left: 1rem;
+    }
 
-      .back-button {
-        font-size: 2rem;
-        width: $base-height;
-        height: $base-height;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: lighter;
-        color: $snippet-page-header-steps-close-button-border-color;
-        transition: $color-transition;
+    .back-button {
+      font-size: 2rem;
+      width: $base-height;
+      height: $base-height;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: lighter;
+      color: $snippet-page-header-steps-close-button-border-color;
+      transition: $color-transition;
 
-        &:hover {
-          cursor: pointer;
-        }
+      &:hover {
+        cursor: pointer;
       }
+    }
 
-      &.back-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-right: 1rem;
-      }
+    &.back-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 1rem;
     }
   }
 }

package/src/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -1,10 +1,52 @@
 .payment_link {
+  padding: 0 0 1rem 0;
+
+  .button-wrapper {
+    top: 2rem;
+    right: 2rem;
+    position: absolute;
+    z-index: 100;
+  }
+
   .page-body {
+    padding: 0;
+    height: calc(100vh - 2rem) !important;
+
+    .navigation {
+      display: block;
+      @include media-breakpoint-down(sm) {
+        padding: 0;
+      }
+    }
+
+    .right-block {
+      margin-left: 0;
+      height: calc(100vh - 2rem);
+      max-height: calc(100vh - 1rem);
+      @include media-breakpoint-down(sm) {
+        width: calc(100% - 2rem);
+        max-width: unset;
+        position: inherit;
+        overflow: visible;
+        margin: 0 1rem 1rem;
+        height: unset;
+        min-height: unset;
+        max-height: 100%;
+      }
+    }
+
     .left-block {
       .left-block-container {
         position: relative;
         max-height: 100%;
 
+        .payment-title {
+          font-size: 0.875rem;
+          font-weight: 600;
+          align-items: center;
+          margin-left: 0.5rem;
+        }
+
         .ryft-payment-form {
           .submit-button-wrapper {
             margin: -1rem 0 1rem;
@@ -13,7 +55,55 @@
               width: 100%;
             }
           }
+          #mobile-pay-divider-container {
+            display: flex;
+            position: relative;
+            margin-bottom: 1rem;
+            #mobile-pay-divider-text {
+              margin-right: 1rem;
+              font-size: 0.875rem;
+              font-weight: 600;
+            }
+            #mobile-pay-divider {
+              width: 100%;
+              border-bottom: 1px #dfdfdf solid;
+              margin-bottom: 0.6rem;
+            }
+          }
 
+          #card-title-container {
+            height: auto;
+            border: none;
+            margin-bottom: 0.5rem;
+            text-align: left;
+            :first-child {
+              font-size: 1rem;
+              font-weight: 600;
+              margin-bottom: 1rem;
+            }
+
+            .form-label {
+              margin-bottom: 0.5rem;
+            }
+          }
+          .mobile-pay-title {
+            display: block;
+            font-weight: 600;
+            font-size: 1rem;
+            color: black;
+            padding: 0;
+            font-style: normal;
+            font-family: inherit;
+            margin-bottom: 1rem;
+          }
+        }
+        .form {
+          .input {
+            border: 2px solid #525252 !important;
+          }
+        }
+
+        .ryft-payment-form {
           @include media-breakpoint-up(md) {
             .submit-button-wrapper {
               max-width: 15.5rem;
@@ -22,10 +112,9 @@
 
           // it's style for Google and Apple pay container, for unknown reasons we can't move this html elements with appendChild or replaceChild
           .ryft-pay-grid {
-            position: absolute !important;
-            top: 10rem;
             width: 100%;
             max-width: 15.5rem;
+            margin-bottom: 1rem;
           }
           .ryft-pay-apple-pay-button {
             border-radius: 0.25rem;
@@ -36,6 +125,36 @@
           display: none !important;
         }
       }
+      @include media-breakpoint-down(sm) {
+        .left-block-container {
+          max-height: 100%;
+          overflow: visible;
+        }
+      }
+    }
+
+    @include media-breakpoint-down(sm) {
+      flex-direction: column-reverse;
+      overflow: scroll;
+
+      @include media-breakpoint-down(sm) {
+        .left-block {
+          min-height: 100%;
+        }
+        .right-block {
+          margin: 0 auto;
+          width: 100%;
+          .children-wrapper {
+            .accordion {
+              .collapse {
+                overflow: visible;
+                overflow-x: unset;
+                scrollbar-width: unset;
+              }
+            }
+          }
+        }
+      }
     }
   }
   ::-webkit-scrollbar {
@@ -62,3 +181,7 @@
     }
   }
 }
+
+#ryft-threeDSMethodIframe {
+  display: none;
+}

package/src/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14.25rem;
+      height: 14rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);