@licklist/design 0.44.485-dev.89 → 0.44.485-dev.9

package/src/sales/booking/filter/components/SearchingForSection.tsx

@@ -0,0 +1,68 @@
+import React, { useContext, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "react-bootstrap";
+import {
+  BookingContext,
+  BookingFilters,
+} from "@licklist/plugins/dist/context/booking/BookingContext";
+import { ResultTagButton } from "./ResultTagButton";
+
+const SEARCHING_FOR_FILTER_KEYS = ["q", "status", "date", "staffMember"];
+
+export const SearchingForSection = () => {
+  const { t } = useTranslation("Design");
+  const { filters, setFilters } = useContext(BookingContext);
+
+  const filteredFilters = useMemo(() => {
+    return SEARCHING_FOR_FILTER_KEYS.reduce(
+      (prevValues: Partial<BookingFilters>, currentKey: string) => {
+        if (filters[currentKey]) {
+          return { ...prevValues, [currentKey]: filters[currentKey] };
+        }
+
+        return prevValues;
+      },
+      {}
+    );
+  }, [filters]);
+
+  const resetAllFilters = () => {
+    setFilters({ isFilterOpen: true });
+  };
+
+  const onResetSelectedFilter = (key: string) => {
+    setFilters({ ...filters, [key]: "" });
+  };
+
+  if (!Object.keys(filteredFilters).length) {
+    return null;
+  }
+
+  const { search, ...allFilters } = filteredFilters;
+
+  return (
+    <div className="searching-for-section">
+      <div className="tags">
+        <p className="label">{t("Design:searchingFor")}:</p>
+        <p className="search-query-param">{search}</p>
+        {Object.keys(allFilters).map((key: string) => {
+          return (
+            <ResultTagButton
+              key={key}
+              tagKey={key}
+              value={allFilters[key]}
+              onRemoveClick={onResetSelectedFilter}
+            />
+          );
+        })}
+        <Button
+          variant="link"
+          className="shadow-none"
+          onClick={resetAllFilters}
+        >
+          {t("clear")}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/sales/booking/filter/index.ts

@@ -0,0 +1,2 @@
+export { BookingFilter } from "./BookingFilter";
+export type { BookingFilterProps } from "./BookingFilter";

package/src/sales/booking/index.ts

@@ -1 +1,3 @@
+export * from "./tabs";
+export * from "./filter";
 export * from "./results";

package/src/sales/booking/results/components/ResultCard.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
+import { formatDateStringToOrdinalFormatWithPrefix } from "@licklist/core/dist/Services/Date";
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
@@ -55,7 +55,7 @@ export const ResultCard = ({
             {t("status")}: {t(status)}
           </p>
           <p>
-            {t("date")}: {formatDateStringForEvent(startDate)}
+            {t("date")}: {formatDateStringToOrdinalFormatWithPrefix(startDate)}
           </p>
           <p>
             {t("time")}: {DateTime.fromISO(startDate).toFormat("hh:MM")}

package/src/sales/booking/results/constants.ts

@@ -3,5 +3,4 @@ export const BACKGROUND_COLOR_CLASSNAMES = [
   "random-color-yellow",
   "random-color-green",
   "random-color-pink",
-  "random-color-violet",
 ];

package/src/sales/booking/results/index.ts

@@ -1,3 +1,2 @@
 export { BookingResults } from "./BookingResults";
-export * from "./constants";
 export type { BookingResultsProps } from "./BookingResults";

package/src/sales/booking/tabs/BookingTabs.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { BookingContextProvider } from "@licklist/plugins/dist/context/booking/BookingContext";
+import { BookingTabs, BookingTabsProps } from "./BookingTabs";
+
+export default {
+  title: "Sales/Booking/Tabs",
+  component: BookingTabs,
+} as Meta;
+
+export const Default: Story<BookingTabsProps> = () => {
+  return (
+    <BookingContextProvider>
+      <BookingTabs>Bookings</BookingTabs>
+    </BookingContextProvider>
+  );
+};

package/src/sales/booking/tabs/BookingTabs.tsx

@@ -0,0 +1,88 @@
+import React, { PropsWithChildren } from "react";
+import { Button } from "react-bootstrap";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import {
+  BOOKING_LIST_TYPE,
+  BOOKING_CALENDAR_TYPE,
+  BOOKING_TYPE,
+} from "@licklist/plugins/dist/context/booking/BookingContext";
+import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
+import Icon from "../../../static/Icon";
+import { ReactComponent as BookingCalendar } from "../../../assets/dashboard/bookingCalendar.svg";
+import { ReactComponent as BookingList } from "../../../assets/dashboard/bookingList.svg";
+import { ReactComponent as BookingListSmall } from "../../../assets/dashboard/bookingListSmall.svg";
+
+const VIEW_TYPES: BOOKING_TYPE[] = [BOOKING_LIST_TYPE, BOOKING_CALENDAR_TYPE];
+
+export type BookingTabsProps = HasPermissionProp &
+  PropsWithChildren<{
+    onReportsClick?: () => void;
+    onAddButtonClick?: () => void;
+    viewType: BOOKING_TYPE;
+    onSetType: (value: BOOKING_TYPE) => void;
+  }>;
+
+export const BookingTabs = ({
+  children,
+  onReportsClick,
+  onAddButtonClick,
+  hasPermission = false,
+  viewType,
+  onSetType,
+}: BookingTabsProps) => {
+  const { t } = useTranslation("Design");
+
+  return (
+    <div className="booking-tabs-pane">
+      <div className="booking-tabs">
+        {VIEW_TYPES.map((tabType: BOOKING_TYPE) => {
+          return (
+            <Button
+              key={tabType}
+              variant="link"
+              size="sm"
+              className={clsx(
+                "p-0 m-0 pr-2 shadow-none",
+                viewType === tabType && "active"
+              )}
+              onClick={() => {
+                onSetType(tabType);
+              }}
+            >
+              {tabType === BOOKING_LIST_TYPE ? (
+                <BookingList />
+              ) : (
+                <BookingCalendar />
+              )}
+            </Button>
+          );
+        })}
+      </div>
+      <span className="separator" />
+      <div className="children">{children}</div>
+      {hasPermission && (
+        <div className="buttons">
+          <Button
+            variant="outline-primary"
+            className="shadow-none mr-4"
+            onClick={onReportsClick}
+          >
+            <BookingListSmall className="mr-2" />
+            {t("generateReports")}
+          </Button>
+          <Button
+            variant="primary"
+            className="shadow-none"
+            onClick={onAddButtonClick}
+          >
+            <div className="icon">
+              <Icon type="plus" style={{ width: 10 }} color="#0E8CE2" />
+            </div>
+            {t("newBooking")}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/sales/booking/tabs/index.ts

@@ -0,0 +1,2 @@
+export { BookingTabs } from "./BookingTabs";
+export type { BookingTabsProps } from "./BookingTabs";

package/src/sales/coupon/control/CouponFormControl.tsx

@@ -233,7 +233,6 @@ export const CouponFormControl = ({
               <Form.Control
                 type="date"
                 {...register("validTill")}
-                value={validTillValue}
                 onChange={(e) => {
                   const date = DateTime.fromSQL(e.target.value).toISODate();
                   setValue("validTill", date);
@@ -332,7 +331,6 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t("Design:totalCoupons")}</Form.Label>
               <Form.Control
-                {...register("totalCoupons")}
                 type="number"
                 isInvalid={errors.totalCoupons !== undefined}
                 disabled={isLoading}

package/src/sales/filters/SaleFilter.stories.tsx

@@ -13,7 +13,7 @@ export const Default: Story<SaleFiltersProps> = () => {
     name: "",
     email: "",
     date: "",
-    is_in_cart: false,
+    is_pending: false,
   });
 
   return <SaleFilters values={values} onChange={setValues} />;

package/src/sales/filters/SaleFilters.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { TextField } from "../../static/TextField";
 import { DateRangeInput } from "../../static/date-range-input";
 
-export interface Filters {
+interface Filters {
   id: string;
   name: string;
   email: string;
@@ -12,7 +12,7 @@ export interface Filters {
   order_date_to: string;
   orderable_date_from: string;
   orderable_date_to: string;
-  is_in_cart: boolean;
+  is_pending: boolean;
 }
 
 export interface SaleFiltersProps {

package/src/sales/manual-booking/category-product/CategoryProduct.tsx

@@ -5,8 +5,8 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import MediaService from "@licklist/plugins/dist/services/Media/MediaService";
+import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { OrderProduct } from "@licklist/core/dist/DataMapper/Order/OrderProductDataMapper";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { NumberInputHorizontal } from "../number-input-horizontal";
 import { Product } from "../../../types";
 import { TipTapEditor } from "../../../tiptap-editor";
@@ -14,7 +14,7 @@ import { TipTapEditor } from "../../../tiptap-editor";
 interface CategoryProductProps {
   product: Product;
   fieldIndex: `steps.${number}.productCategories.${number}.products.${number}`;
-  productsWithErrors?: QuantityCheckProductInfo[];
+  productsWithErrors?: ProductQuantityCheckResponse["products"];
   isLoading?: boolean;
   isEditMode?: boolean;
   isProductSetAvailable?: boolean;

package/src/sales/manual-booking/category-products/CategoryProducts.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Accordion } from "react-bootstrap";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { OrderProduct } from "@licklist/core/dist/DataMapper/Order/OrderProductDataMapper";
 import { CollapsibleInputGroup } from "../../../collapsible-input-group";
 import { Product } from "../../../types";
@@ -11,7 +11,7 @@ interface CategoryProductsProps {
   stepIndex: number;
   categoryIndex: number;
   products?: Product[];
-  productsWithErrors?: QuantityCheckProductInfo[];
+  productsWithErrors?: ProductQuantityCheckResponse["products"];
   isLoading?: boolean;
   isEditMode?: boolean;
   isProductSetAvailable?: boolean;

package/src/sales/manual-booking/controll/ManualBookingStepsControll.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useState } from "react";
 import { Accordion } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { OrderProduct } from "@licklist/core/dist/DataMapper/Order/OrderProductDataMapper";
-import { ErrorModal } from "../../../iframe/order-process/components/ErrorModal/ErrorModal";
+import { ErrorModal } from "../../../iframe/order-process/components/CalendarStepsForm/components/ErrorModal";
 import { MenuStep } from "../../../types";
 import { CollapsibleInputGroup } from "../../../collapsible-input-group";
 import { CategoryProducts } from "../category-products/CategoryProducts";
@@ -12,7 +12,7 @@ import { CategoryProducts } from "../category-products/CategoryProducts";
 export interface ManualBookingStepsControllProps {
   step: MenuStep;
   stepIndex: number;
-  productsWithErrors?: QuantityCheckProductInfo[];
+  productsWithErrors?: ProductQuantityCheckResponse["products"];
   isLoading?: boolean;
   isEditMode?: boolean;
   isProductSetAvailable?: boolean;

package/src/sales/manual-booking/select-menu/SelectMenu.tsx

@@ -39,9 +39,7 @@ export const SelectMenu = ({
       ) : (
         <>
           {!isLoading && (
-            <Form.Label className="bold-text">
-              {t("Design:productSets")}
-            </Form.Label>
+            <Form.Label className="bold-text">{t("App:menus")}</Form.Label>
           )}
 
           <div className="menu-list-manual-booking">

package/src/setting/dashboard/index.ts

@@ -1,5 +1,7 @@
 export * from "./DashboardSettingForm";
+export * from "./snippets/form";
 export * from "./snippets/card";
 export * from "./snippet-templates/card";
 export * from "./payments/payments-form/PaymentsForm";
 export * from "./payments/payments-modal/PaymentsModal";
+export * from "./snippets/modal";

package/src/setting/dashboard/snippets/control/SnippetControl.tsx

@@ -0,0 +1,237 @@
+import React, { useEffect, useState } from "react";
+import { Col, Row, Form } from "react-bootstrap";
+import { useFormContext, Controller } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useId } from "@react-aria/utils";
+import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import { SNIPPET_TYPES } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
+import { Switch } from "../../../../static";
+import { ShortSnippetTemplate, SnippetFormValues } from "../form/SnippetForm";
+
+export interface SnippetControlProps {
+  isLoading: boolean;
+  templates: Array<ShortSnippetTemplate>;
+  providerHasMap?: boolean | null;
+}
+
+export function SnippetControl({
+  isLoading,
+  templates,
+  providerHasMap,
+}: SnippetControlProps) {
+  const { t } = useTranslation(["Design", "Validation", "User"]);
+  const [isValid, setIsValid] = useState(true);
+  const nameId = useId();
+  const displayDescriptionId = useId();
+  const displayCostId = useId();
+  const displayTypeId = useId();
+
+  const {
+    register,
+    watch,
+    control,
+    formState: { errors },
+    setValue,
+  } = useFormContext<SnippetFormValues>();
+  const type = watch("type");
+  const isEvent = type === "event";
+
+  const { displayCost, displayDescription, displayType } =
+    watch("snippetSetting");
+  const templateId = watch("templateId") || "";
+
+  useEffect(() => {
+    if (isEvent) {
+      setIsValid(displayDescription || displayCost || displayType);
+    }
+  }, [isEvent, displayDescription, displayCost, displayType]);
+
+  useEffect(() => {
+    if (!templateId) return;
+
+    const selectedTemplate = templates.find(
+      (template) =>
+        template.type === type && String(templateId) === String(template.id)
+    );
+
+    if (selectedTemplate) return;
+
+    setValue("templateId" as const, "");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [templateId, type, templates]);
+
+  return (
+    <>
+      <Row>
+        <Form.Group
+          as={Col}
+          controlId={nameId}
+          xs
+          sm={12}
+          md={8}
+          lg={10}
+          xl={12}
+        >
+          <Form.Label>{t("name")}</Form.Label>
+          <Form.Control
+            {...register("name", {
+              maxLength: 255,
+              required: t("Validation:fieldRequired", {
+                attribute: t("name"),
+              }) as string,
+            })}
+            placeholder={t("Design:snippetName")}
+            isInvalid={Boolean(errors.name)}
+          />
+          <Form.Control.Feedback type="invalid">
+            {errors.name?.message}
+          </Form.Control.Feedback>
+        </Form.Group>
+      </Row>
+      {providerHasMap && (
+        <Row>
+          <Controller
+            control={control}
+            name="type"
+            render={({ field: { name, value, onChange } }) => (
+              <Form.Group as={Col}>
+                <Form.Label>{t("type")}</Form.Label>
+                <Switch
+                  name={name}
+                  options={SNIPPET_TYPES.map((type) => ({
+                    id: type,
+                    value: t(type),
+                  }))}
+                  value={value}
+                  onChange={onChange}
+                  disabled={isLoading}
+                />
+              </Form.Group>
+            )}
+          />
+        </Row>
+      )}
+
+      <Row>
+        {isEvent && (
+          <Form.Group
+            as={Col}
+            className="mt-4"
+            xs
+            sm={12}
+            md={8}
+            lg={10}
+            xl={12}
+          >
+            <Form.Label className="mb-3">{t("Options")}</Form.Label>
+            <Form.Check
+              {...register("snippetSetting.displayDescription")}
+              id={displayDescriptionId}
+              isInvalid={!isValid}
+              name="snippetSetting.displayDescription"
+              label={t("Design:shouldShowDesc")}
+              custom
+              className="mb-3"
+              disabled={isLoading}
+            />
+            <Form.Check
+              {...register("snippetSetting.displayCost")}
+              id={displayCostId}
+              isInvalid={!isValid}
+              name="snippetSetting.displayCost"
+              label={t("Design:shouldShowCost")}
+              custom
+              className="mb-3"
+              disabled={isLoading}
+            />
+            <Form.Check
+              {...register("snippetSetting.displayType")}
+              id={displayTypeId}
+              isInvalid={!isValid}
+              name="snippetSetting.displayType"
+              label={t("Design:shouldShowType")}
+              custom
+              disabled={isLoading}
+            />
+            {!isValid && (
+              <div className="d-block invalid-feedback">
+                {t("Validation:fieldAtLeastSelected", {
+                  number: t("Design:one"),
+                  filedType: t("Design:checkbox"),
+                })}
+              </div>
+            )}
+          </Form.Group>
+        )}
+      </Row>
+      {isEvent && (
+        <Row>
+          <Form.Group as={Col} xs sm={12} md={8} lg={10} xl={12}>
+            <Form.Label>{t("eventsView")}</Form.Label>
+            <Form.Control
+              as="select"
+              {...register("viewType", {
+                required: t("Validation:fieldRequired", {
+                  attribute: t("viewType"),
+                }) as string,
+              })}
+              placeholder={t("Design:eventsView")}
+              disabled={isLoading}
+            >
+              <option value="grid">{t("Design:grid")}</option>
+              <option value="list">{t("Design:list")}</option>
+            </Form.Control>
+          </Form.Group>
+        </Row>
+      )}
+      <Row>
+        <Form.Group as={Col} xs sm={12} md={8} lg={10} xl={12}>
+          <Controller
+            control={control}
+            name="templateId"
+            rules={{ required: true }}
+            render={({
+              field: { value, onChange },
+              fieldState: { invalid, error },
+            }) => {
+              const fieldSetValue = value ? String(value) : "";
+              return (
+                <>
+                  <Form.Label className="mt-5">
+                    {t("snippetTemplate")}
+                  </Form.Label>
+                  <Form.Control
+                    as="select"
+                    disabled={isLoading}
+                    onChange={onChange}
+                    isInvalid={invalid}
+                    value={fieldSetValue}
+                  >
+                    <option value="">{t("Design:pleaseChooseOne")}</option>
+                    {templates?.map((template) => {
+                      if (template.type !== type) {
+                        return null;
+                      }
+
+                      return (
+                        <option value={template.id} key={template.id}>
+                          {template.name}
+                        </option>
+                      );
+                    })}
+                  </Form.Control>
+                  <Form.Control.Feedback type="invalid">
+                    {HookFormService.hasError(error, "required") &&
+                      t("Validation:fieldRequired", {
+                        attribute: t("Design:snippetTemplate"),
+                      })}
+                  </Form.Control.Feedback>
+                </>
+              );
+            }}
+          />
+        </Form.Group>
+      </Row>
+    </>
+  );
+}

package/src/setting/dashboard/snippets/control/index.ts

@@ -0,0 +1 @@
+export * from "./SnippetControl";