@licklist/design 0.58.6-dev.10 → 0.58.6-dev.2

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";
+import Form from "react-bootstrap/Form";
 
 import Button from "react-bootstrap/Button";
 import { useHistory } from "react-router-dom";
@@ -13,7 +14,6 @@ import {
   AttemptPaymentResponse,
 } from "@licklist/plugins/dist/hooks/Ryft/useRyftPayment";
 import { BlockLoader, ButtonLoader } from "../../static";
-import { injectComponentsInRyftForm } from "./utils/ryft-form";
 
 export const ryftErrorMap: Record<string, string> = {
   insufficient_funds: "insufficientFunds",
@@ -50,7 +50,6 @@ export const RyftPaymentForm = ({
   onSubmit,
 }: RyftPaymentFormProps) => {
   const { t } = useTranslation(["Design", "Validation", "Ryft"]);
-  const formRef = useRef<HTMLFormElement | null>(null);
   const history = useHistory();
 
   const [isValid, setIsValid] = useState(false);
@@ -118,12 +117,6 @@ export const RyftPaymentForm = ({
     }
   };
 
-  useEffect(
-    () => injectComponentsInRyftForm({ t }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [formRef.current?.childNodes?.length]
-  );
-
   useEffect(() => {
     if (!accountId.data || accountId.isError) return;
 
@@ -182,14 +175,15 @@ export const RyftPaymentForm = ({
 
   return (
     <>
+      <Form.Label>{t("Design:paymentDetails")}</Form.Label>
+      {/* For unknown reasons ryft doesn't work with bootstrap form */}
       <form
-        ref={formRef}
         id="ryft-pay-form"
         noValidate
         onSubmit={methods.handleSubmit(handleSubmit)}
         className="ryft-payment-form"
       >
-        <div className="submit-button-wrapper mt-4 p-1">
+        <div className="submit-button-wrapper mt-3 p-1">
           <Button type="submit" disabled={isBtnDisabled || !isValid}>
             {isBtnDisabled && <ButtonLoader />}
             {t("Design:buyNow")}

package/src/product-set/product/ProductControl.tsx

@@ -7,12 +7,8 @@ import {
   QUANTITY_TYPE_LIST_DTO,
   QUANTITY_TYPE_RECHARGING,
 } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import {
-  ProductType,
-  PRODUCT_DEfAULT_COLORS,
-} from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { ProductType } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import clsx from "clsx";
 import {
   FieldNamePrefixPath,
   FormValues,
@@ -39,7 +35,6 @@ import {
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useImages } from "@licklist/plugins/dist/hooks/Media/useImages";
-
 import {
   Image,
   IMAGE_TYPE_IMAGE,
@@ -64,13 +59,13 @@ import {
   ProductQuantityControl,
   ProductQuantityRechargingControl,
 } from "./quantity";
-import { PropertyControl } from "../../snippet";
 import { TipTapEditor } from "../../tiptap-editor";
 import { IsDeletableEvent } from "../types";
 import { FixedDurationOptions } from "./fixed-duration-fields";
 import { ProductDurationControl } from "./duration";
 import { ProductPriceControl } from "./price";
 import { MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH } from "./constants";
+import clsx from "clsx";
 
 // TO DO refactor this file
 // and add correct types
@@ -104,7 +99,6 @@ export interface ProductControlValues
   offset: number;
   serviceTime: number;
   sort: number | null;
-  color?: string;
 }
 
 export interface ProductControlProps<T>
@@ -150,7 +144,7 @@ export function ProductControl<T extends FormValues>({
   } = useFormContext<T>();
 
   const { setLoading } = useContext(ProductSetLoadingContext);
-  const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
+  const { t } = useTranslation(["Design", "Validation"]);
   const [expanded, setExpanded] = useState(false);
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
   // @TODO: After checking "isUnlimited" checkbox need to reset field totalQuantity
@@ -395,14 +389,6 @@ export function ProductControl<T extends FormValues>({
               )}
             </Form.Control.Feedback>
           </Form.Group>
-
-          <PropertyControl<T>
-            item={`${fieldNamePrefix}.color` as Path<T>}
-            label={t("ProductSet:selectColor")}
-            isDisabled={isOverrides}
-            isRequired={false}
-            defaultColors={PRODUCT_DEfAULT_COLORS}
-          />
         </Col>
       </Row>
 

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -26,7 +26,6 @@ export interface ProductCategoryControlValues extends FormValues {
   name: string;
   minSubItems: number | null;
   maxSubItems: number | null;
-  overallQuantity?: number | null;
   quantityType: QuantityType;
   type: CategoryType;
   isTimeRelated: boolean;
@@ -103,7 +102,6 @@ export function ProductCategoryControl({
   const collectUserInfoId = useId();
   const hasTicketId = useId();
   const zoneId = useId();
-  const overallCapacityId = useId();
 
   const allowDepositsId = useId();
   const remainderExpireAfterId = useId();
@@ -129,7 +127,7 @@ export function ProductCategoryControl({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxSubItems, fieldNamePrefix]);
 
-  const isZoneCategory =
+  const shouldShowZoneSelect =
     category.type === CATEGORY_TYPE_FIXED_DURATION ||
     category.type === CATEGORY_TYPE_GAME;
 
@@ -330,110 +328,50 @@ export function ProductCategoryControl({
           </Col>
         </Row>
 
-        {isZoneCategory && (
-          <>
-            <Row>
-              <Col md={6} sm={6} xs={6}>
-                <Form.Group controlId={overallCapacityId}>
-                  <Form.Label>{t("Design:overallQuantity")}</Form.Label>
-                  <InputGroup hasValidation>
-                    <InputGroup.Prepend
-                      className="arrow-up-btn"
-                      onClick={() => {
-                        const currentOverallCapacity = Number(
-                          getValues(`${fieldNamePrefix}.overallQuantity`) || 0
-                        );
-                        setValue(
-                          `${fieldNamePrefix}.overallQuantity`,
-                          currentOverallCapacity + 1,
-                          { shouldValidate: true }
-                        );
-                      }}
-                    >
-                      <InputGroup.Text className="py-0 px-3">
-                        <IncrementIcon />
-                      </InputGroup.Text>
-                    </InputGroup.Prepend>
-                    <Controller
-                      control={control}
-                      name={`${fieldNamePrefix}.overallQuantity`}
-                      render={({ field }) => (
-                        <Form.Control
-                          min={0}
-                          step={1}
-                          type="number"
-                          disabled={isOverride}
-                          isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
-                            `${fieldNamePrefix}.overallQuantity`,
-                            errors
-                          )}
-                          {...field}
-                        />
-                      )}
-                      rules={{
-                        min: {
-                          value: 0,
-                          message: t("Validation:fieldMinNumber", {
-                            attribute: t("overallQuantity"),
-                            min: 0,
-                          }) as string,
-                        },
-                      }}
-                    />
-                    <Form.Control.Feedback type="invalid">
-                      {HookFormService.getErrors<ProductSetFormValues>(
-                        `${fieldNamePrefix}.overallQuantity`,
+        {shouldShowZoneSelect && (
+          <Row>
+            <Col>
+              <Form.Group controlId={zoneId}>
+                <Form.Label>{t("Design:zone")}</Form.Label>
+                <Controller
+                  control={control}
+                  name={`${fieldNamePrefix}.zoneId`}
+                  render={({ field }) => (
+                    <Form.Control
+                      as="select"
+                      disabled={isOverride}
+                      isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
+                        `${fieldNamePrefix}.zoneId`,
                         errors
                       )}
-                    </Form.Control.Feedback>
-                  </InputGroup>
-                </Form.Group>
-              </Col>
-            </Row>
-            <Row>
-              <Col>
-                <Form.Group controlId={zoneId}>
-                  <Form.Label>{t("Design:zone")}</Form.Label>
-                  <Controller
-                    control={control}
-                    name={`${fieldNamePrefix}.zoneId`}
-                    render={({ field }) => (
-                      <Form.Control
-                        as="select"
-                        disabled={isOverride}
-                        isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
-                          `${fieldNamePrefix}.zoneId`,
-                          errors
-                        )}
-                        {...field}
-                      >
-                        <option value={null}>{t("Design:choose")}</option>
-                        {zones.map((zone) => (
-                          <option key={zone.id} value={zone.id}>
-                            {zone.name}
-                          </option>
-                        ))}
-                      </Form.Control>
-                    )}
-                    rules={{
-                      required: {
-                        value: providerHasBookingManagement,
-                        message: t("Validation:fieldRequired", {
-                          attribute: t("zone"),
-                        }),
-                      },
-                    }}
-                  />
-                  <Form.Control.Feedback type="invalid">
-                    {HookFormService.getErrors<ProductSetFormValues>(
-                      `${fieldNamePrefix}.zoneId`,
-                      errors
-                    )}
-                  </Form.Control.Feedback>
-                </Form.Group>
-              </Col>
-            </Row>
-          </>
+                      {...field}
+                    >
+                      <option value={null}>{t("Design:choose")}</option>
+                      {zones.map((zone) => (
+                        <option key={zone.id} value={zone.id}>
+                          {zone.name}
+                        </option>
+                      ))}
+                    </Form.Control>
+                  )}
+                  rules={{
+                    required: {
+                      value: providerHasBookingManagement,
+                      message: t("Validation:fieldRequired", {
+                        attribute: t("zone"),
+                      }),
+                    },
+                  }}
+                />
+                <Form.Control.Feedback type="invalid">
+                  {HookFormService.getErrors<ProductSetFormValues>(
+                    `${fieldNamePrefix}.zoneId`,
+                    errors
+                  )}
+                </Form.Control.Feedback>
+              </Form.Group>
+            </Col>
+          </Row>
         )}
       </Col>
 

package/src/provider/working-hours-input/WorkingHoursInputDescription.tsx

@@ -1,7 +1,9 @@
+import { DateTime } from "luxon";
 import React from "react";
 import { Col, Row } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import { WorkingHoursInputValues } from ".";
 import { useWeekdays } from "./utils";
 
@@ -23,10 +25,22 @@ export function WorkingHoursInputDescription() {
             <Row key={i}>
               <Col xs="auto">{weekdays[i]}:</Col>
               <Col>
-                {t("timeInterval", {
-                  start: weekday.start,
-                  end: weekday.end,
-                })}
+                {weekday?.end
+                  ? weekday.start
+                    ? t("timeInterval", {
+                        start: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
+                        ),
+                        end: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
+                        ),
+                      })
+                    : t("timeFrom", {
+                        start: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
+                        ),
+                      })
+                  : null}
               </Col>
             </Row>
           );

package/src/snippet/snippet-template/control/PropertyControl.tsx

@@ -24,16 +24,12 @@ export interface PropertyControlProps<T> {
   item: Path<T>;
   label: string;
   isDisabled?: boolean;
-  defaultColors?: Array<string>;
-  isRequired?: boolean;
 }
 
 export function PropertyControl<T>({
   item,
   label,
   isDisabled = false,
-  defaultColors,
-  isRequired = true,
 }: PropertyControlProps<T>) {
   const { t } = useTranslation(["Validation"]);
 
@@ -66,7 +62,7 @@ export function PropertyControl<T>({
         <Form.Control
           {...register(item, {
             required: {
-              value: isRequired,
+              value: true,
               message: t("Validation:fieldRequired", {
                 attribute: label,
               }),
@@ -99,7 +95,7 @@ export function PropertyControl<T>({
               setValue(item, color.hex);
               toggleIsActive();
             }}
-            colors={defaultColors || DEFAULT_COLORS}
+            colors={DEFAULT_COLORS}
           />
         </div>
       )}

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

@@ -46,8 +46,9 @@
     color: $snippet-page-header-steps-body-color;
     transition: $color-transition;
     margin-left: 0.5rem;
+    width: 6rem;
     word-break: break-word;
-    font-size: 0.875rem;
+    font-size: 0.75rem;
 
     @include media-breakpoint-down(sm) {
       display: none;
@@ -61,31 +62,6 @@
   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;
@@ -137,15 +113,6 @@
 
   .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;
@@ -158,11 +125,8 @@
     }
 
     .products-by-menu-step {
-      margin-top: 1.4rem;
-      font-size: 0.875rem;
       .title {
-        font-size: 1rem;
-        font-weight: 600;
+        font-weight: 500;
       }
 
       .categories {
@@ -172,8 +136,8 @@
       }
 
       .products {
-        margin-top: 1.4rem;
-        font-size: 0.875rem;
+        margin-top: 0.5rem;
+
         .product {
           margin: 0.5rem 0;
 
@@ -184,15 +148,6 @@
               margin-bottom: 0.5rem;
             }
           }
-
-          .name {
-            font-weight: 600;
-          }
-
-          .price {
-            font-weight: 400;
-            font-size: 0.875rem;
-          }
         }
 
         &:not(:last-child) {
@@ -213,12 +168,6 @@
         margin: 0 0 0.5rem;
 
         .title {
-          font-size: 1rem;
-          font-weight: 600;
-        }
-
-        .metadata {
-          font-size: 0.95rem;
           font-weight: 600;
         }
       }
@@ -232,7 +181,19 @@
   }
 
   hr {
-    margin-bottom: 1.5rem;
+    margin: 0;
+    border-width: 2px;
+    border-color: $separator-color;
+  }
+
+  .products {
+    font-size: 0.75rem;
+
+    .product {
+      .name {
+        font-weight: 500;
+      }
+    }
   }
 }
 

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

@@ -1,4 +1,3 @@
-// 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;
@@ -78,7 +77,7 @@
   }
 
   .right-block {
-    height: 100%;
+    height: calc(100% - 1rem);
     max-width: 17.5rem;
     min-width: 17.5rem;
     width: 100%;

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

@@ -1,52 +1,10 @@
 .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;
@@ -55,55 +13,7 @@
               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;
@@ -112,9 +22,10 @@
 
           // 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;
@@ -125,36 +36,6 @@
           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 {
@@ -181,7 +62,3 @@
     }
   }
 }
-
-#ryft-threeDSMethodIframe {
-  display: none;
-}

package/dist/iframe/ryft/utils/ryft-form.d.ts

@@ -1,5 +0,0 @@
-import { TFunction } from "react-i18next";
-export declare const injectComponentsInRyftForm: ({ t, }: {
-    t: TFunction<string[]>;
-}) => void;
-//# sourceMappingURL=ryft-form.d.ts.map

package/dist/iframe/ryft/utils/ryft-form.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ryft-form.d.ts","sourceRoot":"","sources":["../../../../src/iframe/ryft/utils/ryft-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,eAAO,MAAM,0BAA0B;OAGlC,UAAU,MAAM,EAAE,CAAC;UAyCvB,CAAC"}