@licklist/design 0.58.6-dev.1 → 0.58.6-dev.11

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, 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";
@@ -14,6 +13,7 @@ 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,6 +50,7 @@ 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);
@@ -117,6 +118,12 @@ 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;
 
@@ -175,15 +182,14 @@ 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-3 p-1">
+        <div className="submit-button-wrapper mt-4 p-1">
           <Button type="submit" disabled={isBtnDisabled || !isValid}>
             {isBtnDisabled && <ButtonLoader />}
             {t("Design:buyNow")}

package/src/iframe/ryft/utils/ryft-form.ts

@@ -0,0 +1,47 @@
+import { TFunction } from "react-i18next";
+
+export const injectComponentsInRyftForm = ({
+  t,
+}: {
+  t: TFunction<string[]>;
+}) => {
+  const cardContainer = document.getElementById("ryft-pay-iframe");
+  const oldCardDividerContainer = document.getElementById(
+    "card-title-container"
+  );
+
+  if (!cardContainer || oldCardDividerContainer) {
+    return;
+  }
+
+  const cardTitle = document.createElement("div");
+  const cardText = document.createElement("div");
+  const cardTitleContainer = document.createElement("div");
+  cardTitleContainer.id = "card-title-container";
+  cardTitle.textContent = t("Design:enterCardDetails");
+  cardText.className = "bold-text form-label";
+  cardText.innerText = t("Design:paymentDetails");
+  cardTitleContainer.append(cardTitle, cardText);
+  cardContainer?.before(cardTitleContainer);
+
+  const payGrid = document.getElementById("ryft-pay-grid");
+
+  if (!payGrid) {
+    return;
+  }
+
+  // Adding title and divider for apple and google pay button
+  const mobilePayTitle = document.createElement("div");
+  const dividerText = document.createElement("div");
+  const divider = document.createElement("div");
+  const container = document.createElement("div");
+  mobilePayTitle.className = "mobile-pay-title";
+  mobilePayTitle.innerText = t("Design:expressCheckoutWith");
+  dividerText.id = "mobile-pay-divider-text";
+  dividerText.innerText = "or";
+  divider.id = "mobile-pay-divider";
+  container.id = "mobile-pay-divider-container";
+  container.append(dividerText, divider);
+  payGrid.before(mobilePayTitle);
+  payGrid.after(container);
+};

package/src/product-set/card/ProductSetCard.tsx

@@ -50,9 +50,11 @@ export function ProductSetCard({
             <div>
               {name} {rrule && `(${RRule.fromString(rrule).toText()})`}
             </div>
-            <div className="h6 bold ml-1">
-              {!!override && t("overridesAmount", { amount: override })}
-            </div>
+            {!!override && (
+              <div className="h6 bold ml-1">
+                {`${override} ${t(override > 1 ? "overrides" : "override")}`}
+              </div>
+            )}
           </div>
         </div>
         <div className="d-flex">

package/src/product-set/control/DateInput.tsx

@@ -19,8 +19,12 @@ import {
   AvailableTimesControl,
   AvailableTimesControlRef,
 } from "../../zone/form/components/AvailableTimesControl";
-import { RecurringDatePickerInputValues } from "../../recurring-date-picker-input/RecurringDatePickerInput";
+import {
+  RecurringDatePickerInputValues,
+  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>[];
@@ -125,13 +129,14 @@ export const DateInput = ({
         return;
       }
     }
+    const start = getDateTimeObject(next.startDate, next.endTime || "23:59:59");
 
     const rrule = RRule.optionsToString({
-      dtstart: DateTime.fromISO(next.startDate).toJSDate(),
-      until: DateTime.fromISO(next.startDate).toJSDate(),
+      until: (start as DateTime).toJSDate(),
       byweekday: [],
       freq: Frequency.DAILY,
       tzid: TIMEZONE,
+      interval: 1,
     }).replace("RRULE:", "");
 
     const availableTime =
@@ -245,20 +250,22 @@ export const DateInput = ({
               }
             />
           ))}
-          <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>
+          {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>
+          )}
 
           <Form.Control
             type="hidden"

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

@@ -7,8 +7,12 @@ import {
   QUANTITY_TYPE_LIST_DTO,
   QUANTITY_TYPE_RECHARGING,
 } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import { ProductType } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import {
+  ProductType,
+  PRODUCT_DEfAULT_COLORS,
+} from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import clsx from "clsx";
 import {
   FieldNamePrefixPath,
   FormValues,
@@ -35,6 +39,7 @@ import {
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useImages } from "@licklist/plugins/dist/hooks/Media/useImages";
+
 import {
   Image,
   IMAGE_TYPE_IMAGE,
@@ -59,6 +64,7 @@ import {
   ProductQuantityControl,
   ProductQuantityRechargingControl,
 } from "./quantity";
+import { PropertyControl } from "../../snippet";
 import { TipTapEditor } from "../../tiptap-editor";
 import { IsDeletableEvent } from "../types";
 import { FixedDurationOptions } from "./fixed-duration-fields";
@@ -98,6 +104,7 @@ export interface ProductControlValues
   offset: number;
   serviceTime: number;
   sort: number | null;
+  color?: string;
 }
 
 export interface ProductControlProps<T>
@@ -143,7 +150,7 @@ export function ProductControl<T extends FormValues>({
   } = useFormContext<T>();
 
   const { setLoading } = useContext(ProductSetLoadingContext);
-  const { t } = useTranslation(["Design", "Validation"]);
+  const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
   const [expanded, setExpanded] = useState(false);
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
   // @TODO: After checking "isUnlimited" checkbox need to reset field totalQuantity
@@ -388,6 +395,14 @@ 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>
 
@@ -509,7 +524,14 @@ export function ProductControl<T extends FormValues>({
           </Form.Group>
         </Col>
 
-        <Col lg={4} md={4} className="licklist-file-upload-wrapper">
+        <Col
+          lg={4}
+          md={4}
+          className={clsx(
+            "licklist-file-upload-wrapper",
+            isOverrides && "opacity-50"
+          )}
+        >
           <FileUpload
             onFilesChange={onFilesChange}
             allowedExtensions={["jpeg", "jpg", "png"]}

package/src/product-set/product/constants.ts

@@ -1 +1,2 @@
 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,6 +26,7 @@ export interface ProductCategoryControlValues extends FormValues {
   name: string;
   minSubItems: number | null;
   maxSubItems: number | null;
+  overallQuantity?: number | null;
   quantityType: QuantityType;
   type: CategoryType;
   isTimeRelated: boolean;
@@ -102,6 +103,7 @@ export function ProductCategoryControl({
   const collectUserInfoId = useId();
   const hasTicketId = useId();
   const zoneId = useId();
+  const overallCapacityId = useId();
 
   const allowDepositsId = useId();
   const remainderExpireAfterId = useId();
@@ -127,7 +129,7 @@ export function ProductCategoryControl({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxSubItems, fieldNamePrefix]);
 
-  const shouldShowZoneSelect =
+  const isZoneCategory =
     category.type === CATEGORY_TYPE_FIXED_DURATION ||
     category.type === CATEGORY_TYPE_GAME;
 
@@ -328,50 +330,110 @@ export function ProductCategoryControl({
           </Col>
         </Row>
 
-        {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`,
+        {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`,
                         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>
+                    </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>
+          </>
         )}
       </Col>
 

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

@@ -1,9 +1,7 @@
-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";
 
@@ -25,22 +23,10 @@ export function WorkingHoursInputDescription() {
             <Row key={i}>
               <Col xs="auto">{weekdays[i]}:</Col>
               <Col>
-                {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}
+                {t("timeInterval", {
+                  start: weekday.start,
+                  end: weekday.end,
+                })}
               </Col>
             </Row>
           );

package/src/recurring-date-picker-input/RecurrenceAndFrequencyInput.tsx

@@ -57,7 +57,7 @@ function RecurrenceAndFrequencyInput({
       <Row>
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{startDateLabel ?? t("Design:fromDate")}</Form.Label>
+            <Form.Label>{startDateLabel ?? t("Design:date")}</Form.Label>
             <Form.Control
               type="date"
               {...register("startDate", { required: true })}

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

@@ -24,12 +24,16 @@ 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"]);
 
@@ -62,7 +66,7 @@ export function PropertyControl<T>({
         <Form.Control
           {...register(item, {
             required: {
-              value: true,
+              value: isRequired,
               message: t("Validation:fieldRequired", {
                 attribute: label,
               }),
@@ -95,7 +99,7 @@ export function PropertyControl<T>({
               setValue(item, color.hex);
               toggleIsActive();
             }}
-            colors={DEFAULT_COLORS}
+            colors={defaultColors || DEFAULT_COLORS}
           />
         </div>
       )}

package/src/sortable-tree/SortableTreeItem.tsx

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