npm - @licklist/design - Versions diffs - 0.44.485-dev.8 → 0.44.485-dev.80 - Mend

@licklist/design 0.44.485-dev.8 → 0.44.485-dev.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (887) hide show

package/src/help/popover/HelpPopover.tsx CHANGED Viewed

@@ -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/activities-card-page/components/activities-card/ActivitiesCard.tsx ADDED Viewed

@@ -0,0 +1,68 @@
+import React from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { useIntl } from "react-intl";
+export interface ActivitiesCardProps {
+  card: any;
+  onSelectCardId?: (productSetId: number) => void;
+  isActive: boolean;
+}
+export const ActivitiesCard = ({
+  card,
+  onSelectCardId,
+  isActive,
+}: ActivitiesCardProps) => {
+  const { formatNumber } = useIntl();
+  const { t } = useTranslation("Design");
+  const { imageSrc, title, time, cost } = card;
+  const onClick = () => {
+    onSelectCardId(card);
+  };
+  return (
+    <div
+      id={card.id}
+      role="button"
+      className={clsx("iframe-activities-card", isActive && "active")}
+      onClick={onClick}
+      onKeyPress={onClick}
+      tabIndex={0}
+    >
+      {imageSrc && (
+        <div
+          className="card-image"
+          style={{
+            backgroundImage: `url("${imageSrc}")`,
+          }}
+        />
+      )}
+      <div className={clsx("d-flex", "flex-column", !imageSrc && "no-image")}>
+        <div className="title">{title}</div>
+        {time && (
+          <div className="cost">
+            <div className="d-flex align-items-center">
+              <p className="m-0">
+                {time} {t("Mins")}
+              </p>
+            </div>
+          </div>
+        )}
+        {typeof cost === "number" && cost && (
+          <div className="label">
+            <div className="d-flex align-items-center mb-3">
+              <p className="m-0">
+                {t("from")}{" "}
+                {formatNumber(cost, { style: "currency", currency: "GBP" })}
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/iframe/activities-card-page/components/activities-card/ActivitiesCardList.stories.tsx ADDED Viewed

@@ -0,0 +1,120 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Meta } from "@storybook/react";
+import { ActivitiesCard } from "./ActivitiesCard";
+export default {
+  title: "Iframe/Activities Card/ActivitiesCardList",
+  component: Default,
+} as Meta;
+const currentCard = [
+  {
+    id: 1,
+    imageSrc:
+      "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    goToDetails: true,
+    title: "TEST CARD",
+    time: "45",
+    cost: 200,
+  },
+  {
+    id: 3,
+    imageSrc:
+      "https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=873&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 873w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1173&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1173w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1473&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1473w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1746&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1746w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1773&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1773w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2073w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2346&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2346w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2373&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2373w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2673&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2673w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2946&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2946w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2973&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2973w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=3008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3008w",
+    goToDetails: true,
+    title: "Clay Pigeons & Axe NEW CARD",
+    time: "45",
+    cost: 200,
+  },
+  {
+    id: 2,
+    imageSrc:
+      "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    goToDetails: false,
+    title: "TEST CARD",
+    time: "45",
+    cost: 200,
+  },
+  {
+    id: 4,
+    imageSrc:
+      "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    goToDetails: true,
+    title: "Clay Pigeons & Axe NEW CARD",
+    time: "45",
+    cost: 200,
+  },
+  {
+    id: 5,
+    imageSrc:
+      "https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=435&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 435w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=735&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 735w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 870w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=1035&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1035w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=1335&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1335w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1470w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=1635&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1635w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1935w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2070w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=2235&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2235w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=2535&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2535w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2670w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=2835&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2835w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=3135&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3135w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3270w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=3435&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3435w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=3735&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3735w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3870w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=4035&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4035w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=4335&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4335w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=4470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4470w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=4635&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4635w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=4935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4935w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=5070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5070w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=5235&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5235w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=5535&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5535w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=5670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5670w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=5835&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5835w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=6135&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 6135w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=6240&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 6240w",
+    goToDetails: true,
+    title: "Clay Pigeons & Axe NEW CARD",
+    time: "45",
+    cost: 200,
+  },
+  {
+    id: 6,
+    imageSrc:
+      "https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 774w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1074w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1374w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=1548&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1548w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=1674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1674w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1974w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2148&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2148w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2274&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2274w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2574w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2748&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2748w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2874w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=3174&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3174w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3348w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=3474&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3474w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3774w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=3948&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3948w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=4074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4074w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=4374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4374w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=4548&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4548w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=4674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4674w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=4974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4974w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=5148&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5148w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=5274&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5274w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=5574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5574w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=5748&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5748w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=5874&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5874w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=6000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 6000w",
+    goToDetails: true,
+    title: "Clay Pigeons & Axe NEW CARD",
+    time: "45",
+    cost: 200,
+  },
+  {
+    id: 9,
+    imageSrc:
+      "https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=873&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 873w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1173&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1173w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1473&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1473w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1746&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1746w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1773&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1773w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2073w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2346&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2346w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2373&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2373w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2673&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2673w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2946&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2946w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2973&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2973w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=3008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3008w",
+    goToDetails: true,
+    title: "Clay Pigeons & Axe NEW CARD",
+    time: "45",
+    cost: 200,
+  },
+];
+export function Default(props) {
+  const { t } = useTranslation("Design");
+  const [selectedCard, onSelectCardId] = useState<any | null>(null);
+  const onSelectCard = (item: number) => {
+    onSelectCardId(item);
+  };
+  return (
+    <div>
+    <h5 className="d-flex align-items-center justify-content-start w-100">
+      {t("selectActivities")}
+    </h5>
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, 15rem)",
+        gridGap: "1rem",
+        justifyContent: "center",
+        padding: "1rem",
+      }}
+    >
+      {currentCard.map((card) => (
+        <ActivitiesCard
+          key={card.id}
+          card={card}
+          isActive={selectedCard?.id === card.id}
+          onSelectCardId={onSelectCard}
+        />
+      ))}
+    </div>
+  </div>
+  );
+}
+Default.args = {
+  isLoading: false,
+  data: currentCard,
+  showBottomBlock: true,
+};

package/src/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.stories.tsx ADDED Viewed

@@ -0,0 +1,67 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { ActivitiesSelectedCard } from "./ActivitiesSelectedCard";
+export default {
+  title: "Iframe/Activities Selected Card/ActivitiesSelectedCard",
+  component: ActivitiesSelectedCard,
+} as Meta;
+export type ActiveCard = {
+  id: number;
+  imageSrc: string;
+  goToDetails: boolean;
+  title: string;
+  time: number;
+  cost: number;
+};
+export const Default: Story<any> = () => {
+  const currentCard = [
+    {
+      id: 1,
+      imageSrc:
+        "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      title: "TEST CARD",
+      time: "45",
+      cost: 200,
+    },
+    {
+      id: 3,
+      imageSrc:
+        "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      title: "Clay Pigeons & Axe NEW CARD",
+      time: "45",
+      cost: 200,
+    },
+    {
+      id: 2,
+      imageSrc:
+        "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      title: "People Item / Title",
+      time: "45",
+      cost: 200,
+    },
+  ];
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        flexDirection: "column",
+        padding: "0 1rem",
+      }}
+    >
+      {currentCard.map((card) => (
+        <ActivitiesSelectedCard
+          key={card.id}
+          imageSrc={card.imageSrc}
+          title={card.title}
+          cost={card.cost}
+          time={card.time}
+        />
+      ))}
+    </div>
+  );
+};

package/src/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.tsx ADDED Viewed

@@ -0,0 +1,57 @@
+import React from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { useIntl } from "react-intl";
+export interface ActivitiesSelectedCardProps {
+  imageSrc: string;
+  title: string;
+  time: string;
+  cost: number;
+}
+export const ActivitiesSelectedCard = ({
+  imageSrc,
+  title,
+  time,
+  cost,
+}: ActivitiesSelectedCardProps) => {
+  const { t } = useTranslation("Design");
+  const { formatNumber } = useIntl();
+  return (
+    <div>
+      <div className={clsx("selected-activities-card")}>
+        <div className="description">
+          <div className="title">{title}</div>
+          {time && (
+            <div>
+              <p>
+                {time} {t("Mins")}{" "}
+              </p>
+            </div>
+          )}
+          {typeof cost === "number" && cost && (
+            <div>
+              <p>
+                {t("from")}{" "}
+                {formatNumber(cost, { style: "currency", currency: "GBP" })}
+              </p>
+            </div>
+          )}
+        </div>
+        {imageSrc && (
+          <div className="image-container">
+            <div
+              className="image"
+              style={{ backgroundImage: `url("${imageSrc}")` }}
+            />
+          </div>
+        )}
+      </div>
+      <hr className="selected-activities-card-hr" />
+    </div>
+  );
+};

package/src/iframe/activities-card-page/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { ActivitiesSelectedCard } from "./components/activities-selected-card/ActivitiesSelectedCard";
2	+ export { ActivitiesCard } from "./components/activities-card/ActivitiesCard";

package/src/iframe/data-time-view-selector/DateAndTimeAndCalendar.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import React, { useMemo } from "react";
+import { EventCalendar } from "../event";
+import { viewType } from "./constants";
+import {
+  SelectDateAndTimeList,
+  SelectDateOrTimeList,
+} from "../select-date-time";
+interface SelectorDateAndTimeForViewProps {
+  view: viewType;
+}
+export const DateAndTimeAndCalendar = ({
+  view,
+}: SelectorDateAndTimeForViewProps) => {
+  const isLoading = false;
+  const correctSelectorPage = useMemo(() => {
+    const disabledDates = [];
+    if (view === viewType.CALENDAR) {
+      return (
+        <EventCalendar disabledDates={disabledDates} isLoading={isLoading} />
+      );
+    }
+    if (view === viewType.DATE_AND_TIME) {
+      return <SelectDateAndTimeList />;
+    }
+    if (view === viewType.DATE || view === viewType.TIME) {
+      return <SelectDateOrTimeList view={view} />;
+    }
+    return <></>;
+  }, [view, isLoading]);
+  return (
+    <div className="date-time-selector-container">{correctSelectorPage}</div>
+  );
+};

package/src/iframe/data-time-view-selector/constants.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export enum viewType {
+  DATE = "date",
+  DATE_AND_TIME = "date-time",
+  TIME = "time",
+  CALENDAR = "calendar",
+}

package/src/iframe/data-time-view-selector/index.ts ADDED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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