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

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,7 +19,10 @@ 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";
 
 export interface DateAndRecurrenceInputValues {
@@ -125,13 +128,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 =

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-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/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;
@@ -62,6 +61,31 @@
   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;
@@ -113,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;
@@ -125,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 {
@@ -136,8 +172,8 @@
       }
 
       .products {
-        margin-top: 0.5rem;
-
+        margin-top: 1.4rem;
+        font-size: 0.875rem;
         .product {
           margin: 0.5rem 0;
 
@@ -148,6 +184,15 @@
               margin-bottom: 0.5rem;
             }
           }
+
+          .name {
+            font-weight: 600;
+          }
+
+          .price {
+            font-weight: 400;
+            font-size: 0.875rem;
+          }
         }
 
         &:not(:last-child) {
@@ -168,6 +213,12 @@
         margin: 0 0 0.5rem;
 
         .title {
+          font-size: 1rem;
+          font-weight: 600;
+        }
+
+        .metadata {
+          font-size: 0.95rem;
           font-weight: 600;
         }
       }
@@ -181,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/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;
@@ -77,7 +78,7 @@
   }
 
   .right-block {
-    height: calc(100% - 1rem);
+    height: 100%;
     max-width: 17.5rem;
     min-width: 17.5rem;
     width: 100%;