@licklist/design 0.44.485-dev.64 → 0.44.485-dev.66

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -37,6 +37,7 @@ export function IntervalInput({
     formState: { errors },
     watch,
     control,
+    trigger,
     setValue,
   } = useFormContext<IntervalInputValues>();
 
@@ -84,6 +85,11 @@ export function IntervalInput({
     setIsOverriden(Boolean(isOverridenProductSet));
   }, [productSets, productSetId, setIsOverriden, editedProductSet]);
 
+  const onChangeEndDate = (nextEndtDate: string) => {
+    setValue("end", nextEndtDate);
+    trigger("end");
+  };
+
   return (
     <>
       <Form.Row className="interval-container">
@@ -113,9 +119,7 @@ export function IntervalInput({
             {...register("end", validationOptions.end)}
             value={end}
             name="end"
-            onChange={({ target: { value: nextEndtDate } }) =>
-              setValue("end", nextEndtDate)
-            }
+            onChange={({ target: { value: nextEndtDate } }) => onChangeEndDate(nextEndtDate)}
             min={start}
             isInvalid={Boolean(errors.end)}
             onClick={() => endDateInput?.current?.showPicker()}

package/src/help/popover/HelpPopover.tsx

@@ -1,23 +1,31 @@
 import { useId } from "@react-aria/utils";
-import React from "react";
+import React, { ReactNode } from "react";
 import Button from "react-bootstrap/Button";
 import OverlayTrigger from "react-bootstrap/OverlayTrigger";
 import Popover from "react-bootstrap/Popover";
 import { ButtonVariant } from "react-bootstrap/types";
+import clsx from "clsx";
 import Icon from "../../static/Icon";
 
 export type HelpPopoverProps = {
   children?: React.ReactElement | React.ReactElement[];
   title?: string;
   variant?: ButtonVariant;
+  icon?: ReactNode;
+  bordered?: boolean;
 };
 
-export function HelpPopover(props: HelpPopoverProps) {
-  const { children, title, variant = "light" } = props;
+export function HelpPopover({
+  children,
+  title,
+  variant = "light",
+  icon,
+  bordered = false,
+}: HelpPopoverProps) {
   const popoverId = useId();
 
   const popover = (
-    <Popover id={popoverId}>
+    <Popover id={popoverId} className={clsx(bordered && "border")}>
       <Popover.Title as="h3">{title}</Popover.Title>
       <Popover.Content>{children}</Popover.Content>
     </Popover>
@@ -39,7 +47,7 @@ export function HelpPopover(props: HelpPopoverProps) {
           {...triggerHandler}
           className="btn-icon-popover rounded-circle px-2 py-1 d-inline-flex align-items-center"
         >
-          <Icon type="question" style={{ width: "10px" }} />
+          {icon ?? <Icon type="question" style={{ width: "10px" }} />}
         </Button>
       )}
     </OverlayTrigger>

package/src/iframe/event/event-card/IframeEventCard.stories.tsx

@@ -11,18 +11,15 @@ export default {
 
 export function Default() {
   const showImage = boolean("showImage", true);
-  const displayCost = boolean("displayCost", false);
-  const displayType = boolean("displayType", true);
-  const displayDescription = boolean("displayDescription", false);
   const isListView = boolean("isListView", false);
 
   return (
     <div>
       <IframeEventCard
         imageSrc={
-          // eslint-disable-next-line max-len
           showImage
-            ? "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
+            ? // eslint-disable-next-line max-len
+              "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
             : undefined
         }
         title="Glitterbomb Bucks / Baga Chipz"
@@ -43,9 +40,8 @@ export function Default() {
         RuPaul's Drag Race UK to VINYL Cambridge! So get excited because
         the...`}
         snippetSetting={{
-          displayCost,
-          displayType,
-          displayDescription,
+          includeAvailability: ["calendar", "product_sets", "time_slots"],
+          includeFromPrice: ["calendar", "product_sets", "time_slots"],
         }}
         goToDetails={() => null}
         isListView={isListView}
@@ -59,9 +55,6 @@ export function Default() {
 
 export function EventCardSkeleton() {
   const showImage = boolean("showImage", true);
-  const displayCost = boolean("displayCost", false);
-  const displayType = boolean("displayType", true);
-  const displayDescription = boolean("displayDescription", false);
   const isListView = boolean("isListView", false);
 
   return (
@@ -69,9 +62,8 @@ export function EventCardSkeleton() {
       <IframeEventCardSkeleton
         showImage={showImage}
         snippetSetting={{
-          displayCost,
-          displayType,
-          displayDescription,
+          includeAvailability: ["calendar", "product_sets", "time_slots"],
+          includeFromPrice: ["calendar", "product_sets", "time_slots"],
         }}
         isListView={isListView}
       />

package/src/iframe/event/event-card/IframeEventCard.tsx

@@ -3,7 +3,7 @@ import { Card } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import clsx from "clsx";
-import { SnippetSetting } from "@licklist/core/dist/DataMapper/Provider/SnippetSettingDataMapper";
+import { Snippet } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
 import { TipTapEditor } from "../../../tiptap-editor/TipTapEditor";
 import { formatContent } from "../../../events/event-card/utils";
 import { ReactComponent as ClockSvg } from "../../../assets/iframe/clock.svg";
@@ -18,7 +18,8 @@ interface IframeEventCardProps {
   cost?: number;
   date: string;
   imageSrc?: string;
-  snippetSetting?: SnippetSetting;
+  // eslint-disable-next-line react/no-unused-prop-types
+  snippetSetting?: Snippet["widgetSetting"];
   colour?: string;
   goToDetails?: () => void;
   description?: string | null;
@@ -35,11 +36,6 @@ export function IframeEventCard({
   cost,
   date,
   imageSrc,
-  snippetSetting = {
-    displayType: true,
-    displayCost: true,
-    displayDescription: true,
-  },
   colour,
   goToDetails,
   description,
@@ -102,7 +98,7 @@ export function IframeEventCard({
             </div>
           </Card.Text>
 
-          {type && !!snippetSetting.displayType && (
+          {type && (
             <Card.Text as="div" className="list-view-hided">
               <div className="d-flex align-items-center mb-3">
                 <div className="icon-wrapper">
@@ -113,7 +109,7 @@ export function IframeEventCard({
             </Card.Text>
           )}
 
-          {typeof cost === "number" && !!snippetSetting.displayCost && (
+          {typeof cost === "number" && (
             <Card.Text as="div">
               <div className="d-flex align-items-center mb-3">
                 <div className="icon-wrapper">
@@ -127,7 +123,7 @@ export function IframeEventCard({
             </Card.Text>
           )}
 
-          {description && !!snippetSetting.displayDescription && (
+          {description && (
             <Card.Text as="div" className="list-view-hided">
               <TipTapEditor
                 viewMode

package/src/iframe/event/event-card/IframeEventCardSkeleton.tsx

@@ -2,11 +2,12 @@ import React, { memo } from "react";
 import { Card } from "react-bootstrap";
 import clsx from "clsx";
 import Skeleton from "react-loading-skeleton";
-import { SnippetSetting } from "@licklist/core/dist/DataMapper/Provider/SnippetSettingDataMapper";
+import { Snippet } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
 
 interface IframeEventCardSkeletonProps {
   showImage?: boolean;
-  snippetSetting?: SnippetSetting;
+  // eslint-disable-next-line react/no-unused-prop-types
+  snippetSetting?: Snippet["widgetSetting"];
   colour?: string;
   isListView?: boolean;
   className?: string;
@@ -15,11 +16,6 @@ interface IframeEventCardSkeletonProps {
 export const IframeEventCardSkeleton = memo(
   ({
     showImage,
-    snippetSetting = {
-      displayType: true,
-      displayCost: true,
-      displayDescription: true,
-    },
     colour,
     isListView = false,
     className,
@@ -61,31 +57,25 @@ export const IframeEventCardSkeleton = memo(
               </div>
             </Card.Text>
 
-            {!!snippetSetting.displayType && (
-              <Card.Text as="div" className="list-view-hided">
-                <div className="d-flex align-items-center mb-3">
-                  <p className="iframe-event-card__bold m-0">
-                    <Skeleton className="skeleton-w6" />
-                  </p>
-                </div>
-              </Card.Text>
-            )}
+            <Card.Text as="div" className="list-view-hided">
+              <div className="d-flex align-items-center mb-3">
+                <p className="iframe-event-card__bold m-0">
+                  <Skeleton className="skeleton-w6" />
+                </p>
+              </div>
+            </Card.Text>
 
-            {!!snippetSetting.displayCost && (
-              <Card.Text as="div">
-                <div className="d-flex align-items-center mb-3">
-                  <p className="iframe-event-card__bold m-0">
-                    <Skeleton className="skeleton-w6" />
-                  </p>
-                </div>
-              </Card.Text>
-            )}
+            <Card.Text as="div">
+              <div className="d-flex align-items-center mb-3">
+                <p className="iframe-event-card__bold m-0">
+                  <Skeleton className="skeleton-w6" />
+                </p>
+              </div>
+            </Card.Text>
 
-            {!!snippetSetting.displayDescription && (
-              <Card.Text as="div" className="list-view-hided">
-                <Skeleton className="w-100 h-100" />
-              </Card.Text>
-            )}
+            <Card.Text as="div" className="list-view-hided">
+              <Skeleton className="w-100 h-100" />
+            </Card.Text>
           </div>
         </Card.Body>
       </Card>

package/src/iframe/event/event-card/IframeEventCards.stories.tsx

@@ -581,9 +581,8 @@ export function Default() {
             date={String(event.startAt)}
             colour={event.colour}
             snippetSetting={{
-              displayCost,
-              displayType,
-              displayDescription,
+              includeAvailability: [],
+              includeFromPrice: [],
             }}
             imageSrc={event.imgSrc}
             goToDetails={() => {}}

package/src/image-radio-input/ImageRadioInput.stories.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { ImageRadioInput, ImageRadioInputProps } from "./ImageRadioInput";
+import { ReactComponent as MonthIcon } from "../assets/widgets/monthCalendar.svg";
+import Icon from "../static/Icon";
+
+export default {
+  title: "ImageRadioInput",
+  component: ImageRadioInput,
+} as Meta;
+
+type FormModel = {
+  test: string;
+};
+
+export const Default: Story<ImageRadioInputProps<FormModel>> = (args) => {
+  const form = useForm();
+
+  return (
+    <FormProvider {...form}>
+      <ImageRadioInput {...args} />
+    </FormProvider>
+  );
+};
+
+Default.args = {
+  img: <MonthIcon />,
+  label: "Month",
+  name: "test",
+};
+
+export const WithFontAwesomeIcon: Story<ImageRadioInputProps<FormModel>> = (
+  args
+) => {
+  const form = useForm();
+
+  return (
+    <FormProvider {...form}>
+      <ImageRadioInput {...args} />
+    </FormProvider>
+  );
+};
+
+WithFontAwesomeIcon.args = {
+  img: <Icon type="bars" />,
+  label: "List",
+  name: "test",
+};
+
+export const Disabled: Story<ImageRadioInputProps<FormModel>> = (args) => {
+  const form = useForm();
+
+  return (
+    <FormProvider {...form}>
+      <ImageRadioInput {...args} />
+    </FormProvider>
+  );
+};
+
+Disabled.args = {
+  img: <MonthIcon />,
+  label: "Month",
+  name: "test",
+  disabled: true,
+  disabledMessage: "Coming soon",
+};

package/src/image-radio-input/ImageRadioInput.tsx

@@ -0,0 +1,53 @@
+import clsx from "clsx";
+import React, { ReactNode } from "react";
+import { Form } from "react-bootstrap";
+import { FormCheckInputProps } from "react-bootstrap/esm/FormCheckInput";
+import { Path, RegisterOptions, useFormContext } from "react-hook-form";
+
+export type ImageRadioInputProps<FormModel> = {
+  img: ReactNode;
+  label: string;
+  value: string | number;
+  name: Path<FormModel>;
+  disabled?: boolean;
+  disabledMessage?: string;
+  rules?: RegisterOptions<FormModel>;
+  inputProps?: FormCheckInputProps;
+};
+
+export const ImageRadioInput = <FormModel,>({
+  img,
+  label,
+  value,
+  name,
+  disabled,
+  disabledMessage,
+  rules,
+  inputProps,
+}: ImageRadioInputProps<FormModel>) => {
+  const { register } = useFormContext<FormModel>();
+
+  return (
+    <Form.Check className="image-radio-input">
+      <Form.Check.Label
+        className={clsx("image-radio-input-wrapper", disabled && "disabled")}
+      >
+        <div className="image-radio-input-image-wrapper">{img}</div>
+
+        <div className="image-radio-input-label">
+          <Form.Check.Input
+            type="radio"
+            value={value}
+            disabled={disabled}
+            {...register(name, rules)}
+            {...inputProps}
+          />
+          <span>{label}</span>
+        </div>
+      </Form.Check.Label>
+      <Form.Control.Feedback type="valid" className="d-block text-center">
+        {disabledMessage}
+      </Form.Control.Feedback>
+    </Form.Check>
+  );
+};

package/src/index.ts

@@ -34,3 +34,6 @@ export * from "./resource";
 export * from "./virtualized";
 export * from "./customers";
 export * from "./striped-static-table";
+export * from "./radio-card";
+export * from "./image-radio-input";
+export * from "./sorting-select";

package/src/product-set/product/quantity/ProductQuantityRechargingControl.tsx

@@ -34,42 +34,19 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
   } = props;
   const {
     control,
-    clearErrors,
-    setError,
+    trigger,
     watch,
+    register,
     formState: { errors },
   } = useFormContext<T>();
   const { t } = useTranslation("Design");
   const totalQuantityId = useId();
 
   const maxQuantityValue = watch(`${fieldNamePrefix}.maxQuantity` as Path<T>);
-  const totalQuantityValue = watch(
-    `${fieldNamePrefix}.totalQuantity` as Path<T>
-  );
-
 
   useEffect(() => {
-    if (Number(totalQuantityValue) === 0) {
-      setError(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
-        type: HookFormService.manualErrorType,
-        message: t("Validation:fieldMinNumber", {
-          attribute: t("totalQuantity"),
-          min: 1,
-        }),
-      });
-    } else if (Number(maxQuantityValue) > Number(totalQuantityValue)) {
-      setError(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
-        type: HookFormService.manualErrorType,
-        message: t("Validation:fieldTotalNumber", {
-          attribute: t("totalQuantity"),
-          max: t("maxOrderQuantity"),
-        }),
-      });
-    } else {
-      clearErrors(`${fieldNamePrefix}.totalQuantity` as Path<T>);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [totalQuantityValue, maxQuantityValue, setError, clearErrors]);
+    trigger(`${fieldNamePrefix}.totalQuantity` as Path<T>);
+  }, [maxQuantityValue]);
 
   return (
     <>
@@ -90,6 +67,26 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
                 type="number"
                 min={0}
                 step={1}
+                {...register(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
+                  validate: (value) => {
+                    const min = 1;
+                    const maxQuantity = Number(maxQuantityValue);
+                    const totalQuantity = Number(value);
+                    if (totalQuantity < min) {
+                      return t("Validation:fieldMinNumber", {
+                        attribute: t("totalQuantity"),
+                        min: 1,
+                      }) as string;
+                    }
+                    if (totalQuantity < maxQuantity) {
+                      return t("Validation:fieldTotalNumber", {
+                        attribute: t("totalQuantity"),
+                        max: t("maxOrderQuantity"),
+                      }) as string;
+                    }
+                    return true;
+                  }
+                })}
                 value={value as string}
                 onFocus={onFocus}
                 onChange={onChange}

package/src/radio-card/RadioCard.stories.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from "react";
+import { Meta, Story } from "@storybook/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { RadioCard, RadioCardProps } from "./RadioCard";
+
+export default {
+  title: "Widgets / Widget Type Radio Card",
+  component: RadioCard,
+} as Meta;
+
+type FormModel = {
+  name: string;
+};
+
+export const Default: Story<RadioCardProps<FormModel>> = (args) => {
+  const form = useForm<FormModel>();
+
+  return (
+    <FormProvider {...form}>
+      <RadioCard {...args} />
+    </FormProvider>
+  );
+};
+
+Default.args = {
+  label: "Venue Map",
+  description: "Date > Floor",
+  name: "name",
+};
+
+export const Invalid: Story<RadioCardProps<FormModel>> = (args) => {
+  const form = useForm<FormModel>();
+
+  return (
+    <FormProvider {...form}>
+      <RadioCard {...args} />
+    </FormProvider>
+  );
+};
+
+Invalid.args = {
+  label: "Venue Map",
+  description: "Date > Floor",
+  name: "name",
+  inputProps: {
+    isInvalid: true,
+  },
+};

package/src/radio-card/RadioCard.tsx

@@ -0,0 +1,49 @@
+import clsx from "clsx";
+import React, { ReactNode } from "react";
+import { Form } from "react-bootstrap";
+import { FormCheckInputProps } from "react-bootstrap/esm/FormCheckInput";
+import { Path, RegisterOptions, useFormContext } from "react-hook-form";
+
+export type RadioCardProps<FormModel> = {
+  label: string;
+  description: ReactNode;
+  name: Path<FormModel>;
+  value: string;
+  rules: RegisterOptions<FormModel>;
+  inputProps?: FormCheckInputProps;
+};
+
+export const RadioCard = <FormModel,>({
+  label,
+  description,
+  name,
+  value,
+  rules,
+  inputProps,
+}: RadioCardProps<FormModel>) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<FormModel>();
+
+  const isInvalid = !!errors[name as string] || inputProps?.isInvalid;
+
+  return (
+    <Form.Check className={clsx("radio-card", isInvalid && "invalid")}>
+      <Form.Check.Label>
+        <div className="radio-card-controls">
+          <Form.Check.Input
+            type="radio"
+            isInvalid={isInvalid}
+            value={value}
+            {...register(name, rules)}
+            {...inputProps}
+          />
+          <span>{label}</span>
+        </div>
+
+        <p className="radio-card-description">{description}</p>
+      </Form.Check.Label>
+    </Form.Check>
+  );
+};

package/src/radio-card/index.ts

@@ -0,0 +1 @@
+export { RadioCard } from "./RadioCard";

package/src/setting/dashboard/index.ts

@@ -1,7 +1,5 @@
 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/snippet/snippet-template/preview/Preview.tsx

@@ -368,11 +368,6 @@ export function Preview({
                   type="Party Doors 22:00 - 03:00"
                   cost={6}
                   date="Sat 2nd May"
-                  snippetSetting={{
-                    displayCost: true,
-                    displayType: true,
-                    displayDescription: true,
-                  }}
                   goToDetails={() => null}
                   shortDate="07/03/2023"
                 />

package/src/sorting-select/SortingSelect.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { SortingSelect, SortingSelectProps } from "./SortingSelect";
+
+export default {
+  title: "SortingSelect",
+} as Meta;
+
+export const Default: Story<SortingSelectProps> = (props) => {
+  return <SortingSelect {...props} />;
+};
+
+Default.args = {
+  onSortingChange: () => null,
+};