@salesforce/commerce-sdk-react 1.0.0-preview.0

package/components/ShopperExperience/Component/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Component = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Page = require("../Page");
+const _excluded = ["data"];
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const ComponentNotFound = ({
+  typeId
+}) => /*#__PURE__*/_react.default.createElement("div", null, `Component type '${typeId}' not found!`);
+/**
+ * This component will render a page designer page given its serialized data object.
+ *
+ * @param {PageProps} props
+ * @param {Component} props.component - The page designer component data representation.
+ * @returns {React.ReactElement} - Experience component.
+ */
+const Component = ({
+  component
+}) => {
+  const pageContext = (0, _Page.usePageContext)();
+  const ComponentClass = (pageContext === null || pageContext === void 0 ? void 0 : pageContext.components[component.typeId]) || ComponentNotFound;
+  const {
+      data
+    } = component,
+    rest = _objectWithoutProperties(component, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: component.id,
+    className: "component"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "container"
+  }, /*#__PURE__*/_react.default.createElement(ComponentClass, _extends({}, rest, data))));
+};
+exports.Component = Component;
+Component.displayName = 'Component';
+var _default = Component;
+exports.default = _default;

package/components/ShopperExperience/Page/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { Component as ComponentType, Page as PageType } from '../types';
+declare type ComponentMap = {
+    [typeId: string]: React.ComponentType<ComponentType & unknown>;
+};
+interface PageProps extends React.ComponentProps<'div'> {
+    page: PageType;
+    components: ComponentMap;
+}
+declare type PageContextValue = {
+    components: ComponentMap;
+};
+export declare const PageContext: React.Context<PageContextValue | undefined>;
+export declare const usePageContext: () => PageContextValue;
+/**
+ * This component will render a page designer page given its serialized data object.
+ *
+ * @param {PageProps} props
+ * @param {Page} props.region - The page designer page data representation.
+ * @param {ComponentMap} props.components - A mapping of typeId's to react components representing the type.
+ * @returns {React.ReactElement} - Page component.
+ */
+export declare const Page: {
+    (props: PageProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Page;
+//# sourceMappingURL=index.d.ts.map

package/components/ShopperExperience/Page/index.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePageContext = exports.default = exports.PageContext = exports.Page = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactHelmet = require("react-helmet");
+var _Region = require("../Region");
+const _excluded = ["page", "components", "className"];
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+// This context will hold the component map as well as any other future context.
+const PageContext = /*#__PURE__*/_react.default.createContext(undefined);
+
+// This hook allows sub-components to use the page context. In our case we use it
+// so that the generic <Component /> can use the component map to know which react component
+// to render.
+exports.PageContext = PageContext;
+const usePageContext = () => {
+  const value = (0, _react.useContext)(PageContext);
+  if (!value) {
+    throw new Error('"usePageContext" cannot be used outside of a page component.');
+  }
+  return value;
+};
+
+/**
+ * This component will render a page designer page given its serialized data object.
+ *
+ * @param {PageProps} props
+ * @param {Page} props.region - The page designer page data representation.
+ * @param {ComponentMap} props.components - A mapping of typeId's to react components representing the type.
+ * @returns {React.ReactElement} - Page component.
+ */
+exports.usePageContext = usePageContext;
+const Page = props => {
+  const {
+      page,
+      components,
+      className = ''
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const [contextValue, setContextValue] = (0, _react.useState)({
+    components
+  });
+  const {
+    id,
+    regions,
+    pageDescription,
+    pageKeywords,
+    pageTitle
+  } = page || {};
+
+  // NOTE: This probably is not required as the list of components is known at compile time,
+  // but we might need this ability in the future if we are to lazy load components.
+  (0, _react.useEffect)(() => {
+    setContextValue(_objectSpread(_objectSpread({}, contextValue), {}, {
+      components
+    }));
+  }, [components]);
+  return /*#__PURE__*/_react.default.createElement(PageContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(_reactHelmet.Helmet, null, pageTitle && /*#__PURE__*/_react.default.createElement("title", null, pageTitle), pageDescription && /*#__PURE__*/_react.default.createElement("meta", {
+    name: "description",
+    content: pageDescription
+  }), pageKeywords && /*#__PURE__*/_react.default.createElement("meta", {
+    name: "keywords",
+    content: pageKeywords
+  })), /*#__PURE__*/_react.default.createElement("div", _extends({
+    id: id,
+    className: `page ${className}`
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+    className: "container"
+  }, regions === null || regions === void 0 ? void 0 : regions.map(region => /*#__PURE__*/_react.default.createElement(_Region.Region, {
+    key: region.id,
+    region: region
+  })))));
+};
+exports.Page = Page;
+Page.displayName = 'Page';
+var _default = Page;
+exports.default = _default;

package/components/ShopperExperience/Region/index.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Region as RegionType } from '../types';
+/**
+ * This PropType represents a `region` object from the ShopperExperience API.
+ */
+export declare const propType: PropTypes.Requireable<PropTypes.InferProps<{
+    id: PropTypes.Requireable<string>;
+    components: PropTypes.Requireable<(PropTypes.InferProps<{
+        data: PropTypes.Requireable<object>;
+        id: PropTypes.Requireable<string>;
+        typeId: PropTypes.Requireable<string>;
+    }> | null | undefined)[]>;
+}>>;
+interface RegionProps extends React.ComponentProps<'div'> {
+    region: RegionType;
+}
+/**
+ * This component will render a page designer region given its serialized data object.
+ *
+ * @param {RegionProps} props
+ * @param {Region} props.region - The page designer region data representation.
+ * @returns {React.ReactElement} - Region component.
+ */
+export declare const Region: {
+    (props: RegionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        region: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            id: PropTypes.Requireable<string>;
+            components: PropTypes.Requireable<(PropTypes.InferProps<{
+                data: PropTypes.Requireable<object>;
+                id: PropTypes.Requireable<string>;
+                typeId: PropTypes.Requireable<string>;
+            }> | null | undefined)[]>;
+        }>>>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+export default Region;
+//# sourceMappingURL=index.d.ts.map

package/components/ShopperExperience/Region/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propType = exports.default = exports.Region = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Component = require("../Component");
+var _propTypes2 = require("../prop-types");
+const _excluded = ["region", "className"];
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * This PropType represents a `region` object from the ShopperExperience API.
+ */
+const propType = _propTypes.default.shape({
+  id: _propTypes.default.string,
+  components: _propTypes.default.arrayOf(_propTypes2.componentPropType)
+});
+exports.propType = propType;
+/**
+ * This component will render a page designer region given its serialized data object.
+ *
+ * @param {RegionProps} props
+ * @param {Region} props.region - The page designer region data representation.
+ * @returns {React.ReactElement} - Region component.
+ */
+const Region = props => {
+  const {
+      region,
+      className = ''
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const {
+    id,
+    components
+  } = region;
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    id: id,
+    className: `region ${className}`
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+    className: "container"
+  }, components === null || components === void 0 ? void 0 : components.map(component => /*#__PURE__*/_react.default.createElement(_Component.Component, {
+    key: component.id,
+    component: component
+  }))));
+};
+exports.Region = Region;
+Region.displayName = 'Region';
+Region.propTypes = {
+  region: propType.isRequired,
+  className: _propTypes.default.string
+};
+var _default = Region;
+exports.default = _default;

package/components/ShopperExperience/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Component';
+export * from './Region';
+export * from './Page';
+export * from './prop-types';
+//# sourceMappingURL=index.d.ts.map

package/components/ShopperExperience/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Component = require("./Component");
+Object.keys(_Component).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Component[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Component[key];
+    }
+  });
+});
+var _Region = require("./Region");
+Object.keys(_Region).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Region[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Region[key];
+    }
+  });
+});
+var _Page = require("./Page");
+Object.keys(_Page).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Page[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Page[key];
+    }
+  });
+});
+var _propTypes = require("./prop-types");
+Object.keys(_propTypes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _propTypes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _propTypes[key];
+    }
+  });
+});

package/components/ShopperExperience/prop-types.d.ts

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+/**
+ * This PropType represents a `component` object from the ShopperExperience API.
+ */
+export declare const componentPropType: PropTypes.Requireable<PropTypes.InferProps<{
+    data: PropTypes.Requireable<object>;
+    id: PropTypes.Requireable<string>;
+    typeId: PropTypes.Requireable<string>;
+}>>;
+/**
+ * This PropType represents a `region` object from the ShopperExperience API.
+ */
+export declare const regionPropType: PropTypes.Requireable<PropTypes.InferProps<{
+    id: PropTypes.Requireable<string>;
+    components: PropTypes.Requireable<(PropTypes.InferProps<{
+        data: PropTypes.Requireable<object>;
+        id: PropTypes.Requireable<string>;
+        typeId: PropTypes.Requireable<string>;
+    }> | null | undefined)[]>;
+}>>;
+/**
+ * This PropType represents a `page` object from the ShopperExperience API.
+ */
+export declare const pageType: PropTypes.Requireable<PropTypes.InferProps<{
+    data: PropTypes.Requireable<object>;
+    description: PropTypes.Requireable<string>;
+    id: PropTypes.Requireable<string>;
+    name: PropTypes.Requireable<string>;
+    regions: PropTypes.Requireable<(PropTypes.InferProps<{
+        id: PropTypes.Requireable<string>;
+        components: PropTypes.Requireable<(PropTypes.InferProps<{
+            data: PropTypes.Requireable<object>;
+            id: PropTypes.Requireable<string>;
+            typeId: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+    }> | null | undefined)[]>;
+    typeId: PropTypes.Requireable<string>;
+}>>;
+//# sourceMappingURL=prop-types.d.ts.map

package/components/ShopperExperience/prop-types.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.regionPropType = exports.pageType = exports.componentPropType = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+/**
+ * This PropType represents a `component` object from the ShopperExperience API.
+ */
+const componentPropType = _propTypes.default.shape({
+  data: _propTypes.default.object,
+  id: _propTypes.default.string,
+  typeId: _propTypes.default.string
+});
+
+/**
+ * This PropType represents a `region` object from the ShopperExperience API.
+ */
+exports.componentPropType = componentPropType;
+const regionPropType = _propTypes.default.shape({
+  id: _propTypes.default.string,
+  components: _propTypes.default.arrayOf(componentPropType)
+});
+
+/**
+ * This PropType represents a `page` object from the ShopperExperience API.
+ */
+exports.regionPropType = regionPropType;
+const pageType = _propTypes.default.shape({
+  data: _propTypes.default.object,
+  description: _propTypes.default.string,
+  id: _propTypes.default.string,
+  name: _propTypes.default.string,
+  regions: _propTypes.default.arrayOf(regionPropType),
+  typeId: _propTypes.default.string
+});
+exports.pageType = pageType;

package/components/ShopperExperience/types.d.ts

@@ -0,0 +1,8 @@
+import { ApiClients, DataType } from '../../hooks/types';
+declare type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType[number];
+declare type Client = ApiClients['shopperExperience'];
+export declare type Page = DataType<Client['getPage']>;
+export declare type Region = ArrayElement<NonNullable<Page['regions']>>;
+export declare type Component = ArrayElement<NonNullable<Region['components']>>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/components/ShopperExperience/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ShopperExperience';
+//# sourceMappingURL=index.d.ts.map

package/components/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ShopperExperience = require("./ShopperExperience");
+Object.keys(_ShopperExperience).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ShopperExperience[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ShopperExperience[key];
+    }
+  });
+});

package/hooks/ShopperBaskets/cache.d.ts

@@ -0,0 +1,5 @@
+import { ApiClients, CacheUpdateMatrix } from '../types';
+declare type Client = ApiClients['shopperBaskets'];
+export declare const cacheUpdateMatrix: CacheUpdateMatrix<Client>;
+export {};
+//# sourceMappingURL=cache.d.ts.map