@wix/patterns 1.307.0 → 1.316.0

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect1732618558";
+var _namespace_ = "MultipleDragOverlayEffect627430531";
 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":"MultipleDragOverlayEffect1732618558__root"};
+export var classes = {"root":"MultipleDragOverlayEffect627430531__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow3498633286";
+var _namespace_ = "NestedTableDragAndDropRow2380222773";
 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":"NestedTableDragAndDropRow3498633286__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2380222773__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PageWrapper/PageWrapperBase.tsx

@@ -6,6 +6,7 @@ import {
 } from '@wix/bex-core/react';
 import { PageState, SidePanelWidth } from '@wix/bex-core';
 import { runInAction } from 'mobx';
+import { WixDesignSystemProvider } from '@wix/design-system';
 
 export interface PageWrapperBaseProps {
   pageState?: PageState;
@@ -54,7 +55,7 @@ export function PageWrapperBase(props: PageWrapperBaseProps) {
     [],
   );
 
-  return (
+  let child = (
     <PageContextProvider value={state}>
       <div
         data-wix-patterns
@@ -78,4 +79,12 @@ export function PageWrapperBase(props: PageWrapperBaseProps) {
       </div>
     </PageContextProvider>
   );
+
+  if (state.isMobile) {
+    child = (
+      <WixDesignSystemProvider mobile={true}>{child}</WixDesignSystemProvider>
+    );
+  }
+
+  return child;
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent3366107491";
+var _namespace_ = "PickerContent646877739";
 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":"PickerContent3366107491__root"};
+export var classes = {"root":"PickerContent646877739__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep1248135679";
+var _namespace_ = "PickerContentAdditionalStep1520787953";
 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":"PickerContentAdditionalStep1248135679__root","titles":"PickerContentAdditionalStep1248135679__titles","suffix":"PickerContentAdditionalStep1248135679__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1520787953__root","titles":"PickerContentAdditionalStep1520787953__titles","suffix":"PickerContentAdditionalStep1520787953__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_ = "PickerTableListItem1287110513";
+var _namespace_ = "PickerTableListItem2468441107";
 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":"PickerTableListItem1287110513__root"};
+export var classes = {"root":"PickerTableListItem2468441107__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_ = "ScrollableContent4123272871";
+var _namespace_ = "ScrollableContent2387931131";
 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":"ScrollableContent4123272871__root"};
+export var classes = {"root":"ScrollableContent2387931131__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_ = "SkeletonCard847847600";
+var _namespace_ = "SkeletonCard3405140458";
 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":"SkeletonCard847847600__root","headerLoading":"SkeletonCard847847600__headerLoading"};
+export var classes = {"root":"SkeletonCard3405140458__root","headerLoading":"SkeletonCard3405140458__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_ = "SlidingModal2119512318";
+var _namespace_ = "SlidingModal41494342";
 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":"SlidingModal2119512318__root"};
+export var classes = {"root":"SlidingModal41494342__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>
       );
     }