@licklist/design 0.58.6-dev.9 → 0.58.7

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/card/ProductSetCard.tsx

@@ -18,7 +18,6 @@ export interface ProductSetCardProps extends HasPermissionProp {
   onCopy: () => void;
   onRemove: () => void;
   className?: string;
-  override?: number;
 }
 
 export function ProductSetCard({
@@ -29,7 +28,6 @@ export function ProductSetCard({
   onRemove,
   className = "",
   hasPermission = true,
-  override = 0,
 }: ProductSetCardProps) {
   const { t } = useTranslation("Design");
   const popoverId = useId();
@@ -46,16 +44,7 @@ export function ProductSetCard({
     >
       <div className={productSetCardClasses}>
         <div className="product-set-card-link">
-          <div className="d-flex flex-column">
-            <div>
-              {name} {rrule && `(${RRule.fromString(rrule).toText()})`}
-            </div>
-            {!!override && (
-              <div className="h6 bold ml-1">
-                {`${override} ${t(override > 1 ? "overrides" : "override")}`}
-              </div>
-            )}
-          </div>
+          {name} {rrule && `(${RRule.fromString(rrule).toText()})`}
         </div>
         <div className="d-flex">
           <div className="product-set-card-menu-eye-container">

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

@@ -34,7 +34,6 @@ import TutorialGifCard from "./TutorialGifCard";
 import { Step } from "../types";
 import { StepsControl } from "../form/StepsControl";
 import { Typeahead } from "../../typeahead";
-import { DateInput } from "./DateInput";
 
 const OPERATIONAL_COST_TITLES = {
   [OPERATIONAL_COST_PROVIDER]: "operationalCostProvider",
@@ -87,7 +86,6 @@ export interface ProductSetControlProps {
   showSmsTemplate?: boolean;
   workHours?: WorkHour[];
   providerHasBookingManagement?: boolean;
-  isOverrides?: boolean;
 }
 
 export function ProductSetControl({
@@ -103,7 +101,6 @@ export function ProductSetControl({
   showSmsTemplate,
   workHours,
   providerHasBookingManagement = false,
-  isOverrides = false,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
@@ -121,9 +118,6 @@ export function ProductSetControl({
   const termsAndConditionsId = useId();
   const relyOnPeopleTypeId = useId();
 
-  const showSmsTemplateSelector = showSmsTemplate && !isOverrides;
-  const showEmailTemplateSelector = showEmailTemplate && !isOverrides;
-
   return (
     <Row
       className={`product-set-form ${
@@ -165,30 +159,20 @@ export function ProductSetControl({
           </Form.Control.Feedback>
         </Form.Group>
 
-        {isOverrides ? (
-          <DateInput
+        {isCreateAction && (
+          <DateAndRecurrenceInput
+            isEventEditProductSet={isEventEditProductSet}
             workHours={workHours}
             isLoading={isLoading}
             providerHasBookingManagement={providerHasBookingManagement}
           />
-        ) : (
-          <>
-            {isCreateAction && (
-              <DateAndRecurrenceInput
-                isEventEditProductSet={isEventEditProductSet}
-                workHours={workHours}
-                isLoading={isLoading}
-                providerHasBookingManagement={providerHasBookingManagement}
-              />
-            )}
-          </>
         )}
 
         <div className="divider" />
 
-        <TutorialGifCard isOverrides={isOverrides} />
+        <TutorialGifCard />
 
-        <StepsControl isLoading={isLoading} isOverrides={isOverrides} />
+        <StepsControl isLoading={isLoading} />
       </Col>
       <Col md={6} sm={12}>
         <div className="second-column">
@@ -228,7 +212,6 @@ export function ProductSetControl({
               {...register("operationalCost", { required: true })}
               as="select"
               defaultValue={OPERATIONAL_COST_PROVIDER}
-              disabled={isOverrides}
               isInvalid={HookFormService.isInvalid("operationalCost", errors)}
             >
               {Object.keys(OPERATIONAL_COST_TYPES).map((operationalCost) => (
@@ -258,7 +241,6 @@ export function ProductSetControl({
               {...register("relyOnPeopleType")}
               as="select"
               defaultValue={null}
-              disabled={isOverrides}
               isInvalid={HookFormService.isInvalid("relyOnPeopleType", errors)}
             >
               <option value="">{t("notRequired")} </option>
@@ -286,7 +268,7 @@ export function ProductSetControl({
               {...register("termsAndConditions")}
               as="textarea"
               rows={2}
-              disabled={isLoading || isOverrides}
+              disabled={isLoading}
               isInvalid={HookFormService.isInvalid(
                 "termsAndConditions",
                 errors
@@ -301,32 +283,30 @@ export function ProductSetControl({
             <Form.Label className="mt-4">
               {t("Design:emailTemplate")}
             </Form.Label>
-            <>
-              {showEmailTemplateSelector ? (
-                <Typeahead
-                  name="emailTemplates"
-                  options={emailTemplates}
-                  isMultipleChoise
-                  placeholder={t("Design:choose")}
-                  noOptionsMessage={t("Design:noActiveTemplates", {
-                    notification: t("Design:email"),
-                  })}
-                />
-              ) : (
-                <WarningMessage
-                  message={t("Design:noActiveTemplates", {
-                    notification: t("Design:email"),
-                  })}
-                />
-              )}
-            </>
+            {showEmailTemplate ? (
+              <Typeahead
+                name="emailTemplates"
+                options={emailTemplates}
+                isMultipleChoise
+                placeholder={t("Design:choose")}
+                noOptionsMessage={t("Design:noActiveTemplates", {
+                  notification: t("Design:email"),
+                })}
+              />
+            ) : (
+              <WarningMessage
+                message={t("Design:noActiveTemplates", {
+                  notification: t("Design:email"),
+                })}
+              />
+            )}
 
             <Form.Label
               className={clsx(emailTemplates.length > 0 ? "mt-4" : "mt-1")}
             >
               {t("Design:smsTemplate")}
             </Form.Label>
-            {showSmsTemplateSelector ? (
+            {showSmsTemplate ? (
               <Typeahead
                 name="smsTemplates"
                 options={smsTemplates}
@@ -359,7 +339,6 @@ export function ProductSetControl({
                       onChange={field.onChange}
                       value={fieldValue}
                       as="select"
-                      disabled={isOverrides}
                       isInvalid={HookFormService.isInvalid(
                         "fieldSetId",
                         errors
@@ -396,7 +375,6 @@ export function ProductSetControl({
                   }) as string;
                 },
               })}
-              disabled={isOverrides}
               isInvalid={HookFormService.isInvalid("thankYouPageUrl", errors)}
             />
 

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

@@ -9,14 +9,10 @@ import { Icon, Image } from "../../static";
 
 export interface TutorialGifCardProps {
   tutorialAsset?: string;
-  isOverrides?: boolean;
 }
 
 // @TODO: Tutorial GIF asset should be passed as context, which is better
-const TutorialGifCard = ({
-  tutorialAsset,
-  isOverrides,
-}: TutorialGifCardProps) => {
+const TutorialGifCard = ({ tutorialAsset }: TutorialGifCardProps) => {
   const { pathname } = useLocation();
   const [isVisible, setIsVisible] = useState(pathname?.includes("/create"));
   const { t } = useTranslation(["Design"]);
@@ -50,12 +46,8 @@ const TutorialGifCard = ({
           </button>
         </Card.Header>
         <Card.Body className="tutorial-card-body">
-          <p>
-            {t(isOverrides ? "buildOverrideProductSet" : "buildProductSet")}
-          </p>
-          <span>
-            {t(isOverrides ? "buildOverrideRules" : "buildProductSetDesc")}
-          </span>
+          <p>{t("buildProductSet")}</p>
+          <span>{t("buildProductSetDesc")}</span>
           {tutorialAsset && <Image src={tutorialAsset} alt="Tutorial Gif" />}
         </Card.Body>
       </Card>

package/src/product-set/form/ProductCategoriesControl.tsx

@@ -35,7 +35,6 @@ import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
 
 interface ProductCategoriesControlProps extends WithIsLoading {
   stepIndex: number;
-  isOverrides?: boolean;
 }
 
 const getCategoryDefaultValue = (
@@ -66,7 +65,6 @@ const getCategoryDefaultValue = (
 export function ProductCategoriesControl({
   isLoading,
   stepIndex,
-  isOverrides,
 }: ProductCategoriesControlProps) {
   const { t } = useTranslation("Design");
   const {
@@ -107,7 +105,6 @@ export function ProductCategoriesControl({
   const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
     fieldName: productCategoriesFieldName,
     remove,
-    isOverrides,
   });
 
   const productCategories: ProductCategory[] = useWatch({
@@ -132,7 +129,7 @@ export function ProductCategoriesControl({
   });
 
   const handleDragEnd = (event) => {
-    if (isOverrides) return;
+    // @TODO uncomment when will be fix for change sort index
     const { active, over } = event;
 
     if (!active || !over || !active?.id || !over?.id) return;
@@ -269,10 +266,8 @@ export function ProductCategoriesControl({
                       categoryName={value}
                       stepIndex={stepIndex}
                       productCategoryIndex={index}
-                      isOverride={isOverrides}
                     />
                   }
-                  isOverride={isOverrides}
                   onDelete={() => remove(index)}
                   validate={() =>
                     trigger(`steps.${stepIndex}.productCategories.${index}`)
@@ -295,7 +290,6 @@ export function ProductCategoriesControl({
                     zones={zones}
                     productCategoryIndex={index}
                     categoryType={productCategory.type}
-                    isOverrides={isOverrides}
                   />
                 </SortableTree.Item>
               )}
@@ -305,9 +299,7 @@ export function ProductCategoriesControl({
       </SortableTree>
       <CreateProductSetItem
         title={t("addCategory")}
-        isOverride={isOverrides}
         onClick={() => {
-          if (isOverrides) return;
           setIsSelectCategoryVisible(true);
         }}
       />
@@ -316,7 +308,6 @@ export function ProductCategoriesControl({
         isVisible={isSelectCategoryVisible}
         onHide={() => setIsSelectCategoryVisible(false)}
         onCategorySelect={(categoryType) => {
-          if (isOverrides) return;
           append(getCategoryDefaultValue(categoryType, fields.length));
           setShowCategoryModal(true);
           if (
@@ -330,9 +321,7 @@ export function ProductCategoriesControl({
         <>
           <CreateProductSetItem
             title={t("editMap")}
-            isOverride={isOverrides}
             onClick={() => {
-              if (isOverrides) return;
               setIsVenueMapSetModalVisible(true);
             }}
             className={clsx(

package/src/product-set/form/ProductSetForm.tsx

@@ -26,19 +26,14 @@ import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
 export interface WithIsLoading {
   isLoading: boolean;
 }
-export interface WithIdOptional {
-  id?: number;
-}
-
 export interface WithId {
   id: number;
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithIdOptional,
+    WithId,
     ProductSetControlValues {
   steps: Step[];
-  isOverrides?: boolean;
 }
 
 export interface ProductSetFormProps
@@ -55,7 +50,6 @@ export interface ProductSetFormProps
   providerHasBookingManagement?: ProviderBookingManagementSetting["hasBookingManagement"];
   zones?: Zone[] | null;
   isCreateAction?: boolean;
-  isOverrides?: boolean;
   workHours?: WorkHour[];
 }
 
@@ -73,7 +67,6 @@ export function ProductSetForm({
   zones,
   isCreateAction,
   workHours,
-  isOverrides,
   ...shared
 }: ProductSetFormProps) {
   const { t } = useTranslation("Design");
@@ -91,7 +84,6 @@ export function ProductSetForm({
   });
 
   const { setError, reset } = form;
-
   const formValues = form.watch();
 
   const submitHandler = (onSubmit: (values: ProductSetFormValues) => void) => {
@@ -169,7 +161,6 @@ export function ProductSetForm({
                     companyName={companyName}
                     workHours={workHours}
                     providerHasBookingManagement={providerHasBookingManagement}
-                    isOverrides={isOverrides}
                   />
                   <Row>
                     <Col md={6} sm={12} />

package/src/product-set/form/ProductsControl.tsx

@@ -34,7 +34,6 @@ interface ProductsControlProps extends WithIsLoading {
   hasTicket?: boolean;
   categoryType: CategoryType;
   zones?: Zone[];
-  isOverrides?: boolean;
 }
 
 const getDefaultProductValue = (sort: number): Product => ({
@@ -78,7 +77,6 @@ export function ProductsControl({
   hasTicket,
   categoryType,
   zones,
-  isOverrides,
 }: ProductsControlProps) {
   const { t } = useTranslation("Design");
   const form = useFormContext<ProductSetFormValues>();
@@ -114,7 +112,6 @@ export function ProductsControl({
   const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
     fieldName: productControlFieldName,
     remove,
-    isOverrides,
   });
 
   const allowDeposits = watch(
@@ -162,7 +159,6 @@ export function ProductsControl({
   });
 
   const handleDragEnd = (_event) => {
-    if (isOverrides) return;
     const { active, over } = _event;
 
     if (!active || !over || !active?.id || !over?.id) return;
@@ -180,7 +176,6 @@ export function ProductsControl({
   };
 
   const onProductRemove = (index: number) => {
-    if (isOverrides) return;
     const currentProduct = getValues(
       `${productControlFieldName}.${index}` as const
     );
@@ -220,12 +215,10 @@ export function ProductsControl({
                 isExpanded={isFirstProductAdded}
                 isInvalid={!!categoryProductErrors}
                 title={value}
-                isOverride={isOverrides}
                 badge={<Badge className="product-badge">{t("product")}</Badge>}
                 isIconInHeader={false}
                 cancelChanges={() => cancelChanges(index)}
                 edit={() => edit(index)}
-                isProduct
                 secondaryBadge={getBadgeConfig(categoryType, t(categoryType))}
                 subTitle={
                   <div className="product-set-badges-container">
@@ -262,7 +255,6 @@ export function ProductsControl({
                     hasTicket={hasTicket}
                     categoryType={categoryType}
                     zoneDuration={catergoryZone?.defaultDuration}
-                    isOverrides={isOverrides}
                   />
                 }
                 onDelete={() => onProductRemove(index)}
@@ -284,9 +276,7 @@ export function ProductsControl({
       </SortableTree>
       <CreateProductSetItem
         title={t("addProduct")}
-        isOverride={isOverrides}
         onClick={() => {
-          if (isOverrides) return;
           append(getDefaultProductValue(fields.length));
           setShowProductModal(true);
 

package/src/product-set/form/StepsControl.tsx

@@ -18,10 +18,9 @@ import { ProductSetFormValues } from "./ProductSetForm";
 
 interface StepsControlProps {
   isLoading: boolean;
-  isOverrides?: boolean;
 }
 
-export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
+export function StepsControl({ isLoading }: StepsControlProps) {
   const form = useFormContext<ProductSetFormValues>();
   const { t } = useTranslation("Design");
   const [showStepModal, setShowStepModal] = useState(false);
@@ -43,7 +42,6 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
   const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
     fieldName: "steps",
     remove,
-    isOverrides,
   });
 
   useEffect(() => {
@@ -92,9 +90,8 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
                 modalLabel={t("addNewStep")}
                 modalClass={ProductSetModalClasses.step}
                 isNewAdded={showStepModal}
-                edit={() => !isOverrides && edit(index)}
+                edit={() => edit(index)}
                 cancelChanges={() => cancelChanges(index)}
-                isOverride={isOverrides}
                 subTitle={
                   <div className="product-set-badges-container">
                     <div className="product-set-subtitle-dot product-set-subtitle-step-dot" />
@@ -139,7 +136,6 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
                 <ProductCategoriesControl
                   isLoading={isLoading}
                   stepIndex={index}
-                  isOverrides={isOverrides}
                 />
               </SortableTree.Item>
             )}
@@ -149,9 +145,7 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
 
       <CreateProductSetItem
         title={t("addStep")}
-        isOverride={isOverrides}
         onClick={() => {
-          if (isOverrides) return;
           append(getDefaultStepsValues());
           setShowStepModal(true);
           if (errors.steps?.type === HookFormService.manualErrorType) {

package/src/product-set/form/SubProductsControl.tsx

@@ -15,7 +15,6 @@ interface SubProductsControlProps {
   productCategoryIndex: number;
   productIndex: number;
   isLoading: boolean;
-  isOverrides?: boolean;
 }
 
 export function SubProductsControl({
@@ -24,7 +23,6 @@ export function SubProductsControl({
   stepIndex,
   productCategoryIndex,
   productIndex,
-  isOverrides,
 }: SubProductsControlProps) {
   const form = useFormContext<ProductSetFormValues>();
   const { fields, append } = useFieldArray({
@@ -51,7 +49,6 @@ export function SubProductsControl({
             key={`sub-product-${subProduct.id}-${index}`}
             id={subProduct.id}
             title={subProduct.name}
-            isOverride={isOverrides}
             body={
               <ProductControl<ProductSetFormValues>
                 isLoading={isLoading}

package/src/product-set/hooks/useSortableTreeFunctions.ts

@@ -4,30 +4,24 @@ import { useFormContext } from "react-hook-form";
 interface useSortableTreeFunctionsProps {
   fieldName: string;
   remove: (index?: number | number[]) => void;
-  isOverrides?: boolean;
 }
 export const useSortableTreeFunctions = ({
   fieldName,
   remove,
-  isOverrides,
 }: useSortableTreeFunctionsProps) => {
   const { getValues, setValue } = useFormContext();
   const [previousValue, setEditValue] = useState(null);
 
   const edit = (index: number) => {
-    if (isOverrides) return;
     const currentCategoryProduct = getValues(`${fieldName}.${index}` as const);
     const cloneCategoryProduct = structuredClone(currentCategoryProduct);
     setEditValue(cloneCategoryProduct);
   };
 
   const cancelChanges = (index: number) => {
-    if (isOverrides) return;
     if (!previousValue) {
-      // eslint-disable-next-line consistent-return
       return remove(index);
     }
-    // eslint-disable-next-line consistent-return
     return setValue(`${fieldName}.${index}` as const, previousValue);
   };
 

package/src/product-set/item/CreateProductSetItem.tsx

@@ -6,21 +6,18 @@ interface CreateProductSetItemProps {
   onClick: () => void;
   title: string;
   className?: string;
-  isOverride?: boolean;
 }
 
 export function CreateProductSetItem({
   onClick,
   title,
   className,
-  isOverride,
 }: CreateProductSetItemProps) {
   return (
     <button
       className={clsx(
         "product-set-item-wrapper w-100",
         `product-set-item-wrapper-${title.toLowerCase().split(" ")[1]}`,
-        isOverride && "bg-light",
         className
       )}
       onClick={onClick}