@shopgate/engage 7.32.0-beta.2 → 7.32.0-beta.20

package/page/helpers/index.js

@@ -1,21 +1,17 @@
-/* eslint-disable max-len */
-
 /**
- * @typedef {import('./').ProductsWidgetInputConfig} ProductsWidgetInputConfig
+ * Configuration of the "Products" widget input.
  */
 
 /**
- * @typedef {import('./').GetProductSearchParamsFromProductsInputConfigReturnValue} GetProductSearchParamsFromProductsInputConfigReturnValue
+ * Return value of {@link getProductSearchParamsFromProductsInputConfig}.
  */
 
-/* eslint-enable max-len */
-
 /**
  * Helper to extract relevant search parameters from the widget configuration of the "Products"
  * input.
  * The return value can be used to e.g. parametrize the useWidgetProducts hook.
- * @param {ProductsWidgetInputConfig} products Config object of the "Products" input.
- * @returns {GetProductSearchParamsFromProductsInputConfigReturnValue}
+ * @param products Config object of the "Products" input.
+ * @returns The extracted product search parameters.
  */
 export const getProductSearchParamsFromProductsInputConfig = (products = {}) => {
   const {
@@ -28,8 +24,7 @@ export const getProductSearchParamsFromProductsInputConfig = (products = {}) =>
   const mapping = [['brand', brand], ['category', category], ['searchTerm', searchTerm], ['productIds', manualItemNumbers], ['productIds', selectorItemNumbers]];
 
   // Pick the first non-undefined value
-  // eslint-disable-next-line prefer-const
-  let [productsSearchType, productsSearchValue] = mapping.find(([, value]) => value !== undefined) || ['searchTerm', searchTerm];
+  const [productsSearchType, productsSearchValue] = mapping.find(([, value]) => value !== undefined) || ['searchTerm', searchTerm];
   return {
     productsSearchType,
     productsSearchValue
@@ -38,9 +33,9 @@ export const getProductSearchParamsFromProductsInputConfig = (products = {}) =>
 
 /**
  * Parses the image URL to return a high resolution version if required.
- * @param {string} url The original image URL.
- * @param {boolean} useHighRes Whether to return a high resolution version.
- * @returns {string} The parsed image URL.
+ * @param url The original image URL.
+ * @param useHighRes Whether to return a high resolution version.
+ * @returns The parsed image URL.
  */
 export const parseImageUrl = (url, useHighRes) => {
   if (!url || !useHighRes) {
@@ -51,32 +46,39 @@ export const parseImageUrl = (url, useHighRes) => {
 };
 
 /**
- * Retrieves the border radius based on the widget config
- * @param {Object} params The helper parameters.
- * @param {"default"|"none"|"rounded"|"custom"} params.borderRadius The border radius option.
- * @param {number} params.borderRadiusCustom The custom border radius value.
- * @returns {number} The resolved border radius.
+ * Parameters for {@link resolveBorderRadiusFromWidgetConfig}.
+ */
+
+/**
+ * Retrieves the border radius based on the widget config.
+ *
+ * `default` follows the app wide corner style, so it is returned as a reference to the theme's
+ * shape variable rather than a resolved length.
+ * @param params The helper parameters.
+ * @param params.borderRadius The border radius option.
+ * @param params.borderRadiusCustom The custom border radius value.
+ * @returns The resolved border radius as a CSS length.
  */
 export const resolveBorderRadiusFromWidgetConfig = ({
   borderRadius,
   borderRadiusCustom
 }) => {
-  if (borderRadius === 'none') return 0;
-  if (borderRadius === 'rounded') return 16;
-  if (borderRadius === 'custom' && typeof borderRadiusCustom === 'number') return borderRadiusCustom;
-  return 0;
+  if (borderRadius === 'none') return '0';
+  if (borderRadius === 'rounded') return '16px';
+  if (borderRadius === 'custom' && typeof borderRadiusCustom === 'number') return `${borderRadiusCustom}px`;
+  return 'var(--sg-shape-borderRadius)';
 };
 
 /**
- * Validator factory for regular expressions
- * @param {RegExp} regex the regex
- * @return {Function}
+ * Validator factory for regular expressions.
+ * @param regex The regular expression to match.
+ * @returns A function that validates if a value matches the regex.
  */
 export const matchesRegex = regex => val => !val || regex.test(val);
 
 /**
- * Returns a function that validates if input is a valid url with the https protocol
- * @param {string} val the string to be validated
- * @return {boolean}
+ * Validates if a given string is a valid HTTPS URL.
+ * @param val The string to validate.
+ * @returns True if the string is a valid HTTPS URL, false otherwise.
  */
-export const isHttpsUrl = matchesRegex(new RegExp('^\\s*https://[^\\s/$.?#].[^\\s]*\\s*$', 'i'));
+export const isHttpsUrl = matchesRegex(/^\s*https:\/\/[^\s/$.?#].[^\s]*\s*$/i);

package/page/hooks/index.d.ts

@@ -1,60 +1,61 @@
-import type { WidgetContextType } from '../components/Widgets/WidgetContext';
-
+import { type WidgetContextType } from '@shopgate/engage/page/components/Widgets';
 /**
  * The useWidget hook provides access to the context that is wrapped around a widget.
  * @returns The widget context.
  */
-export declare function useWidget<C = Record<string, any>>(): WidgetContextType<C>
-
-
-export type UseWidgetProductsOptions = {
-  /**
-   * The search value to use for the product search
-   */
-  value: string;
-  /**
-   * The type of product search to perform.
-   */
-  type: 'searchTerm' | 'productIds' | 'brand' | 'category' | 'highlights';
-  /**
-   * The number of products to return per page.
-   * @default 32
-   */
-  limit?: number;
-  /**
-   * Sort order for the products
-   * @default 'relevance'
-   */
-  sort?: 'relevance' | 'priceAsc' | 'priceDesc' | 'nameAsc' | 'nameDesc';
-};
-
-export type UseWidgetProductsResult = {
-  /**
-   * Function to fetch the next page of products.
-   */
-  fetchNext: () => void;
-  /**
-   * Whether there are more products to fetch.
-   */
-  hasNext: boolean;
-  /**
-   * Whether the products are currently being fetched.
-   */
-  isFetching: boolean;
-  /**
-   * Number of products available in the current result set.
-   */
-  totalResultCount: number;
-  /**
-   * Array of product results.
-   */
-  results: Object[];
+export declare const useWidget: <C = Record<string, unknown>>() => WidgetContextType<C>;
+/**
+ * Options for the {@link useWidgetProducts} hook.
+ */
+export interface UseWidgetProductsOptions {
+    /**
+     * The search value to use for the product search.
+     */
+    value: string;
+    /**
+     * The type of product search to perform.
+     */
+    type: 'searchTerm' | 'productIds' | 'brand' | 'category' | 'highlights';
+    /**
+     * The number of products to return per page.
+     * @default 32
+     */
+    limit?: number;
+    /**
+     * Sort order for the products.
+     * @default 'relevance'
+     */
+    sort?: 'relevance' | 'priceAsc' | 'priceDesc' | 'nameAsc' | 'nameDesc';
+}
+/**
+ * Result of the {@link useWidgetProducts} hook.
+ */
+export interface UseWidgetProductsResult {
+    /**
+     * Function to fetch the next page of products.
+     */
+    fetchNext: () => void;
+    /**
+     * Whether there are more products to fetch.
+     */
+    hasNext: boolean;
+    /**
+     * Whether the products are currently being fetched.
+     */
+    isFetching: boolean;
+    /**
+     * Number of products available in the current result set.
+     */
+    totalResultCount: number;
+    /**
+     * Array of product results.
+     */
+    results: unknown[];
 }
-
 /**
- * The useWidgetProducts hook provides an easy way to retrieve products based on a search term or
- * other criteria.
+ * Retrieves the products for the current widget.
+ * @param options Hook options.
+ * @returns The products and a function to fetch more products.
  */
-export declare function useWidgetProducts(
-  options: UseWidgetProductsOptions
-): UseWidgetProductsResult;
+export declare const useWidgetProducts: (options?: UseWidgetProductsOptions) => UseWidgetProductsResult;
+//# sourceMappingURL=index.d.ts.map

package/page/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../page/hooks/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAMjG;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,OAAK,iBAAiB,CAAC,CAAC,CAC1B,CAAC;AA2CpD;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,YAAY,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,CAAC;IACxE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;CACxE;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,EAAE,OAAO,EAAE,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAS,wBAAyD,KACjE,uBAyIF,CAAC"}

package/page/hooks/index.js

@@ -6,21 +6,9 @@ import { transformDisplayOptions } from '@shopgate/engage/core/helpers';
 import { fetchProductsByQuery } from '@shopgate/engage/product';
 import { makeGetWidgetProducts } from "../selectors";
 
-/**
- * @typedef {import('../components/Widgets/WidgetContext').WidgetContextType WidgetContextType}
- */
-
-/**
- * @typedef {import('./index').UseWidgetProductsOptions} UseWidgetProductsOptions
- */
-
-/**
- * @typedef {import('./index').UseWidgetProductsResult} UseWidgetProductsResult
- */
-
 /**
  * The useWidget hook provides access to the context that is wrapped around a widget.
- * @returns {WidgetContextType} The widget context.
+ * @returns The widget context.
  */
 export const useWidget = () => useContext(WidgetContext);
 const REQUEST_TYPE_MAPPING = {
@@ -31,10 +19,27 @@ const REQUEST_TYPE_MAPPING = {
   category: 5
 };
 
+/**
+ * Shape of the memoized widget products selector result. The underlying selector and its
+ * dependencies live in untyped JS, so the shape is described here at the consumption boundary.
+ */
+
+/**
+ * Shape of the result returned by the (untyped) `fetchProductsByQuery` thunk.
+ */
+
+/**
+ * Options for the {@link useWidgetProducts} hook.
+ */
+
+/**
+ * Result of the {@link useWidgetProducts} hook.
+ */
+
 /**
  * Retrieves the products for the current widget.
- * @param {UseWidgetProductsOptions} options Hook options
- * @returns {UseWidgetProductsResult} The products and a function to fetch more products.
+ * @param options Hook options.
+ * @returns The products and a function to fetch more products.
  */
 export const useWidgetProducts = (options = {}) => {
   const {

package/page/selectors/index.d.ts

@@ -0,0 +1,32 @@
+export * from "@shopgate/pwa-common/selectors/page";
+export function makeGetPrivacyPolicyLink(): string | null;
+export function makeGetPage({ type, slug, }: {
+    type?: PageType | undefined;
+    slug?: string | null | undefined;
+}): Function;
+export function makeGetWidgetsFromPage({ type, slug, dropzone, }: {
+    type?: PageType | undefined;
+    dropzone?: "cmsWidgetList" | undefined;
+    slug?: string | null | undefined;
+}): Function;
+/**
+ * Determines whether the new CMS version 2 is enabled.
+ */
+export const getIsCms2Enabled: ((state: any, ...params: any) => boolean) & import("reselect").OutputSelectorFields<(args_0: boolean, args_1: boolean) => boolean, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+export function makeGetUnifiedCMSPageData({ slug }: {
+    slug: string;
+}): Function;
+export function makeGetWidgetProducts(type: "searchTerm" | "productIds" | "brand" | "category" | "highlights", options: Object, id: string): Function;
+/**
+ * List of available page types.
+ */
+export type PageType = "cms" | "category";
+/**
+ * List of available dropzone types.
+ */
+export type DropzoneType = "cmsWidgetList";
+//# sourceMappingURL=index.d.ts.map

package/page/selectors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../page/selectors/index.js"],"names":[],"mappings":";AAmCO,4CAFM,MAAM,GAAC,IAAI,CAuBvB;AAyBM,6CAJJ;IAA0B,IAAI;IACD,IAAI;CACjC,YAcF;AAYM,kEANJ;IAA0B,IAAI;IACA,QAAQ;IAET,IAAI;CACjC,YAqBF;AAED;;GAEG;AACH;;;;EAIE;AASK,oDAHJ;IAAuB,IAAI,EAAnB,MAAM;CACd,YAwCF;AA2FM,4CANI,YAAY,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,GAAE,YAAY,WAEhE,MAAM,MACN,MAAM,YAkBhB;;;;uBA5NY,KAAK,GAAG,UAAU;;;;2BAKlB,eAAe"}

package/page/widget.config.schema.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Widget configuration",
+  "description": "Declares how the page builder treats a widget. The file lives next to the widget implementation and is read at build time, so its values are known before the widget itself is loaded.",
+  "type": "object",
+  "additionalProperties": false,
+  "properties": {
+    "$schema": {
+      "type": "string",
+      "description": "Path or url of this schema. Enables autocompletion and validation in the editor."
+    },
+    "layout": {
+      "type": "object",
+      "description": "How the container that the page builder renders around the widget behaves.",
+      "additionalProperties": false,
+      "properties": {
+        "applyMediaMargins": {
+          "description": "On which sides the widget gets the media widget margins that merchants configure in the theme settings. Margins configured for a single widget instance in the page builder always win. Widgets that bring their own spacing should leave this out.",
+          "default": false,
+          "oneOf": [
+            {
+              "type": "boolean",
+              "description": "true applies the media widget margins to all four sides, false to none."
+            },
+            {
+              "type": "object",
+              "description": "Opts in per side. An omitted side does not get the margin.",
+              "additionalProperties": false,
+              "minProperties": 1,
+              "properties": {
+                "top": {
+                  "type": "boolean",
+                  "description": "Whether the widget gets the media widget margin above it."
+                },
+                "bottom": {
+                  "type": "boolean",
+                  "description": "Whether the widget gets the media widget margin below it."
+                },
+                "left": {
+                  "type": "boolean",
+                  "description": "Whether the widget gets the media widget margin on its left. Widgets that are meant to touch the screen edges leave this out."
+                },
+                "right": {
+                  "type": "boolean",
+                  "description": "Whether the widget gets the media widget margin on its right. Widgets that are meant to touch the screen edges leave this out."
+                }
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+}

package/page/widgets/Button/Button.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { Button } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { useWidget } from '@shopgate/engage/page/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useNavigation } from '@shopgate/engage/core';
@@ -46,9 +46,8 @@ const ButtonWidget = () => {
   return /*#__PURE__*/_jsx("div", {
     className: classes.root,
     children: /*#__PURE__*/_jsx(Button, {
-      type: "secondary",
+      color: "primary",
       onClick: handleClick,
-      wrapContent: false,
       children: /*#__PURE__*/_jsx("span", {
         className: classes.text,
         children: text

package/page/widgets/CategoryList/CategoryList.js

@@ -6,7 +6,8 @@ import WidgetHeadline from "../../components/WidgetHeadline";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   headline: {
-    paddingBottom: theme.spacing(0)
+    paddingBottom: theme.spacing(0),
+    background: theme.palette.background.surface
   }
 }));
 

package/page/widgets/HeroBanner/config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": true
+  }
+}

package/page/widgets/Image/config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": true
+  }
+}

package/page/widgets/ImageRow/config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": true
+  }
+}

package/page/widgets/ImageSlider/config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../widget.config.schema.json",
+  "layout": {
+    "applyMediaMargins": true
+  }
+}

package/page/widgets/ImageSlider/hooks.js

@@ -145,11 +145,13 @@ export const useImageSliderWidget = () => {
         style: {
           ...(layout.marginLeft ? {
             marginLeft: layout.marginLeft * -1,
-            paddingLeft: layout.marginLeft
+            paddingLeft: layout.marginLeft,
+            '--swiper-pagination-inset-left': `${layout.marginLeft}px`
           } : {}),
           ...(layout.marginRight ? {
             marginRight: layout.marginRight * -1,
-            paddingRight: layout.marginRight
+            paddingRight: layout.marginRight,
+            '--swiper-pagination-inset-right': `${layout.marginRight}px`
           } : {})
         }
       } : null),

package/page/widgets/NestedCategoryFilter/NestedCategoryFilter.js

@@ -1,8 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { I18n, ButtonLink } from '@shopgate/engage/components';
+import { I18n } from '@shopgate/engage/components';
 import { bin2hex } from '@shopgate/engage/core/helpers';
 import { CATEGORY_PATH } from '@shopgate/engage/category';
 import { makeStyles } from '@shopgate/engage/styles';
+import { Button } from '@shopgate/engage/components/v2';
 import { useRoute, usePrevious, useLocalStorage } from '@shopgate/engage/core/hooks';
 import { router } from '@virtuous/conductor';
 import CategoryPicker from "./components/Picker";
@@ -16,10 +17,8 @@ const useStyles = makeStyles()(theme => ({
     paddingBottom: theme.spacing(2)
   },
   buttonContainer: {
-    padding: theme.spacing(0, 2)
-  },
-  button: {
-    width: '100%'
+    padding: theme.spacing(0, 2),
+    margin: theme.spacing(1, 0)
   }
 }));
 
@@ -142,11 +141,12 @@ const NestedCategoryFilter = () => {
       className: "widget__nested-category-filter__headline"
     }) : null, categoryPickers, /*#__PURE__*/_jsx("div", {
       className: cx(classes.buttonContainer, 'widget__nested-category-filter__button-container'),
-      children: /*#__PURE__*/_jsx(ButtonLink, {
-        className: cx(classes.button, 'widget__nested-category-filter__CTA-button'),
+      children: /*#__PURE__*/_jsx(Button, {
         href: `${CATEGORY_PATH}/${bin2hex(state.buttonCategoryId)}`,
+        color: "primary",
+        fullWidth: true,
+        className: "widget__nested-category-filter__CTA-button",
         disabled: !state.buttonCategoryId,
-        flat: false,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "common.show_products",
           className: "widget__nested-category-filter__CTA-button__text"

package/page/widgets/ProductList/ProductList.js

@@ -1,23 +1,27 @@
 import "core-js/modules/es.regexp.flags.js";
 import React, { useCallback } from 'react';
-import { ActionButton, I18n } from '@shopgate/engage/components';
+import { I18n } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { ProductGrid } from '@shopgate/engage/product/components';
 import { useWidgetProducts } from '@shopgate/engage/page/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useProductListWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
-    // Prevent that the ActionButton margin messes with the layout of the sibling widgets
     overflow: 'hidden'
   },
+  loadMore: {
+    textAlign: 'center',
+    margin: theme.spacing(1, 0)
+  },
   grid: {
     '&&': {
       marginTop: 0
     }
   }
-});
+}));
 
 /**
  * The ProductListWidget is used to display product lists.
@@ -66,16 +70,16 @@ const ProductListWidget = () => {
       scope: "widgets",
       infiniteLoad: false,
       className: classes.grid
-    }), hasNext && showLoadMore && /*#__PURE__*/_jsx(ActionButton, {
-      loading: isFetching,
-      onClick: handleFetchNext
-      // Disable click delay in preview mode to enable stopping of propagation.
-      ,
-      ...(isPreview && {
-        disableClickDelay: true
-      }),
-      children: /*#__PURE__*/_jsx(I18n.Text, {
-        string: "common.load_more"
+    }), hasNext && showLoadMore && /*#__PURE__*/_jsx("div", {
+      className: classes.loadMore,
+      children: /*#__PURE__*/_jsx(Button, {
+        variant: "text",
+        color: "secondary",
+        loading: isFetching,
+        onClick: handleFetchNext,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "common.load_more"
+        })
       })
     })]
   });

package/page/widgets/ProductSlider/ProductSlider.js

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { ProductSlider } from '@shopgate/engage/product/components';
 import { useWidgetProducts } from '@shopgate/engage/page/hooks';
-import { useTheme } from '@shopgate/engage/styles';
 import { useProductSliderWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
 
@@ -30,7 +29,6 @@ const ProductSliderWidget = () => {
     limit: productCount,
     sort
   });
-  const theme = useTheme();
   const productIds = useMemo(() => results?.map(result => result.id), [results]);
   if (!productIds || !productIds.length) {
     return null;
@@ -41,24 +39,12 @@ const ProductSliderWidget = () => {
     }) : null, /*#__PURE__*/_jsx(ProductSlider, {
       productIds: productIds,
       scope: "widgets",
-      productItemProps: productItemProps,
-      slidesPerView: 2.3
+      productItemProps: productItemProps
       // Improves interaction with the slider in the CMS preview iframe
       ,
       ...(isPreview ? {
         touchStartPreventDefault: true
       } : {}),
-      breakpoints: {
-        [theme.breakpoints.values.sm]: {
-          slidesPerView: 3.3
-        },
-        [theme.breakpoints.values.md]: {
-          slidesPerView: 4.3
-        },
-        [theme.breakpoints.values.lg]: {
-          slidesPerView: 5.3
-        }
-      },
       ...swiperProps
     })]
   });