@propeller-commerce/propeller-v2-react-ui 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -8,6 +8,33 @@ once it reaches 1.0. Until then (the `0.x` line) the public API may change
 between minor versions; breaking changes are called out below and in
 [MIGRATION.md](./MIGRATION.md).
 
+## [0.10.0] - 2026-07-29
+
+### Added
+
+- **Magic-token authentication in `useAuth`.** `magicLogin(token)` exchanges a
+  backend-issued magic token for a session (via
+  `MagicTokenService.magicTokenLogin`), sets the in-memory Bearer header — never
+  `setAccessToken` — and loads the viewer, mirroring `login()`. This is the
+  passwordless / punchout deep-link handoff. `createMagicToken(input)` issues a
+  magic token for a contact/customer (`MagicTokenCreateInput`, authenticated).
+  Both return the standard `Result` and are exposed on `UseAuthReturn`. No new
+  runtime dependency — the SDK's `MagicTokenService` ships in 0.14.0.
+
+## [0.9.0] - 2026-07-29
+
+### Changed
+
+- **Align with `@propeller-commerce/propeller-sdk-v2` 0.14.0**, which removed the
+  entire deprecated schema surface. Category reads move to the plural localized
+  arrays — `Breadcrumbs` (`category.names` / `slugs`), `CategoryDescription`
+  (`descriptions`), `CategoryShortDescription` (`shortDescriptions`) — and the
+  hand-written menu query in `useMenu` now selects `names(language:)` /
+  `slugs(language:)`. `useClusterConfigurator` / `useProductInfo` read
+  `ClusterConfigSetting.attributeName` and `uuid` (were `name` / `id`); the
+  public `ConfiguredSetting.id` is now a `string`. Bumped the SDK dev dependency
+  to `^0.14.0` and `propeller-v2-core-ui` to `^0.4.0`; the runtime peer stays `*`.
+
 ## [0.8.0] - 2026-07-28
 
 ### Added

package/dist/index.cjs

@@ -307,6 +307,66 @@ function useAuth(options) {
       setLoading(false);
     }
   }, [graphqlClient, language, onAuthHeaderUpdate, configuration]);
+  const magicLogin = React6.useCallback(async (token) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const loginResult = await new propellerSdkV2.MagicTokenService(graphqlClient).magicTokenLogin(token);
+      const session = loginResult?.session;
+      const accessToken = session?.accessToken;
+      const refreshToken = session?.refreshToken;
+      const expiresAt = session?.expirationTime;
+      if (accessToken) {
+        const cfg = graphqlClient.getConfig();
+        graphqlClient.updateConfig({
+          headers: { ...cfg.headers, Authorization: `Bearer ${accessToken}` }
+        });
+        onAuthHeaderUpdate?.(accessToken);
+      }
+      const userService = propellerV2CoreUi.createServices(graphqlClient).user;
+      const viewerInput = {
+        ...configuration?.contactTrackAttributes?.length && {
+          contactAttributesInput: { attributeDescription: { names: configuration.contactTrackAttributes } }
+        },
+        ...configuration?.customerTrackAttributes?.length && {
+          customerAttributesInput: { attributeDescription: { names: configuration.customerTrackAttributes } }
+        },
+        ...configuration?.companyTrackAttributes?.length && {
+          companyAttributesInput: { attributeDescription: { names: configuration.companyTrackAttributes } }
+        },
+        // See isViewerSearchInput — an empty array `[]` is truthy but 400s the viewer.
+        ...isViewerSearchInput(configuration?.contactPAConfigInput) && {
+          contactPAConfigInput: configuration.contactPAConfigInput
+        },
+        ...isViewerSearchInput(configuration?.contactCompaniesSearchInput) && {
+          contactCompaniesSearchInput: configuration.contactCompaniesSearchInput
+        }
+      };
+      const viewer = await userService.getViewer(viewerInput);
+      const user = viewer;
+      return propellerV2CoreUi.ok({ user, accessToken, refreshToken, expiresAt });
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "Magic-token login failed";
+      setError(msg);
+      return propellerV2CoreUi.err(msg);
+    } finally {
+      setLoading(false);
+    }
+  }, [graphqlClient, onAuthHeaderUpdate, configuration]);
+  const createMagicToken = React6.useCallback(async (input) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const token = await new propellerSdkV2.MagicTokenService(graphqlClient).createMagicToken(input);
+      return propellerV2CoreUi.ok(token);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "Failed to create magic token";
+      setError(msg);
+      return propellerV2CoreUi.err(msg);
+    } finally {
+      setLoading(false);
+    }
+  }, [graphqlClient]);
   const registerContact = React6.useCallback(async (input, preferredLanguage = language, autoLogin = true) => {
     setLoading(true);
     setError(null);
@@ -553,7 +613,7 @@ function useAuth(options) {
       setLoading(false);
     }
   }, [graphqlClient]);
-  return { loading, error, login, registerContact, registerCustomer, forgotPassword };
+  return { loading, error, login, magicLogin, createMagicToken, registerContact, registerCustomer, forgotPassword };
 }
 async function initCart(config) {
   const {
@@ -1127,7 +1187,7 @@ function useClusterConfigurator(options) {
     const previousSelections = {};
     for (let i = 0; i < settingIndex; i++) {
       const prev = sortedSettings[i];
-      if (selections[prev.name]) previousSelections[prev.name] = selections[prev.name];
+      if (selections[prev.attributeName]) previousSelections[prev.attributeName] = selections[prev.attributeName];
     }
     const matching = propellerV2CoreUi.filterProductsBySelections(products, previousSelections);
     return propellerV2CoreUi.collectAttributeValues(matching, attributeName);
@@ -1136,43 +1196,43 @@ function useClusterConfigurator(options) {
     const sortedSettings = getSortedSettings();
     const sel = selectedAttributes;
     return sortedSettings.map((setting, index) => {
-      const availableValues = getAvailableValuesForIndexWithSelections(setting.name, index, sel);
-      const selectedValue = sel[setting.name] || "";
-      const isPreviousMissing = index > 0 && sortedSettings.slice(0, index).some((prev) => !sel[prev.name]);
+      const availableValues = getAvailableValuesForIndexWithSelections(setting.attributeName, index, sel);
+      const selectedValue = sel[setting.attributeName] || "";
+      const isPreviousMissing = index > 0 && sortedSettings.slice(0, index).some((prev) => !sel[prev.attributeName]);
       const isDisabled = availableValues.length === 0 || isPreviousMissing;
-      let displayName = setting.name;
+      let displayName = setting.attributeName;
       let attributeType;
       for (const product of products) {
         const items = product.attributes?.items;
         if (!items) continue;
-        const match = items.find((a) => propellerV2CoreUi.attributeNameMatches(a, setting.name));
+        const match = items.find((a) => propellerV2CoreUi.attributeNameMatches(a, setting.attributeName));
         if (!match) continue;
-        displayName = propellerV2CoreUi.getAttributeDisplayName(match, language) || setting.name;
+        displayName = propellerV2CoreUi.getAttributeDisplayName(match, language) || setting.attributeName;
         attributeType = match.attributeDescription?.type ?? void 0;
         break;
       }
-      return { id: setting.id, name: setting.name, displayType: setting.displayType, attributeType, priority: setting.priority, displayName, availableValues, selectedValue, disabled: isDisabled };
+      return { id: setting.uuid, name: setting.attributeName, displayType: setting.displayType, attributeType, priority: setting.priority, displayName, availableValues, selectedValue, disabled: isDisabled };
     });
   }, [products, config, selectedAttributes, language]);
   const handleAttributeSelect = React6.useCallback(
     (settingName, value) => {
       const sortedSettings = getSortedSettings();
-      const changedIndex = sortedSettings.findIndex((s) => s.name === settingName);
+      const changedIndex = sortedSettings.findIndex((s) => s.attributeName === settingName);
       if (changedIndex < 0) return;
       const newSelections = { ...selectedAttributes };
       newSelections[settingName] = value;
-      for (let i = changedIndex + 1; i < sortedSettings.length; i++) delete newSelections[sortedSettings[i].name];
+      for (let i = changedIndex + 1; i < sortedSettings.length; i++) delete newSelections[sortedSettings[i].attributeName];
       for (let i = changedIndex + 1; i < sortedSettings.length; i++) {
         const next = sortedSettings[i];
-        const available = getAvailableValuesForIndexWithSelections(next.name, i, newSelections);
+        const available = getAvailableValuesForIndexWithSelections(next.attributeName, i, newSelections);
         if (available.length > 0) {
-          newSelections[next.name] = available[0];
+          newSelections[next.attributeName] = available[0];
         } else {
           break;
         }
       }
       setSelectedAttributes(newSelections);
-      const allSelected = sortedSettings.every((s) => !!newSelections[s.name]);
+      const allSelected = sortedSettings.every((s) => !!newSelections[s.attributeName]);
       if (allSelected) {
         const matching = propellerV2CoreUi.filterProductsBySelections(products, newSelections);
         if (matching.length > 0 && onConfigurationChange) onConfigurationChange(matching[0]);
@@ -1188,15 +1248,15 @@ function useClusterConfigurator(options) {
       if (!attrItems) return;
       const initial = {};
       for (const setting of sortedSettings) {
-        const match = attrItems.find((a) => propellerV2CoreUi.attributeNameMatches(a, setting.name));
+        const match = attrItems.find((a) => propellerV2CoreUi.attributeNameMatches(a, setting.attributeName));
         if (match) {
           const values = propellerV2CoreUi.extractAttributeValues(match);
-          if (values.length) initial[setting.name] = values[0];
+          if (values.length) initial[setting.attributeName] = values[0];
         }
       }
       if (!Object.keys(initial).length) return;
       setSelectedAttributes(initial);
-      const allSelected = sortedSettings.every((s) => !!initial[s.name]);
+      const allSelected = sortedSettings.every((s) => !!initial[s.attributeName]);
       if (allSelected && onConfigurationChange) {
         const matching = propellerV2CoreUi.filterProductsBySelections(products, initial);
         if (matching.length > 0) onConfigurationChange(matching[0]);
@@ -1532,15 +1592,15 @@ function buildCategoriesQuery(depth) {
     categories {
       categoryId
       hidden
-      name(language: $language) { value language }
-      slug(language: $language) { value }
+      names(language: $language) { value language }
+      slugs(language: $language) { value }
       ${buildCategoriesQuery(depth - 1)}
     }
   `;
 }
 function mapCategory(raw, language) {
-  const nameEntry = raw.name?.find((n) => n.language === language) ?? raw.name?.[0];
-  const slugEntry = raw.slug?.[0];
+  const nameEntry = raw.names?.find((n) => n.language === language) ?? raw.names?.[0];
+  const slugEntry = raw.slugs?.[0];
   return {
     categoryId: raw.categoryId,
     name: nameEntry?.value ?? "",
@@ -1620,8 +1680,8 @@ function useMenu(options) {
           category(categoryId: $categoryId) {
             categoryId
             hidden
-            name(language: $language) { value language }
-            slug(language: $language) { value }
+            names(language: $language) { value language }
+            slugs(language: $language) { value }
             ${buildCategoriesQuery(depth)}
           }
         }
@@ -2080,7 +2140,7 @@ function useProductInfo(options) {
       const service = propellerV2CoreUi.createServices(graphqlClient).cluster;
       const clusterConfig = await service.getClusterConfig(clusterId);
       const attributeNames = (clusterConfig?.config?.settings ?? []).map(
-        (setting) => setting.name
+        (setting) => setting.attributeName
       );
       const variables = {
         clusterId,
@@ -6175,8 +6235,8 @@ function Breadcrumbs(props) {
   }
   const displayItems = props.showCurrent === false && items.length > 0 ? items.slice(0, items.length - 1) : items;
   function getCategoryName(cat) {
-    const match = cat.name?.find((n) => n.language === lang);
-    return match?.value || cat.name?.[0]?.value || "";
+    const match = cat.names?.find((n) => n.language === lang);
+    return match?.value || cat.names?.[0]?.value || "";
   }
   function getCategoryUrl(cat, index) {
     if (props.getUrl) return props.getUrl(cat, index);
@@ -6184,7 +6244,7 @@ function Breadcrumbs(props) {
     if (urls && typeof urls.getCategoryUrl === "function") {
       return urls.getCategoryUrl(cat, props.language);
     }
-    const slug = cat.slug?.find((s) => s.language === lang)?.value || cat.slug?.[0]?.value || "";
+    const slug = cat.slugs?.find((s) => s.language === lang)?.value || cat.slugs?.[0]?.value || "";
     return `/category/${cat.categoryId}/${slug}`;
   }
   function isCurrentItem(index) {
@@ -7874,7 +7934,7 @@ function CartSummary(rawProps) {
 var CartSummary_default = CartSummary;
 function CategoryDescription(props) {
   const [expanded, setExpanded] = React6.useState(false);
-  const match = props.category?.description?.find(
+  const match = props.category?.descriptions?.find(
     (d) => d.language === props.language
   );
   const html = match?.value || "";
@@ -7915,7 +7975,7 @@ function CategoryDescription(props) {
 }
 var CategoryDescription_default = CategoryDescription;
 function CategoryShortDescription(props) {
-  const match = props.category?.shortDescription?.find(
+  const match = props.category?.shortDescriptions?.find(
     (d) => d.language === props.language
   );
   const html = match?.value || "";
@@ -12808,7 +12868,7 @@ function Menu(rawProps) {
     const lang = props.language || "NL";
     const category = {
       categoryId: cat.categoryId,
-      slug: [{ value: cat.slug, language: lang }]
+      slugs: [{ value: cat.slug, language: lang }]
     };
     if (props.getUrl) return props.getUrl(category);
     return props.configuration.urls.getCategoryUrl(category, lang);
@@ -12822,8 +12882,8 @@ function Menu(rawProps) {
       const lang = props.language || "NL";
       props.onMenuItemClick({
         categoryId: cat.categoryId,
-        name: [{ value: cat.name, language: lang }],
-        slug: [{ value: cat.slug, language: lang }]
+        names: [{ value: cat.name, language: lang }],
+        slugs: [{ value: cat.slug, language: lang }]
       });
     }
   }