@licklist/design 0.59.0-dev.8 → 0.59.0

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

@@ -13,6 +13,9 @@
   .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;
@@ -31,6 +34,7 @@
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
+
       .title {
         color: $snippet-elements-body-color;
         margin: 0;
@@ -61,7 +65,7 @@
       overflow-x: hidden;
       scrollbar-width: thin;
       .iframe-event-card {
-        border-bottom: 1px solid $separator-color;
+        border-bottom: 2px solid $separator-color;
       }
 
       @include media-breakpoint-down(sm) {
@@ -110,7 +114,7 @@
       }
 
       .collapse {
-        max-height: calc(100vh - 15rem);
+        max-height: calc(100vh - 19rem);
         transition: none 0s ease 0s;
 
         &.show {
@@ -120,7 +124,7 @@
         }
 
         @include media-breakpoint-down(sm) {
-          max-height: 100%;
+          max-height: 7.5rem;
         }
       }
       .collapse-with-people-input {
@@ -146,14 +150,8 @@
     }
 
     .iframe-event-card {
-      border: none;
-
-      .card-image {
-        border-radius: 0;
-      }
-      .card-body {
-        padding-left: 1rem;
-      }
+      background-color: transparent;
+      border-color: transparent;
     }
 
     .price {
@@ -263,24 +261,3 @@
     }
   }
 }
-
-.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,57 +20,55 @@ $base-height: 2.5rem;
       transition: $color-transition;
       border: 0;
     }
-  }
-}
-
-.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;
+    .button-wrapper {
+      background-color: $snippet-page-header-steps-close-button-background-color;
       height: $base-height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $snippet-page-header-steps-close-button-border-color;
+      width: $base-height;
+      border-radius: $base-height;
       transition: $color-transition;
 
-      &:hover {
-        cursor: pointer;
+      .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;
+        }
       }
-    }
 
-    &.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

@@ -47,127 +47,141 @@
           margin-left: 0.5rem;
         }
 
+        .ryft-payment-form {
+          .submit-button-wrapper {
+            margin: -1rem 0 1rem;
+
+            button {
+              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;
           }
         }
 
-        @include media-breakpoint-down(sm) {
-          .left-block-container {
-            max-height: 100%;
-            overflow: visible;
+        .ryft-payment-form {
+          @include media-breakpoint-up(md) {
+            .submit-button-wrapper {
+              max-width: 15.5rem;
+            }
+          }
+
+          // 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 {
+            width: 100%;
+            max-width: 15.5rem;
+            margin-bottom: 1rem;
+          }
+          .ryft-pay-apple-pay-button {
+            border-radius: 0.25rem;
           }
         }
-      }
 
+        .divider {
+          display: none !important;
+        }
+      }
       @include media-breakpoint-down(sm) {
-        flex-direction: column-reverse;
-        overflow: scroll;
+        .left-block-container {
+          max-height: 100%;
+          overflow: visible;
+        }
+      }
+    }
 
-        @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;
-                }
+    @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 {
-      display: none;
-      scrollbar-width: none;
-    }
   }
-}
-
-#ryft-threeDSMethodIframe {
-  display: none;
-}
-
-.ryft-payment-form {
-  .submit-button-wrapper {
-    margin: -1rem 0 1rem;
-
-    button {
-      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;
+  ::-webkit-scrollbar {
+    display: none;
+    scrollbar-width: none;
   }
 }
 
-@include media-breakpoint-up(md) {
-  .ryft-payment-form,
-  .iframe-payment-form {
-    position: relative;
-    max-height: 300px !important;
-    .submit-button-wrapper {
-      max-width: 15.5rem;
+@include media-breakpoint-down(md) {
+  .payment_link {
+    .page-body {
+      .left-block {
+        .left-block-container {
+          .ryft-payment-form {
+            position: relative;
+            max-height: 300px !important;
+            .ryft-pay-grid {
+              width: 100%;
+              max-width: 100%;
+            }
+          }
+        }
+      }
     }
   }
+}
 
-  // 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 {
-    width: 100%;
-    max-width: 15.5rem;
-    margin-bottom: 1rem;
-  }
-  .ryft-pay-apple-pay-button {
-    border-radius: 0.25rem;
-  }
-
-  .divider {
-    display: none !important;
-  }
+#ryft-threeDSMethodIframe {
+  display: none;
 }

package/src/styles/sales/BookingResults.scss

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

package/src/typeahead/Typeahead.tsx

@@ -16,7 +16,6 @@ export interface TypeaheadProps {
   isMultipleChoise?: boolean;
   noOptionsMessage: string;
   isInvalid?: boolean;
-  isCouponForm?: boolean;
 }
 
 function Typeahead({
@@ -25,25 +24,13 @@ function Typeahead({
   isRequired = false,
   isMultipleChoise,
   name = "",
-  isCouponForm = false,
   noOptionsMessage = "",
   isInvalid,
 }: TypeaheadProps) {
   const { control } = useFormContext();
 
-  const getStyle = (): CSSObjectWithLabel => {
-    const couponFormStyle = isCouponForm
-      ? {
-          borderRadius: "1rem",
-          minHeight: "3rem",
-        }
-      : {};
-    return isInvalid
-      ? { borderColor: "red", ...couponFormStyle }
-      : {
-          ...couponFormStyle,
-        };
-  };
+  const getErrorStyle = (): CSSObjectWithLabel =>
+    isInvalid ? { borderColor: "red" } : {};
 
   return (
     <>
@@ -59,7 +46,7 @@ function Typeahead({
             styles={{
               control: (base) => ({
                 ...base,
-                ...getStyle(),
+                ...getErrorStyle(),
               }),
             }}
             onChange={(value) => {

package/src/zone/form/ZoneForm.tsx

@@ -13,7 +13,7 @@ export type ZoneFormProps = {
   onSubmit: (values: Partial<Zone>) => void;
   serverErrors?: ServerError;
   isLoading?: boolean;
-  workHours: WorkHour[] | undefined;
+  workHours?: WorkHour[];
 };
 
 export type ZoneFormValues = Partial<Zone> & {
@@ -25,7 +25,6 @@ export const ZoneForm = ({
   onSubmit,
   serverErrors,
   isLoading = false,
-  workHours,
 }: ZoneFormProps) => {
   const { t } = useTranslation("Design");
   const form = useForm<ZoneFormValues>({
@@ -55,7 +54,7 @@ export const ZoneForm = ({
   return (
     <FormProvider {...form}>
       <Form onSubmit={handleSubmit(onFormSubmit)}>
-        <ZoneControl isLoading={isLoading} workHours={workHours} />
+        <ZoneControl isLoading={isLoading} />
         <Row>
           <Col md={6} sm={12} />
           <Col

package/src/zone/form/components/ZoneControl.tsx

@@ -11,15 +11,15 @@ import { GameDurationControl } from "./GameDurationControl";
 
 export type ZoneControlProps = {
   isLoading: boolean;
-  workHours: WorkHour[] | undefined;
+  workHours?: WorkHour[];
 };
 
-export const ZoneControl = ({ isLoading, workHours }: ZoneControlProps) => {
+export const ZoneControl = ({ isLoading }: ZoneControlProps) => {
   return (
     <Row>
       <Col md={6} sm={12} className="pr-5">
         <NameControl isLoading={isLoading} />
-        <ZoneRecurrencesControl workHours={workHours} />
+        <ZoneRecurrencesControl />
         <hr />
         <Row>
           <Col md={6} sm={6}>

package/src/zone/form/components/ZoneRecurrencesControl.tsx

@@ -25,13 +25,12 @@ export interface DateAndRecurrenceInputValues {
   zoneRecurrences?: Partial<ZoneRecurrence>[];
 }
 
-type ZoneRecurrenceControlProps = {
-  workHours: WorkHour[] | undefined;
+export type ZoneRecurrenceControlProps = {
+  workHours?: WorkHour[];
+  isLoading?: boolean;
 };
 
-export const ZoneRecurrencesControl = ({
-  workHours,
-}: ZoneRecurrenceControlProps) => {
+export const ZoneRecurrencesControl = () => {
   const {
     control,
     register,
@@ -70,7 +69,7 @@ export const ZoneRecurrencesControl = ({
     clearEditState();
   });
 
-  const popoverId = useId();
+  const popoverId = useId()!;
 
   const { t } = useTranslation(["Design", "Validation"]);
 
@@ -167,7 +166,6 @@ export const ZoneRecurrencesControl = ({
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
                 setInitialStartDateAfterSelect
-                workHours={workHours}
               />
             </Popover.Content>
           </Popover>

package/src/zone/form/utils/dates.ts

@@ -53,17 +53,18 @@ export const getCheckboxesByWorkHours = (workHours?: WorkHour[]) => {
   if (!workHours || !workHours.length)
     return getTimeCheckboxRanges(DEFAULT_START_DAY_TIME, DEFAULT_END_DAY_TIME);
 
-  const providerWorkHoursByWeek = workHours.reduce<
-    { start: string; end: string }[]
-  >((workHoursNextArray, currentWorkHour) => {
-    const { start, end } = currentWorkHour;
+  const providerWorkHoursByWeek = workHours.reduce(
+    (workHoursNextArray: { start: string; end: string }[], currentWorkHour) => {
+      const { start, end } = currentWorkHour;
 
-    if (start && end) {
-      return [...workHoursNextArray, { start, end }];
-    }
+      if (start && end) {
+        return [...workHoursNextArray, { start, end }];
+      }
 
-    return workHoursNextArray;
-  }, []);
+      return workHoursNextArray;
+    },
+    []
+  );
 
   // If venue has filled only 1 work day from wee
   // For another days we use default 00:00 and 23:59