@licklist/design 0.58.6-dev.11 → 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/control/DateInput.tsx

@@ -24,7 +24,6 @@ import {
   getDateTimeObject,
 } from "../../recurring-date-picker-input/RecurringDatePickerInput";
 import { ProductSetRecurrenceOverridesControl } from "./ProductSetRecurrenceOverridesControl";
-import { MAX_QUANTITY_RECURRENCE_DATE_IN_OVERRIDE } from "../product/constants";
 
 export interface DateAndRecurrenceInputValues {
   menuRecurrences?: Partial<ProductSetRecurrence>[];
@@ -250,22 +249,20 @@ export const DateInput = ({
               }
             />
           ))}
-          {fields.length < MAX_QUANTITY_RECURRENCE_DATE_IN_OVERRIDE && (
-            <div
-              className="product-set-recurrence-icon-wrapper"
-              role="button"
-              tabIndex={0}
-              onClick={handleOnAdd}
-              onKeyDown={handleOnAdd}
-            >
-              <Icon
-                type="plus-circle"
-                height="1rem"
-                className="product-set-recurrence-icon-add mr-2"
-              />
-              {t("addDates")}
-            </div>
-          )}
+          <div
+            className="product-set-recurrence-icon-wrapper"
+            role="button"
+            tabIndex={0}
+            onClick={handleOnAdd}
+            onKeyDown={handleOnAdd}
+          >
+            <Icon
+              type="plus-circle"
+              height="1rem"
+              className="product-set-recurrence-icon-add mr-2"
+            />
+            {t("addDates")}
+          </div>
 
           <Form.Control
             type="hidden"

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/constants.ts

@@ -1,2 +1 @@
 export const MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH = 1000;
-export const MAX_QUANTITY_RECURRENCE_DATE_IN_OVERRIDE = 1;

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/sortable-tree/SortableTreeItem.tsx

@@ -125,8 +125,6 @@ export function SortableTreeItem({
     [position, setIsExpanded]
   );
 
-  const isVisibleDeleteButton = Boolean(onDelete) && !isOverride;
-
   const onButtonMouseDown = useCallback((event) => {
     setPosition({ pageX: event.pageX, pageY: event.pageY });
   }, []);
@@ -348,8 +346,8 @@ export function SortableTreeItem({
                     >
                       {t("saveAndAdd")}
                     </Button>
-                    {isVisibleDeleteButton && (
-                      <div className="d-flex justify-content-end mt-4 delete-btn">
+                    <div className="d-flex justify-content-end mt-4 delete-btn">
+                      {Boolean(onDelete) && (
                         <ConfirmModal>
                           {(confirm) => (
                             <DeleteFieldButton
@@ -357,8 +355,8 @@ export function SortableTreeItem({
                             />
                           )}
                         </ConfirmModal>
-                      </div>
-                    )}
+                      )}
+                    </div>
                   </div>
                 </Modal.Body>
               </Modal>

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%;