@licklist/design 0.44.485-dev.63 → 0.44.485-dev.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.485-dev.63",
+  "version": "0.44.485-dev.65",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -53,7 +53,7 @@
     "@fortawesome/free-brands-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.9",
-    "@licklist/core": ">=0.15.27-dev.0 < 0.15.27",
+    "@licklist/core": ">=0.15.28-dev.0 < 0.15.28",
     "@licklist/eslint-config": "0.3.4",
     "@licklist/plugins": ">=0.20.133-dev.5 < 0.20.133",
     "@mdx-js/react": "1.6.22",

package/src/events/event-venue-map/components/MapPoint/MapPoint.tsx

@@ -144,7 +144,7 @@ export const MapPoint = ({
           x={pointX}
           y={pointY}
           isActive={isActive}
-          hasProduct={!isSoldOut && Boolean(pointProduct)}
+          hasProduct={Boolean(pointProduct)}
           pointNumber={pointNumber}
           onDelete={onDelete}
           editMode={editMode}

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

@@ -37,7 +37,6 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
     clearErrors,
     setError,
     watch,
-    trigger,
     formState: { errors },
   } = useFormContext<T>();
   const { t } = useTranslation("Design");
@@ -48,10 +47,6 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
     `${fieldNamePrefix}.totalQuantity` as Path<T>
   );
 
-  // trigger total quantity field's validation if disabled state was changed
-  useEffect(() => {
-    trigger(`${fieldNamePrefix}.totalQuantity` as Path<T>);
-  }, [disabled, fieldNamePrefix, trigger]);
 
   useEffect(() => {
     if (Number(totalQuantityValue) === 0) {

package/src/provider/constants.ts

@@ -1 +1 @@
-export const MAX_DESCRIPTION_CHARACTERS_LENGTH = 25256;
+export const MAX_DESCRIPTION_CHARACTERS_LENGTH = 25500;

package/src/provider/provider-details-input/ProviderDetailsInput.tsx

@@ -52,7 +52,7 @@ export function ProviderDetailsInput({
 
   useEffect(() => {
     if (MAX_DESCRIPTION_CHARACTERS_LENGTH > description.length) return;
-    notification.warning({
+    notification.danger({
       title: t("App:warning"),
       message: t("Validation:descriptionTooManyCharactersMessage", {
         max: MAX_DESCRIPTION_CHARACTERS_LENGTH,

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,
+};

package/src/sorting-select/SortingSelect.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
+import { Form, FormGroupProps } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import {
+  SORT_DIRECTION_ASC,
+  SORT_DIRECTION_NEWEST,
+  SORT_DIRECTION_DESC,
+  SORT_KEY_NAME,
+  SORT_KEY_CREATED_AT,
+} from "@licklist/core/dist/Config";
+
+export type SortingSelectProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  formGroupProps?: FormGroupProps & Record<string, any>;
+  defaultSortKey?: string;
+  defaultSortDirection?: string;
+  onSortingChange?: (url: URLSearchParams) => void;
+};
+
+export const SortingSelect = ({
+  formGroupProps,
+  defaultSortKey = SORT_KEY_NAME,
+  defaultSortDirection = SORT_DIRECTION_ASC,
+  onSortingChange,
+}: SortingSelectProps) => {
+  const { t } = useTranslation("Design");
+  const [controlValue, setControlValue] = useState(SORT_DIRECTION_ASC);
+  const searchParams = useQuery();
+
+  const { sortKey = defaultSortKey, sortDirection = defaultSortDirection } =
+    Object.fromEntries(searchParams);
+
+  const onSortingValueChange = ({ target: { value } }) => {
+    setControlValue(value);
+
+    const nextSortDirection =
+      value === SORT_DIRECTION_NEWEST ? SORT_DIRECTION_DESC : value;
+
+    const nextSortKey =
+      value === SORT_DIRECTION_NEWEST ? SORT_KEY_CREATED_AT : sortKey;
+
+    const nextSearchParams = new URLSearchParams(searchParams);
+
+    nextSearchParams.set("sortDirection", nextSortDirection);
+    nextSearchParams.set("sortKey", nextSortKey);
+
+    onSortingChange(nextSearchParams);
+  };
+
+  useEffect(() => {
+    if (sortKey === SORT_KEY_CREATED_AT) {
+      setControlValue(SORT_DIRECTION_NEWEST);
+      return;
+    }
+
+    setControlValue(sortDirection);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sortKey, sortDirection]);
+
+  return (
+    <Form.Group className="d-flex align-items-center p-0" {...formGroupProps}>
+      <Form.Label className="text-nowrap mr-4 mb-0">
+        {t("App:sortBy")}:
+      </Form.Label>
+      <Form.Control
+        as="select"
+        data-testid="sorting-select"
+        onChange={onSortingValueChange}
+        custom
+        value={controlValue}
+      >
+        <option value={SORT_DIRECTION_ASC}>A-Z</option>
+        <option value={SORT_DIRECTION_DESC}>Z-A</option>
+        <option value={SORT_DIRECTION_NEWEST}>{t("newestOnTop")}</option>
+      </Form.Control>
+    </Form.Group>
+  );
+};

package/src/sorting-select/index.ts

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