@salesforce/commerce-sdk-react 1.3.0 → 1.4.0-gpt-nightly-20240315030539

package/CHANGELOG.md

@@ -1,7 +1,12 @@
+## v1.4.0-gpt-nightly-20240315030539 (Mar 15, 2024)
+## v1.4.0-dev (Jan 22, 2024)
+- Fix invalid query params warnings and allow custom query [#1655](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1655)
+- Fix cannot read properties of undefined (reading 'unshift') [#1689](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1689)
+- Add Shopper SEO hook [#1688](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1688)
+
 ## v1.3.0 (Jan 19, 2024)
 
 - Add support for node 20 [#1612](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1612)
-- Fix bug when running in an iframe [#1629](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1629)
 
 ## v1.2.0 (Dec 08, 2023)
 

package/auth/index.d.ts

@@ -35,8 +35,6 @@ declare class Auth {
     private shopperCustomersClient;
     private redirectURI;
     private pendingToken;
-    private REFRESH_TOKEN_EXPIRATION_DAYS_REGISTERED;
-    private REFRESH_TOKEN_EXPIRATION_DAYS_GUEST;
     private stores;
     private fetchedToken;
     private OCAPISessionsURL;

package/auth/index.js

@@ -120,8 +120,6 @@ const DATA_MAP = {
  * @Internal
  */
 class Auth {
-  REFRESH_TOKEN_EXPIRATION_DAYS_REGISTERED = 90;
-  REFRESH_TOKEN_EXPIRATION_DAYS_GUEST = 30;
   constructor(config) {
     this.client = new _commerceSdkIsomorphic.ShopperLogin({
       proxy: config.proxy,
@@ -264,12 +262,11 @@ class Auth {
     this.set('customer_type', isGuest ? 'guest' : 'registered');
     const refreshTokenKey = isGuest ? 'refresh_token_guest' : 'refresh_token_registered';
     const refreshTokenCopyKey = isGuest ? 'refresh_token_guest_copy' : 'refresh_token_registered_copy';
-    const refreshTokenExpiry = isGuest ? this.REFRESH_TOKEN_EXPIRATION_DAYS_GUEST : this.REFRESH_TOKEN_EXPIRATION_DAYS_REGISTERED;
     this.set(refreshTokenKey, res.refresh_token, {
-      expires: refreshTokenExpiry
+      expires: res.refresh_token_expires_in
     });
     this.set(refreshTokenCopyKey, res.refresh_token, {
-      expires: refreshTokenExpiry
+      expires: res.refresh_token_expires_in
     });
   }
 

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

@@ -2,6 +2,7 @@ import { Component as ComponentType } from '../types';
 type ComponentProps = {
     component: ComponentType;
 };
+export declare const REQUIRED_EGPT_JSX_COMPONENTS: string[];
 /**
  * This component will render a page designer page given its serialized data object.
  *

package/components/ShopperExperience/Component/index.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Component = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.default = exports.REQUIRED_EGPT_JSX_COMPONENTS = exports.Component = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _Page = require("../Page");
+var _reactJsxParser = _interopRequireDefault(require("react-jsx-parser"));
 const _excluded = ["data"];
 /*
  * Copyright (c) 2023, Salesforce, Inc.
@@ -14,12 +15,21 @@ const _excluded = ["data"];
  * 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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!`);
+
+// The main use case for the JSX parser is to leverage eGPT Generative Components
+// from page designer. At the moment, only Chakra UI components are supported. There isn't
+// a good place to put this list of required components, so we'll just put it here for now.
+// In the future, we need to have a place to share the list.
+const REQUIRED_EGPT_JSX_COMPONENTS = exports.REQUIRED_EGPT_JSX_COMPONENTS = ['Accordion', 'AccordionButton', 'AccordionIcon', 'AccordionItem', 'AccordionPanel', 'Alert', 'AlertDialog', 'AlertDialogBody', 'AlertDialogContent', 'AlertDialogFooter', 'AlertDialogHeader', 'AlertDialogOverlay', 'AlertIcon', 'AlertTitle', 'AspectRatio', 'Badge', 'Box', 'Breadcrumb', 'BreadcrumbItem', 'BreadcrumbLink', 'Button', 'ButtonGroup', 'Center', 'ChakraProvider', 'Checkbox', 'CloseButton', 'Container', 'Divider', 'Drawer', 'DrawerBody', 'DrawerCloseButton', 'DrawerContent', 'DrawerFooter', 'DrawerHeader', 'DrawerOverlay', 'Fade', 'Flex', 'FormControl', 'FormErrorMessage', 'FormLabel', 'Grid', 'GridItem', 'HStack', 'Heading', 'Icon', 'IconButton', 'Image', 'Img', 'Input', 'InputGroup', 'InputLeftElement', 'InputRightElement', 'Link', 'List', 'ListItem', 'Modal', 'ModalBody', 'ModalCloseButton', 'ModalContent', 'ModalFooter', 'ModalHeader', 'ModalOverlay', 'Popover', 'PopoverArrow', 'PopoverBody', 'PopoverCloseButton', 'PopoverContent', 'PopoverFooter', 'PopoverHeader', 'PopoverTrigger', 'Portal', 'Radio', 'RadioGroup', 'Select', 'SimpleGrid', 'Skeleton', 'Spacer', 'Spinner', 'Stack', 'StackDivider', 'StylesProvider', 'Text', 'Tooltip', 'VStack', 'Wrap', 'WrapItem'];
+
 /**
  * This component will render a page designer page given its serialized data object.
  *
@@ -31,18 +41,49 @@ const Component = ({
   component
 }) => {
   const pageContext = (0, _Page.usePageContext)();
-  const ComponentClass = (pageContext === null || pageContext === void 0 ? void 0 : pageContext.components[component.typeId]) || ComponentNotFound;
+  const {
+    jsxParserComponents
+  } = pageContext;
   const {
       data
     } = component,
     rest = _objectWithoutProperties(component, _excluded);
+  const {
+    code
+  } = data || {};
+  const isEinsteinAssistedComponent = !!code;
+  let instance = /*#__PURE__*/_react.default.createElement(ComponentNotFound, _extends({}, rest, data));
+  (0, _react.useEffect)(() => {
+    if (isEinsteinAssistedComponent) {
+      const missingJsxComponents = REQUIRED_EGPT_JSX_COMPONENTS.filter(required => {
+        return !(jsxParserComponents !== null && jsxParserComponents !== void 0 && jsxParserComponents[required]);
+      });
+      Boolean(missingJsxComponents.length) && console.error('[Page Designer Einstein Assisted Component] - The following component implementation are missing: ', missingJsxComponents.join(', ') + '.\n', 'You must ensure the "jsxParserComponents" prop of the <Page/> component includes these components, otherwise the component may fail to render.');
+    }
+  }, [code === null || code === void 0 ? void 0 : code.code]);
+  if (isEinsteinAssistedComponent) {
+    // TODO: this is a workaround for the fact that
+    // 'react-jsx-parser' still uses React@16 typings
+    // we need to cast it to the newer React typings
+    const JsxParserComponent = _reactJsxParser.default;
+    instance = /*#__PURE__*/_react.default.createElement(JsxParserComponent, _extends({
+      components: pageContext.jsxParserComponents
+      // TODO: make component data structure more clear
+      // from the PD custom editor, let's not have "code.code"
+      ,
+      jsx: code.code
+    }, rest, data));
+  } else if (pageContext !== null && pageContext !== void 0 && pageContext.components[component.typeId]) {
+    const ComponentClass = pageContext === null || pageContext === void 0 ? void 0 : pageContext.components[component.typeId];
+    instance = /*#__PURE__*/_react.default.createElement(ComponentClass, _extends({}, rest, data));
+  }
   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))));
+  }, instance));
 };
 exports.Component = Component;
-Component.displayName = 'Component';
+Component.displayName = '[Page Designer] Component';
 var _default = exports.default = Component;

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

@@ -3,12 +3,15 @@ import type { Component as ComponentType, Page as PageType } from '../types';
 type ComponentMap = {
     [typeId: string]: React.ComponentType<ComponentType & unknown>;
 };
+type JsxParserComponents = Record<string, ComponentType>;
 interface PageProps extends React.ComponentProps<'div'> {
     page: PageType;
     components: ComponentMap;
+    jsxParserComponents?: JsxParserComponents;
 }
 type PageContextValue = {
     components: ComponentMap;
+    jsxParserComponents?: JsxParserComponents;
 };
 export declare const PageContext: React.Context<PageContextValue | undefined>;
 export declare const usePageContext: () => PageContextValue;
@@ -18,6 +21,7 @@ export declare const usePageContext: () => PageContextValue;
  * @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.
+ * @param {JsxParserComponents} [props.jsxParserComponents] - An array of react components that the jsx parser can use, optional.
  * @returns {React.ReactElement} - Page component.
  */
 export declare const Page: {

package/components/ShopperExperience/Page/index.js

@@ -7,7 +7,7 @@ exports.usePageContext = exports.default = exports.PageContext = exports.Page =
 var _react = _interopRequireWildcard(require("react"));
 var _reactHelmet = require("react-helmet");
 var _Region = require("../Region");
-const _excluded = ["page", "components", "className"];
+const _excluded = ["page", "components", "jsxParserComponents", "className"];
 /*
  * Copyright (c) 2023, Salesforce, Inc.
  * All rights reserved.
@@ -44,6 +44,7 @@ const usePageContext = () => {
  * @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.
+ * @param {JsxParserComponents} [props.jsxParserComponents] - An array of react components that the jsx parser can use, optional.
  * @returns {React.ReactElement} - Page component.
  */
 exports.usePageContext = usePageContext;
@@ -51,11 +52,13 @@ const Page = props => {
   const {
       page,
       components,
+      jsxParserComponents,
       className = ''
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
   const [contextValue, setContextValue] = (0, _react.useState)({
-    components
+    components,
+    jsxParserComponents
   });
   const {
     id,
@@ -72,6 +75,14 @@ const Page = props => {
       components
     }));
   }, [components]);
+  (0, _react.useEffect)(() => {
+    if (!jsxParserComponents) {
+      return;
+    }
+    setContextValue(_objectSpread(_objectSpread({}, contextValue), {}, {
+      jsxParserComponents
+    }));
+  }, [jsxParserComponents]);
   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", {
@@ -91,5 +102,5 @@ const Page = props => {
   })))));
 };
 exports.Page = Page;
-Page.displayName = 'Page';
+Page.displayName = '[Page Designer] Page';
 var _default = exports.default = Page;

package/components/ShopperExperience/Region/index.js

@@ -54,7 +54,7 @@ const Region = props => {
   }))));
 };
 exports.Region = Region;
-Region.displayName = 'Region';
+Region.displayName = '[Page Designer] Region';
 Region.propTypes = {
   region: propType.isRequired,
   className: _propTypes.default.string

package/hooks/ShopperBaskets/paramKeys.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    getBasket: readonly ["organizationId", "basketId", "siteId", "locale"];
+    getPaymentMethodsForBasket: readonly ["organizationId", "basketId", "siteId", "locale"];
+    getPriceBooksForBasket: readonly ["organizationId", "basketId", "siteId"];
+    getShippingMethodsForShipment: readonly ["organizationId", "basketId", "shipmentId", "siteId", "locale"];
+    getTaxesFromBasket: readonly ["organizationId", "basketId", "siteId"];
+};
+export default _default;
+//# sourceMappingURL=paramKeys.d.ts.map

package/hooks/ShopperBaskets/paramKeys.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * Copyright (c) 2024, 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
+ */
+
+const getBasket = ['organizationId', 'basketId', 'siteId', 'locale'];
+const getPaymentMethodsForBasket = ['organizationId', 'basketId', 'siteId', 'locale'];
+const getPriceBooksForBasket = ['organizationId', 'basketId', 'siteId'];
+const getShippingMethodsForShipment = ['organizationId', 'basketId', 'shipmentId', 'siteId', 'locale'];
+const getTaxesFromBasket = ['organizationId', 'basketId', 'siteId'];
+var _default = exports.default = {
+  getBasket,
+  getPaymentMethodsForBasket,
+  getPriceBooksForBasket,
+  getShippingMethodsForShipment,
+  getTaxesFromBasket
+};

package/hooks/ShopperBaskets/query.js

@@ -8,9 +8,15 @@ var _useCommerceApi = _interopRequireDefault(require("../useCommerceApi"));
 var _useQuery = require("../useQuery");
 var _utils = require("../utils");
 var queryKeyHelpers = _interopRequireWildcard(require("./queryKeyHelpers"));
+var _paramKeys = _interopRequireDefault(require("./paramKeys"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } /*
  * Copyright (c) 2023, Salesforce, Inc.
@@ -39,6 +45,9 @@ const useBasket = (apiOptions, queryOptions = {}) => {
   // Parameters can be set in `apiOptions` or `client.clientConfig`;
   // we must merge them in order to generate the correct query key.
   const netOptions = (0, _utils.omitNullableParameters)((0, _utils.mergeOptions)(client, apiOptions));
+  // get param keys for the api from netOptions
+  const paramKeys = [..._paramKeys.default[methodName], ...(0, _utils.getCustomKeys)(netOptions.parameters)];
+  const parameters = (0, _utils.pick)(netOptions.parameters, paramKeys);
   const queryKey = queryKeyHelpers[methodName].queryKey(netOptions.parameters);
   // We don't use `netOptions` here because we manipulate the options in `useQuery`.
   const method = /*#__PURE__*/function () {
@@ -52,7 +61,9 @@ const useBasket = (apiOptions, queryOptions = {}) => {
 
   // For some reason, if we don't explicitly set these generic parameters, the inferred type for
   // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
-  return (0, _useQuery.useQuery)(netOptions, queryOptions, {
+  return (0, _useQuery.useQuery)(_objectSpread(_objectSpread({}, netOptions), {}, {
+    parameters
+  }), queryOptions, {
     method,
     queryKey,
     requiredParameters
@@ -80,6 +91,9 @@ const usePaymentMethodsForBasket = (apiOptions, queryOptions = {}) => {
   // Parameters can be set in `apiOptions` or `client.clientConfig`;
   // we must merge them in order to generate the correct query key.
   const netOptions = (0, _utils.omitNullableParameters)((0, _utils.mergeOptions)(client, apiOptions));
+  // get param keys for the api from netOptions
+  const paramKeys = [..._paramKeys.default[methodName], ...(0, _utils.getCustomKeys)(netOptions.parameters)];
+  const parameters = (0, _utils.pick)(netOptions.parameters, paramKeys);
   const queryKey = queryKeyHelpers[methodName].queryKey(netOptions.parameters);
   // We don't use `netOptions` here because we manipulate the options in `useQuery`.
   const method = /*#__PURE__*/function () {
@@ -93,7 +107,9 @@ const usePaymentMethodsForBasket = (apiOptions, queryOptions = {}) => {
 
   // For some reason, if we don't explicitly set these generic parameters, the inferred type for
   // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
-  return (0, _useQuery.useQuery)(netOptions, queryOptions, {
+  return (0, _useQuery.useQuery)(_objectSpread(_objectSpread({}, netOptions), {}, {
+    parameters
+  }), queryOptions, {
     method,
     queryKey,
     requiredParameters
@@ -121,6 +137,9 @@ const usePriceBooksForBasket = (apiOptions, queryOptions = {}) => {
   // Parameters can be set in `apiOptions` or `client.clientConfig`;
   // we must merge them in order to generate the correct query key.
   const netOptions = (0, _utils.omitNullableParameters)((0, _utils.mergeOptions)(client, apiOptions));
+  // get param keys for the api from netOptions
+  const paramKeys = [..._paramKeys.default[methodName], ...(0, _utils.getCustomKeys)(netOptions.parameters)];
+  const parameters = (0, _utils.pick)(netOptions.parameters, paramKeys);
   const queryKey = queryKeyHelpers[methodName].queryKey(netOptions.parameters);
   // We don't use `netOptions` here because we manipulate the options in `useQuery`.
   const method = /*#__PURE__*/function () {
@@ -134,7 +153,9 @@ const usePriceBooksForBasket = (apiOptions, queryOptions = {}) => {
 
   // For some reason, if we don't explicitly set these generic parameters, the inferred type for
   // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
-  return (0, _useQuery.useQuery)(netOptions, queryOptions, {
+  return (0, _useQuery.useQuery)(_objectSpread(_objectSpread({}, netOptions), {}, {
+    parameters
+  }), queryOptions, {
     method,
     queryKey,
     requiredParameters
@@ -162,6 +183,9 @@ const useShippingMethodsForShipment = (apiOptions, queryOptions = {}) => {
   // Parameters can be set in `apiOptions` or `client.clientConfig`;
   // we must merge them in order to generate the correct query key.
   const netOptions = (0, _utils.omitNullableParameters)((0, _utils.mergeOptions)(client, apiOptions));
+  // get param keys for the api from netOptions
+  const paramKeys = [..._paramKeys.default[methodName], ...(0, _utils.getCustomKeys)(netOptions.parameters)];
+  const parameters = (0, _utils.pick)(netOptions.parameters, paramKeys);
   const queryKey = queryKeyHelpers[methodName].queryKey(netOptions.parameters);
   // We don't use `netOptions` here because we manipulate the options in `useQuery`.
   const method = /*#__PURE__*/function () {
@@ -175,7 +199,9 @@ const useShippingMethodsForShipment = (apiOptions, queryOptions = {}) => {
 
   // For some reason, if we don't explicitly set these generic parameters, the inferred type for
   // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
-  return (0, _useQuery.useQuery)(netOptions, queryOptions, {
+  return (0, _useQuery.useQuery)(_objectSpread(_objectSpread({}, netOptions), {}, {
+    parameters
+  }), queryOptions, {
     method,
     queryKey,
     requiredParameters
@@ -203,6 +229,9 @@ const useTaxesFromBasket = (apiOptions, queryOptions = {}) => {
   // Parameters can be set in `apiOptions` or `client.clientConfig`;
   // we must merge them in order to generate the correct query key.
   const netOptions = (0, _utils.omitNullableParameters)((0, _utils.mergeOptions)(client, apiOptions));
+  // get param keys for the api from netOptions
+  const paramKeys = [..._paramKeys.default[methodName], ...(0, _utils.getCustomKeys)(netOptions.parameters)];
+  const parameters = (0, _utils.pick)(netOptions.parameters, paramKeys);
   const queryKey = queryKeyHelpers[methodName].queryKey(netOptions.parameters);
   // We don't use `netOptions` here because we manipulate the options in `useQuery`.
   const method = /*#__PURE__*/function () {
@@ -216,7 +245,9 @@ const useTaxesFromBasket = (apiOptions, queryOptions = {}) => {
 
   // For some reason, if we don't explicitly set these generic parameters, the inferred type for
   // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
-  return (0, _useQuery.useQuery)(netOptions, queryOptions, {
+  return (0, _useQuery.useQuery)(_objectSpread(_objectSpread({}, netOptions), {}, {
+    parameters
+  }), queryOptions, {
     method,
     queryKey,
     requiredParameters

package/hooks/ShopperBaskets/queryKeyHelpers.d.ts

@@ -53,11 +53,6 @@ export type QueryKeys = {
     ];
 };
 type QueryKeyHelper<T extends keyof QueryKeys> = {
-    /**
-     * Reduces the given parameters (which may have additional, unknown properties) to an object
-     * containing *only* the properties required for an endpoint.
-     */
-    parameters: (params: Params<T>) => Params<T>;
     /** Generates the path component of the query key for an endpoint. */
     path: (params: Params<T>) => ExcludeTail<QueryKeys[T]>;
     /** Generates the full query key for an endpoint. */

package/hooks/ShopperBaskets/queryKeyHelpers.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTaxesFromBasket = exports.getShippingMethodsForShipment = exports.getPriceBooksForBasket = exports.getPaymentMethodsForBasket = exports.getBasket = void 0;
 var _utils = require("../utils");
+var _paramKeys = _interopRequireDefault(require("../ShopperBaskets/paramKeys"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Copyright (c) 2023, Salesforce, Inc.
  * All rights reserved.
@@ -18,27 +20,37 @@ var _utils = require("../utils");
 // and making those generic would add too much complexity.
 
 const getBasket = exports.getBasket = {
-  parameters: params => (0, _utils.pick)(params, ['organizationId', 'basketId', 'siteId', 'locale']),
   path: params => ['/commerce-sdk-react', '/organizations/', params.organizationId, '/baskets/', params.basketId],
-  queryKey: params => [...getBasket.path(params), getBasket.parameters(params)]
+  queryKey: params => {
+    const paramKeys = [..._paramKeys.default['getBasket'], ...(0, _utils.getCustomKeys)(params)];
+    return [...getBasket.path(params), (0, _utils.pick)(params, paramKeys)];
+  }
 };
 const getPaymentMethodsForBasket = exports.getPaymentMethodsForBasket = {
-  parameters: params => (0, _utils.pick)(params, ['organizationId', 'basketId', 'siteId', 'locale']),
   path: params => ['/commerce-sdk-react', '/organizations/', params.organizationId, '/baskets/', params.basketId, '/payment-methods'],
-  queryKey: params => [...getPaymentMethodsForBasket.path(params), getPaymentMethodsForBasket.parameters(params)]
+  queryKey: params => {
+    const paramKeys = [..._paramKeys.default['getPaymentMethodsForBasket'], ...(0, _utils.getCustomKeys)(params)];
+    return [...getPaymentMethodsForBasket.path(params), (0, _utils.pick)(params, paramKeys)];
+  }
 };
 const getPriceBooksForBasket = exports.getPriceBooksForBasket = {
-  parameters: params => (0, _utils.pick)(params, ['organizationId', 'basketId', 'siteId']),
   path: params => ['/commerce-sdk-react', '/organizations/', params.organizationId, '/baskets/', params.basketId, '/price-books'],
-  queryKey: params => [...getPriceBooksForBasket.path(params), getPriceBooksForBasket.parameters(params)]
+  queryKey: params => {
+    const paramKeys = [..._paramKeys.default['getPriceBooksForBasket'], ...(0, _utils.getCustomKeys)(params)];
+    return [...getPriceBooksForBasket.path(params), (0, _utils.pick)(params, paramKeys)];
+  }
 };
 const getShippingMethodsForShipment = exports.getShippingMethodsForShipment = {
-  parameters: params => (0, _utils.pick)(params, ['organizationId', 'basketId', 'shipmentId', 'siteId', 'locale']),
   path: params => ['/commerce-sdk-react', '/organizations/', params.organizationId, '/baskets/', params.basketId, '/shipments/', params.shipmentId, '/shipping-methods'],
-  queryKey: params => [...getShippingMethodsForShipment.path(params), getShippingMethodsForShipment.parameters(params)]
+  queryKey: params => {
+    const paramKeys = [..._paramKeys.default['getShippingMethodsForShipment'], ...(0, _utils.getCustomKeys)(params)];
+    return [...getShippingMethodsForShipment.path(params), (0, _utils.pick)(params, paramKeys)];
+  }
 };
 const getTaxesFromBasket = exports.getTaxesFromBasket = {
-  parameters: params => (0, _utils.pick)(params, ['organizationId', 'basketId', 'siteId']),
   path: params => ['/commerce-sdk-react', '/organizations/', params.organizationId, '/baskets/', params.basketId, '/taxes'],
-  queryKey: params => [...getTaxesFromBasket.path(params), getTaxesFromBasket.parameters(params)]
+  queryKey: params => {
+    const paramKeys = [..._paramKeys.default['getTaxesFromBasket'], ...(0, _utils.getCustomKeys)(params)];
+    return [...getTaxesFromBasket.path(params), (0, _utils.pick)(params, paramKeys)];
+  }
 };

package/hooks/ShopperContexts/paramKeys.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    getShopperContext: readonly ["organizationId", "usid"];
+};
+export default _default;
+//# sourceMappingURL=paramKeys.d.ts.map

package/hooks/ShopperContexts/paramKeys.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * Copyright (c) 2024, 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
+ */
+
+const getShopperContext = ['organizationId', 'usid'];
+var _default = exports.default = {
+  getShopperContext
+};

package/hooks/ShopperContexts/query.js

@@ -8,9 +8,15 @@ var _useCommerceApi = _interopRequireDefault(require("../useCommerceApi"));
 var _useQuery = require("../useQuery");
 var _utils = require("../utils");
 var queryKeyHelpers = _interopRequireWildcard(require("./queryKeyHelpers"));
+var _paramKeys = _interopRequireDefault(require("./paramKeys"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } /*
  * Copyright (c) 2023, Salesforce, Inc.
@@ -39,6 +45,10 @@ const useShopperContext = (apiOptions, queryOptions = {}) => {
   // Parameters can be set in `apiOptions` or `client.clientConfig`;
   // we must merge them in order to generate the correct query key.
   const netOptions = (0, _utils.omitNullableParameters)((0, _utils.mergeOptions)(client, apiOptions));
+
+  // get param keys for the api from netOptions
+  const paramKeys = [..._paramKeys.default[methodName], ...(0, _utils.getCustomKeys)(netOptions.parameters)];
+  const parameters = (0, _utils.pick)(netOptions.parameters, paramKeys);
   const queryKey = queryKeyHelpers[methodName].queryKey(netOptions.parameters);
   // We don't use `netOptions` here because we manipulate the options in `useQuery`.
   const method = /*#__PURE__*/function () {
@@ -52,7 +62,9 @@ const useShopperContext = (apiOptions, queryOptions = {}) => {
 
   // For some reason, if we don't explicitly set these generic parameters, the inferred type for
   // `Data` sometimes, but not always, includes `Response`, which is incorrect. I don't know why.
-  return (0, _useQuery.useQuery)(netOptions, queryOptions, {
+  return (0, _useQuery.useQuery)(_objectSpread(_objectSpread({}, netOptions), {}, {
+    parameters
+  }), queryOptions, {
     method,
     queryKey,
     requiredParameters

package/hooks/ShopperContexts/queryKeyHelpers.d.ts

@@ -15,11 +15,6 @@ export type QueryKeys = {
     ];
 };
 type QueryKeyHelper<T extends keyof QueryKeys> = {
-    /**
-     * Reduces the given parameters (which may have additional, unknown properties) to an object
-     * containing *only* the properties required for an endpoint.
-     */
-    parameters: (params: Params<T>) => Params<T>;
     /** Generates the path component of the query key for an endpoint. */
     path: (params: Params<T>) => ExcludeTail<QueryKeys[T]>;
     /** Generates the full query key for an endpoint. */

package/hooks/ShopperContexts/queryKeyHelpers.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getShopperContext = void 0;
 var _utils = require("../utils");
+var _paramKeys = _interopRequireDefault(require("./paramKeys"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Copyright (c) 2023, Salesforce, Inc.
  * All rights reserved.
@@ -18,7 +20,9 @@ var _utils = require("../utils");
 // and making those generic would add too much complexity.
 
 const getShopperContext = exports.getShopperContext = {
-  parameters: params => (0, _utils.pick)(params, ['organizationId', 'usid']),
   path: params => ['/commerce-sdk-react', '/organizations/', params.organizationId, '/shopper-context/', params.usid],
-  queryKey: params => [...getShopperContext.path(params), getShopperContext.parameters(params)]
+  queryKey: params => {
+    const paramKeys = [..._paramKeys.default['getShopperContext'], ...(0, _utils.getCustomKeys)(params)];
+    return [...getShopperContext.path(params), (0, _utils.pick)(params, paramKeys)];
+  }
 };

package/hooks/ShopperCustomers/cache.js

@@ -79,8 +79,13 @@ const cacheUpdateMatrix = exports.cacheUpdateMatrix = {
       update: [{
         queryKey: _queryKeyHelpers.getCustomerProductLists.queryKey(parameters),
         updater: createUpdateFunction(result => {
-          // Add new list to front of the lists.
-          result.data.unshift(response);
+          // if a user has no product list, data will not present in the response.
+          if (!result.data) {
+            result.data = [response];
+          } else {
+            // Add new list to front of the lists.
+            result.data.unshift(response);
+          }
           result.limit++;
           result.total++;
           return result;

package/hooks/ShopperCustomers/paramKeys.d.ts

@@ -0,0 +1,26 @@
+export declare const getCustomer: readonly ["organizationId", "customerId", "siteId"];
+export declare const getCustomerAddress: readonly ["organizationId", "customerId", "addressName", "siteId"];
+export declare const getCustomerBaskets: readonly ["organizationId", "customerId", "siteId"];
+export declare const getCustomerOrders: readonly ["organizationId", "customerId", "crossSites", "from", "until", "status", "siteId", "offset", "limit"];
+export declare const getCustomerPaymentInstrument: readonly ["organizationId", "customerId", "paymentInstrumentId", "siteId"];
+export declare const getCustomerProductLists: readonly ["organizationId", "customerId", "siteId"];
+export declare const getCustomerProductList: readonly ["organizationId", "customerId", "listId", "siteId"];
+export declare const getCustomerProductListItem: readonly ["organizationId", "customerId", "listId", "itemId", "siteId"];
+export declare const getPublicProductListsBySearchTerm: readonly ["organizationId", "email", "firstName", "lastName", "siteId"];
+export declare const getPublicProductList: readonly ["organizationId", "listId", "siteId"];
+export declare const getProductListItem: readonly ["organizationId", "listId", "itemId", "siteId"];
+declare const _default: {
+    getCustomer: readonly ["organizationId", "customerId", "siteId"];
+    getCustomerAddress: readonly ["organizationId", "customerId", "addressName", "siteId"];
+    getCustomerBaskets: readonly ["organizationId", "customerId", "siteId"];
+    getCustomerOrders: readonly ["organizationId", "customerId", "crossSites", "from", "until", "status", "siteId", "offset", "limit"];
+    getCustomerPaymentInstrument: readonly ["organizationId", "customerId", "paymentInstrumentId", "siteId"];
+    getCustomerProductList: readonly ["organizationId", "customerId", "listId", "siteId"];
+    getCustomerProductLists: readonly ["organizationId", "customerId", "siteId"];
+    getCustomerProductListItem: readonly ["organizationId", "customerId", "listId", "itemId", "siteId"];
+    getPublicProductListsBySearchTerm: readonly ["organizationId", "email", "firstName", "lastName", "siteId"];
+    getPublicProductList: readonly ["organizationId", "listId", "siteId"];
+    getProductListItem: readonly ["organizationId", "listId", "itemId", "siteId"];
+};
+export default _default;
+//# sourceMappingURL=paramKeys.d.ts.map