@wix/patterns 1.308.0 → 1.317.0

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep2653849695";
+var _namespace_ = "PickerContentAdditionalStep2051639453";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContentAdditionalStep2653849695__root","titles":"PickerContentAdditionalStep2653849695__titles","suffix":"PickerContentAdditionalStep2653849695__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2051639453__root","titles":"PickerContentAdditionalStep2051639453__titles","suffix":"PickerContentAdditionalStep2051639453__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerTableListItem/PickerTableListItem.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem4193578985";
+var _namespace_ = "PickerTableListItem2181412847";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerTableListItem4193578985__root"};
+export var classes = {"root":"PickerTableListItem2181412847__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ScrollableContent/ScrollableContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent2579072526";
+var _namespace_ = "ScrollableContent3215793638";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ScrollableContent2579072526__root"};
+export var classes = {"root":"ScrollableContent3215793638__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SkeletonCard/SkeletonCard.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard342119583";
+var _namespace_ = "SkeletonCard837474356";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SkeletonCard342119583__root","headerLoading":"SkeletonCard342119583__headerLoading"};
+export var classes = {"root":"SkeletonCard837474356__root","headerLoading":"SkeletonCard837474356__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SlidingModal/SlidingModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SlidingModal1985984796";
+var _namespace_ = "SlidingModal1449859352";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SlidingModal1985984796__root"};
+export var classes = {"root":"SlidingModal1449859352__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Suggestions/MarketingCard.tsx

@@ -0,0 +1,196 @@
+import React from 'react';
+import {
+  Box,
+  MarketingLayout,
+  SkeletonLine,
+  Card,
+  Button,
+  BadgeSkin,
+  ButtonSkin,
+  Image,
+  Text,
+  TextButton,
+  Badge,
+  SkeletonRectangle,
+  ButtonPriority,
+} from '@wix/design-system';
+import { Offer } from '@wix/bex-utils/@wix/ambassador-dealer-v1-serving-offer/types';
+import { BaseCardComponentProps, SuggestionsCardProps } from './types';
+
+/**
+ * Schema for marketing card content.
+ * This defines the structure expected in offer.asset.creative for MarketingCard rendering.
+ */
+export interface MarketingCardSchema {
+  title: string;
+  description: {
+    text: string;
+    learnMore?: {
+      link: string;
+      text?: string; // defaults to 'Learn more'
+    };
+  };
+  imageUrl: string;
+  ctaButton?: {
+    text: string;
+    link: string;
+    skin?: Extract<ButtonSkin, 'standard' | 'premium' | 'ai'>; // defaults to 'standard'
+    priority?: Extract<ButtonPriority, 'primary' | 'secondary'>; // defaults to 'secondary'
+  };
+  badge?: {
+    text: string;
+    skin?: Extract<BadgeSkin, 'general' | 'success' | 'premium'>; // defaults to 'general'
+  };
+}
+
+const getCardWidth = (totalOffers: number) => {
+  if (totalOffers === 1) {
+    return '100%';
+  }
+  if (totalOffers === 2) {
+    return '50%';
+  }
+  return '550px';
+};
+
+interface MarketingCardInternalProps {
+  schema: MarketingCardSchema;
+  totalOffers: number;
+}
+
+const MarketingCardInternal: React.FC<MarketingCardInternalProps> = ({
+  schema,
+  totalOffers,
+}) => {
+  const {
+    title,
+    description: descriptionData,
+    imageUrl,
+    ctaButton: ctaButtonData,
+    badge: badgeData,
+  } = schema;
+
+  const handleCtaClick = () => {
+    if (ctaButtonData?.link) {
+      window.open(ctaButtonData.link, '_blank');
+    }
+  };
+
+  const handleLearnMoreClick = () => {
+    if (descriptionData?.learnMore?.link) {
+      window.open(descriptionData.learnMore.link, '_blank');
+    }
+  };
+
+  const description = (
+    <>
+      <Text size="small" secondary dataHook="suggestions-card-subtitle">
+        {descriptionData.text}{' '}
+      </Text>
+      {descriptionData.learnMore && (
+        <TextButton
+          size="small"
+          secondary
+          dataHook="suggestions-card-learn-more"
+          onClick={handleLearnMoreClick}
+        >
+          {descriptionData.learnMore.text ?? 'Learn more'}
+        </TextButton>
+      )}
+    </>
+  );
+
+  const ctaButton = ctaButtonData ? (
+    <Button
+      size="small"
+      skin={ctaButtonData.skin || 'standard'}
+      priority={ctaButtonData.priority || 'secondary'}
+      dataHook="suggestions-card-button"
+      onClick={handleCtaClick}
+    >
+      {ctaButtonData.text}
+    </Button>
+  ) : null;
+
+  const badge = badgeData ? (
+    <Badge
+      skin={badgeData.skin || 'general'}
+      size="small"
+      dataHook="suggestion-card-badge"
+      uppercase={false}
+    >
+      {badgeData.text}
+    </Badge>
+  ) : null;
+
+  const image = (
+    <Image
+      src={imageUrl}
+      width={96}
+      height={96}
+      borderRadius="8px"
+      dataHook="suggestions-card-image"
+    />
+  );
+
+  return (
+    <Box dataHook="suggestions-card" width={getCardWidth(totalOffers)}>
+      <Card stretchVertically>
+        <MarketingLayout
+          title={title}
+          description={description}
+          image={image}
+          actions={[ctaButton]}
+          badge={badge}
+          hiddenBadge={!badge}
+        />
+      </Card>
+    </Box>
+  );
+};
+
+/**
+ * Creates a render function for marketing cards.
+ * @param translateOffer - Optional function to transform offer data into MarketingCardSchema.
+ *                         If not provided, uses offer.asset.creative directly.
+ * @returns A render function compatible with Suggestions.renderCard prop.
+ */
+export const renderMarketingCard =
+  (translateOffer?: (offer: Offer) => MarketingCardSchema | null) =>
+  (props: SuggestionsCardProps): React.ReactNode | null => {
+    const schema = translateOffer
+      ? translateOffer(props.offer)
+      : (props.offer?.asset?.creative as MarketingCardSchema | null);
+
+    const requiredFieldsExist =
+      schema?.title && schema?.imageUrl && schema?.description?.text;
+
+    if (!requiredFieldsExist) {
+      return null;
+    }
+    return (
+      <MarketingCardInternal schema={schema} totalOffers={props.totalOffers} />
+    );
+  };
+
+/**
+ * Skeleton component for MarketingCard during loading state.
+ */
+export const MarketingCardSkeleton: React.FC<BaseCardComponentProps> = ({
+  totalOffers,
+}) => {
+  return (
+    <Box dataHook="suggestions-card" width={getCardWidth(totalOffers)}>
+      <Card stretchVertically>
+        <MarketingLayout
+          title={<SkeletonLine width="120px" />}
+          description={<SkeletonLine width="168px" />}
+          actions={[<SkeletonRectangle width="72px" height="30px" />]}
+          image={<SkeletonRectangle width="96px" height="96px" />}
+          badge={<Badge />}
+          hiddenBadge={true}
+        />
+      </Card>
+    </Box>
+  );
+};

package/src/components/Suggestions/MarketingCard.uni.driver.ts

@@ -0,0 +1,53 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  MarketingLayoutUniDriver,
+  BadgeUniDriver,
+  ButtonUniDriver,
+  TextButtonUniDriver,
+  TextUniDriver,
+  ImageUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+
+export function MarketingCardUniDriver(base: UniDriver, body: UniDriver) {
+  const marketingLayout = MarketingLayoutUniDriver(base, body);
+
+  const subtitle = TextUniDriver(
+    base.$('[data-hook="suggestions-card-subtitle"]'),
+    body,
+  );
+  const learnMore = TextButtonUniDriver(
+    base.$('[data-hook="suggestions-card-learn-more"]'),
+    body,
+  );
+
+  const ctaButton = ButtonUniDriver(
+    base.$('[data-hook="suggestions-card-button"]'),
+    body,
+  );
+  const badge = BadgeUniDriver(
+    base.$('[data-hook="suggestion-card-badge"]'),
+    body,
+  );
+  const image = ImageUniDriver(
+    base.$('[data-hook="suggestions-card-image"]'),
+    body,
+  );
+
+  return {
+    ...baseUniDriverFactory(base),
+
+    getTitleText: () => marketingLayout.getTitleText(),
+    description: {
+      subtitle,
+      learnMore,
+    },
+    ctaButton,
+    badge,
+    image,
+  };
+}
+
+export type MarketingCardUniDriverType = ReturnType<
+  typeof MarketingCardUniDriver
+>;

package/src/components/Suggestions/Suggestions.tsx

@@ -1,33 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { CarouselWIP, CarouselWIPProps, COLOR_TOKENS } from '@wix/design-system';
+import {
+  CarouselWIP,
+  CarouselWIPProps,
+  COLOR_TOKENS,
+  Box,
+} from '@wix/design-system';
 import { SuggestionsState } from '../../state/Suggestions/SuggestionsState';
 import { observer } from 'mobx-react-lite';
-import { Offer } from '@wix/bex-utils/@wix/ambassador-dealer-v1-serving-offer/types';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
-
-export interface BaseCardComponentProps {
-  index: number;
-  totalCards: number;
-}
-
-export interface SuggestionsCardComponentProps extends BaseCardComponentProps {
-  offer: Offer;
-}
-
-export interface SuggestionsProps {
-  /** The placement ID to fetch offers for */
-  placementId: string;
-  /** Props to pass to the carousel component */
-  carouselProps?: CarouselWIPProps;
-  /** Card component to render each offer */
-  CardComponent: React.ComponentType<SuggestionsCardComponentProps>;
-  /** Skeleton component to render when loading */
-  CardSkeleton: React.ComponentType<BaseCardComponentProps>;
-  /** Number of skeletons to render when loading */
-  skeletonsNumber?: number;
-  /** Data hook to use for the suggestions component */
-  dataHook?: string;
-}
+import { MarketingCardSkeleton } from './MarketingCard';
+import { SuggestionsProps } from './types';
 
 const defaultCarouselProps: CarouselWIPProps = {
   hideDots: true,
@@ -39,14 +21,56 @@ const defaultCarouselProps: CarouselWIPProps = {
   controlsStartEnd: 'hidden',
 };
 
+interface SuggestionsContainerProps {
+  count: number;
+  children: React.ReactNode;
+  carouselProps?: CarouselWIPProps;
+  dataHook: string;
+  dataState: 'idle' | 'loading';
+}
+
+const SuggestionsContainer: React.FC<SuggestionsContainerProps> = ({
+  count,
+  children,
+  carouselProps,
+  dataHook,
+  dataState,
+}) => {
+  if (count <= 2) {
+    return (
+      <div data-hook={dataHook}>
+        <Box
+          direction="horizontal"
+          gap="SP4"
+          dataHook={`${dataHook}-container-${dataState}`}
+        >
+          {children}
+        </Box>
+      </div>
+    );
+  }
+
+  return (
+    <div data-hook={dataHook}>
+      <CarouselWIP
+        dataHook={`${dataHook}-carousel-${dataState}`}
+        {...defaultCarouselProps}
+        {...carouselProps}
+      >
+        {children}
+      </CarouselWIP>
+    </div>
+  );
+};
+
 export const Suggestions: React.FC<SuggestionsProps> = observer(
   ({
     placementId,
-    CardComponent,
-    CardSkeleton,
+    renderCard,
+    CardSkeleton = MarketingCardSkeleton,
     carouselProps,
     skeletonsNumber = 4,
-    dataHook,
+    dataHook = 'suggestions',
   }) => {
     const { httpClient } = useWixPatternsContainer();
 
@@ -59,46 +83,58 @@ export const Suggestions: React.FC<SuggestionsProps> = observer(
     }, [state]);
 
     if (state.hasOffers) {
+      const cardCount = state.offers.length;
+      const cards = state.offers
+        .map((offer, index) => ({
+          key: offer.offerGuid || `suggestion-${index}`,
+          element: renderCard({
+            offer,
+            index,
+            totalOffers: state.offers.length,
+          }),
+        }))
+        .filter(({ element }) => element !== null);
+
+      // Return null if all cards filtered out
+      if (cards.length === 0) {
+        return null;
+      }
+
       return (
-        <div data-hook={dataHook}>
-          <CarouselWIP
-            key="suggestions-carousel"
-            dataHook="suggestions-carousel"
-            {...defaultCarouselProps}
-            {...carouselProps}
-          >
-            {state.offers.map((offer, index: number) => (
-              <CardComponent
-                offer={offer}
-                index={index}
-                totalCards={state.offers.length}
-                key={offer.offerGuid || `suggestion-${index}`}
-              />
-            ))}
-          </CarouselWIP>
-        </div>
+        <SuggestionsContainer
+          // use initial cards count for container, to match the count the cards get rendered with
+          count={cardCount}
+          carouselProps={carouselProps}
+          dataHook={dataHook}
+          dataState="idle"
+        >
+          {cards.map(({ key, element }) => (
+            <React.Fragment key={key}>{element}</React.Fragment>
+          ))}
+        </SuggestionsContainer>
       );
     }
 
     if (state.isFetching) {
+      const skeletons = Array.from({ length: skeletonsNumber }).map(
+        (_, index) => (
+          <CardSkeleton
+            index={index}
+            totalOffers={skeletonsNumber}
+            key={index}
+          />
+        ),
+      );
+
       return (
-        <div data-hook={dataHook}>
-          <CarouselWIP
-            key="suggestions-carousel-skeleton"
-            dataHook="suggestions-carousel-skeleton"
-            {...defaultCarouselProps}
-            controlsPosition="none"
-            {...carouselProps}
-          >
-            {Array.from({ length: skeletonsNumber }).map((_, index) => (
-              <CardSkeleton
-                index={index}
-                totalCards={skeletonsNumber}
-                key={index}
-              />
-            ))}
-          </CarouselWIP>
-        </div>
+        <SuggestionsContainer
+          count={skeletonsNumber}
+          carouselProps={{ ...carouselProps, controlsPosition: 'none' }}
+          dataHook={dataHook}
+          dataState="loading"
+        >
+          {skeletons}
+        </SuggestionsContainer>
       );
     }
 

package/src/components/Suggestions/Suggestions.uni.driver.ts

@@ -4,35 +4,101 @@ import {
   UniDriver,
 } from '@wix/wix-ui-test-utils/unidriver';
 
-export const SuggestionsUniDriver = (base: UniDriver, body: UniDriver) => {
-  const carousel = CarouselWIPUniDriver(
-    base.$('[data-hook="suggestions-carousel"]'),
+export interface SuggestionsUniDriverOptions {
+  /** Data hook for the Suggestions component (default: 'suggestions') */
+  dataHook?: string;
+  /** Data hook for individual cards (default: 'suggestions-card' for MarketingCard) */
+  cardDataHook?: string;
+}
+
+export const SuggestionsUniDriver = (
+  base: UniDriver,
+  body: UniDriver,
+  options: SuggestionsUniDriverOptions = {},
+) => {
+  const dataHook = options.dataHook ?? 'suggestions';
+  const cardDataHook = options.cardDataHook ?? 'suggestions-card';
+
+  const carouselIdle = CarouselWIPUniDriver(
+    base.$(`[data-hook="${dataHook}-carousel-idle"]`),
     body,
   );
-  const carouselSkeleton = CarouselWIPUniDriver(
-    base.$('[data-hook="suggestions-carousel-skeleton"]'),
+  const carouselLoading = CarouselWIPUniDriver(
+    base.$(`[data-hook="${dataHook}-carousel-loading"]`),
     body,
   );
 
+  const containerIdle = base.$(`[data-hook="${dataHook}-container-idle"]`);
+  const containerLoading = base.$(
+    `[data-hook="${dataHook}-container-loading"]`,
+  );
+
+  const getCarouselChildren = async (): Promise<UniDriver[] | null> => {
+    if (await carouselIdle.exists()) {
+      // @ts-expect-error carousel types are wrong, getChildren returns a Promise of an array and not UniDriverList
+      return carouselIdle.getChildren();
+    }
+    if (await carouselLoading.exists()) {
+      // @ts-expect-error carousel types are wrong, getChildren returns a Promise of an array and not UniDriverList
+      return carouselLoading.getChildren();
+    }
+    return null;
+  };
+
+  const getContainerChildren = async () => {
+    if (await containerIdle.exists()) {
+      return containerIdle.$$(`[data-hook="${cardDataHook}"]`);
+    }
+    if (await containerLoading.exists()) {
+      return containerLoading.$$(`[data-hook="${cardDataHook}"]`);
+    }
+    return null;
+  };
+
+  const isLoadingState = async () => {
+    const isContainerLoading = await containerLoading.exists();
+    const isCarouselLoading = await carouselLoading.exists();
+    return isContainerLoading || isCarouselLoading;
+  };
+
   return {
     ...baseUniDriverFactory(base),
-    isLoading: () => carouselSkeleton.exists(),
-    hasOffers: () => carousel.exists(),
-    isEmpty: async () =>
-      !(await carousel.exists()) && !(await carouselSkeleton.exists()),
-    getCardsCounts: async () =>
-      // @ts-expect-error carousel types are wrong, getChildren returns a Promise of an array and not UniDriverList
-      (await carousel.exists()) ? (await carousel.getChildren()).length : 0,
-    getSkeletonCardsCount: async () =>
-      (await carouselSkeleton.exists())
-        ? // @ts-expect-error carousel types are wrong, getChildren returns a Promise of an array and not UniDriverList
-          (await carouselSkeleton.getChildren()).length
-        : 0,
-    // @ts-expect-error carousel types are wrong, getChildren returns a Promise of an array and not UniDriverList
-    getCardAt: async (index: number) => (await carousel.getChildren())[index],
-    getSkeletonCardAt: (index: number) =>
-      carouselSkeleton.getChildren().at(index),
-    carousel: () => carousel,
-    carouselSkeleton: () => carouselSkeleton,
+    isLoading: isLoadingState,
+    hasOffers: async () => {
+      const carouselExists = await carouselIdle.exists();
+      const containerExists = await containerIdle.exists();
+      return carouselExists || containerExists;
+    },
+    isEmpty: async () => {
+      const carouselExists = await carouselIdle.exists();
+      const containerExists = await containerIdle.exists();
+      return !carouselExists && !containerExists;
+    },
+    getCardsCounts: async () => {
+      const carouselChildren = await getCarouselChildren();
+      if (carouselChildren) {
+        return carouselChildren.length;
+      }
+      const containerChildren = await getContainerChildren();
+      if (containerChildren) {
+        return containerChildren.count();
+      }
+      return 0;
+    },
+    getCardAt: async (index: number) => {
+      const carouselChildren = await getCarouselChildren();
+      if (carouselChildren) {
+        return carouselChildren[index];
+      }
+      const containerChildren = await getContainerChildren();
+      if (containerChildren) {
+        return containerChildren.at(index);
+      }
+      throw new Error(`No cards found at index ${index}`);
+    },
+    carousel: async () =>
+      (await carouselIdle.exists()) ? carouselIdle : carouselLoading,
+    container: async () =>
+      (await containerIdle.exists()) ? containerIdle : containerLoading,
   };
 };

package/src/components/Suggestions/index.ts

@@ -1 +1,14 @@
-export * from './Suggestions';
+// Main component
+export { Suggestions } from './Suggestions';
+
+// Types
+export type {
+  SuggestionsProps,
+  SuggestionsCardProps,
+  BaseCardComponentProps,
+  Offer,
+} from './types';
+
+// MarketingCard - pre-built card component
+export { renderMarketingCard, MarketingCardSkeleton } from './MarketingCard';
+export type { MarketingCardSchema } from './MarketingCard';