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

package/dist/index.d.cts

@@ -3,7 +3,7 @@ import { Services, ShopMode, UserMode, PriceComponentProps, StockComponentProps,
 export * from '@propeller-commerce/propeller-v2-core-ui';
 import * as React$1 from 'react';
 import React__default, { ReactNode, ComponentType } from 'react';
-import { GraphQLClient, Contact, Customer, Cart, CartMainItem, Product, Cluster, AddressType, Gender, YesNo, Address, TransformationsInput, MediaImageProductSearchInput, CartProcessResponse, Crossupsell, CartUpdateAddressInput, CartUpdateInput, CartAddressType, ClusterConfig, Company, CompanyVariables, PurchaseAuthorizationConfigCreateInput, PurchaseAuthorizationConfigUpdateInput, FavoriteList, DateSearchInput, DecimalSearchInput, OrderSortInput, OrderType, OrderSearchFields, Order, ProductTextFilterInput, AttributeFilter, ProductsResponse, Category, SparePart, ProductSortField, SortOrder, SparePartsResponse, SparePartsMachine, CrossupsellType, AttributeResult, RegisterContactInput as RegisterContactInput$1, PurchaseAuthorizationConfig, CartChildItemInput, CartAddress, WarehouseAddress, OrderAddress, CartBaseItem, CartCarrier, CartPaymethod, ClusterOption, ProductInventory, OrderItem, ProductPrice, Bundle, PaginatedMediaDocumentResponse, PaginatedMediaVideoResponse } from '@propeller-commerce/propeller-sdk-v2';
+import { GraphQLClient, Contact, Customer, Cart, CartMainItem, Product, Cluster, AddressType, Gender, YesNo, Address, MagicTokenCreateInput, MagicToken, TransformationsInput, MediaImageProductSearchInput, CartProcessResponse, Crossupsell, CartUpdateAddressInput, CartUpdateInput, CartAddressType, ClusterConfig, Company, CompanyVariables, PurchaseAuthorizationConfigCreateInput, PurchaseAuthorizationConfigUpdateInput, FavoriteList, DateSearchInput, DecimalSearchInput, OrderSortInput, OrderType, OrderSearchFields, Order, ProductTextFilterInput, AttributeFilter, ProductsResponse, Category, SparePart, ProductSortField, SortOrder, SparePartsResponse, SparePartsMachine, CrossupsellType, AttributeResult, RegisterContactInput as RegisterContactInput$1, PurchaseAuthorizationConfig, CartChildItemInput, CartAddress, WarehouseAddress, OrderAddress, CartBaseItem, CartCarrier, CartPaymethod, ClusterOption, ProductInventory, OrderItem, ProductPrice, Bundle, PaginatedMediaDocumentResponse, PaginatedMediaVideoResponse } from '@propeller-commerce/propeller-sdk-v2';
 
 /**
  * Tier 1 — application-wide infrastructure. Bound by `<PropellerDepsProvider>`
@@ -499,6 +499,10 @@ interface UseAuthReturn {
     error: string | null;
     /** Authenticates by email/password; pass `onLoginSubmit` to fully override the SDK login. */
     login: (email: string, password: string, onLoginSubmit?: (email: string, password: string) => Promise<Contact | Customer>) => Promise<Result<AuthSuccess, string>>;
+    /** Passwordless login: exchanges a backend-issued magic token for a session (then loads the viewer). */
+    magicLogin: (token: string) => Promise<Result<AuthSuccess, string>>;
+    /** Issues a magic token for a contact/customer (authenticated); its `id` is embedded in a magic-login link. */
+    createMagicToken: (input: MagicTokenCreateInput) => Promise<Result<MagicToken, string>>;
     /** Registers a B2B contact (and optionally a company + addresses); `autoLogin` keeps the session. */
     registerContact: (input: RegisterContactInput, preferredLanguage?: string, autoLogin?: boolean) => Promise<Result<AuthSuccess, string>>;
     /** Registers a B2C customer (and optionally addresses); `autoLogin` keeps the session. */
@@ -737,8 +741,8 @@ declare function useCheckout(options: UseCheckoutOptions): UseCheckoutReturn;
 
 /** A cluster-config setting resolved against the current product set and selections. */
 interface ConfiguredSetting {
-    /** Setting id from the cluster config. */
-    id: number;
+    /** Setting id (uuid) from the cluster config. */
+    id: string;
     /** Raw attribute name this setting selects on. */
     name: string;
     /** Display widget hint (e.g. dropdown, swatch). */
@@ -3535,12 +3539,12 @@ declare function CategoryDescription(props: CategoryDescriptionProps): React$1.J
 interface CategoryShortDescriptionProps {
     /**
      * Language code used to resolve the correct localised short description
-     * from `category.shortDescription`.
+     * from `category.shortDescriptions`.
      */
     language: string;
     /**
      * Propeller Category object.
-     * The component reads `category.shortDescription` (an array of LocalizedString)
+     * The component reads `category.shortDescriptions` (an array of LocalizedString)
      * and renders the matching language entry as HTML.
      */
     category?: Category;

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { Services, ShopMode, UserMode, PriceComponentProps, StockComponentProps,
 export * from '@propeller-commerce/propeller-v2-core-ui';
 import * as React$1 from 'react';
 import React__default, { ReactNode, ComponentType } from 'react';
-import { GraphQLClient, Contact, Customer, Cart, CartMainItem, Product, Cluster, AddressType, Gender, YesNo, Address, TransformationsInput, MediaImageProductSearchInput, CartProcessResponse, Crossupsell, CartUpdateAddressInput, CartUpdateInput, CartAddressType, ClusterConfig, Company, CompanyVariables, PurchaseAuthorizationConfigCreateInput, PurchaseAuthorizationConfigUpdateInput, FavoriteList, DateSearchInput, DecimalSearchInput, OrderSortInput, OrderType, OrderSearchFields, Order, ProductTextFilterInput, AttributeFilter, ProductsResponse, Category, SparePart, ProductSortField, SortOrder, SparePartsResponse, SparePartsMachine, CrossupsellType, AttributeResult, RegisterContactInput as RegisterContactInput$1, PurchaseAuthorizationConfig, CartChildItemInput, CartAddress, WarehouseAddress, OrderAddress, CartBaseItem, CartCarrier, CartPaymethod, ClusterOption, ProductInventory, OrderItem, ProductPrice, Bundle, PaginatedMediaDocumentResponse, PaginatedMediaVideoResponse } from '@propeller-commerce/propeller-sdk-v2';
+import { GraphQLClient, Contact, Customer, Cart, CartMainItem, Product, Cluster, AddressType, Gender, YesNo, Address, MagicTokenCreateInput, MagicToken, TransformationsInput, MediaImageProductSearchInput, CartProcessResponse, Crossupsell, CartUpdateAddressInput, CartUpdateInput, CartAddressType, ClusterConfig, Company, CompanyVariables, PurchaseAuthorizationConfigCreateInput, PurchaseAuthorizationConfigUpdateInput, FavoriteList, DateSearchInput, DecimalSearchInput, OrderSortInput, OrderType, OrderSearchFields, Order, ProductTextFilterInput, AttributeFilter, ProductsResponse, Category, SparePart, ProductSortField, SortOrder, SparePartsResponse, SparePartsMachine, CrossupsellType, AttributeResult, RegisterContactInput as RegisterContactInput$1, PurchaseAuthorizationConfig, CartChildItemInput, CartAddress, WarehouseAddress, OrderAddress, CartBaseItem, CartCarrier, CartPaymethod, ClusterOption, ProductInventory, OrderItem, ProductPrice, Bundle, PaginatedMediaDocumentResponse, PaginatedMediaVideoResponse } from '@propeller-commerce/propeller-sdk-v2';
 
 /**
  * Tier 1 — application-wide infrastructure. Bound by `<PropellerDepsProvider>`
@@ -499,6 +499,10 @@ interface UseAuthReturn {
     error: string | null;
     /** Authenticates by email/password; pass `onLoginSubmit` to fully override the SDK login. */
     login: (email: string, password: string, onLoginSubmit?: (email: string, password: string) => Promise<Contact | Customer>) => Promise<Result<AuthSuccess, string>>;
+    /** Passwordless login: exchanges a backend-issued magic token for a session (then loads the viewer). */
+    magicLogin: (token: string) => Promise<Result<AuthSuccess, string>>;
+    /** Issues a magic token for a contact/customer (authenticated); its `id` is embedded in a magic-login link. */
+    createMagicToken: (input: MagicTokenCreateInput) => Promise<Result<MagicToken, string>>;
     /** Registers a B2B contact (and optionally a company + addresses); `autoLogin` keeps the session. */
     registerContact: (input: RegisterContactInput, preferredLanguage?: string, autoLogin?: boolean) => Promise<Result<AuthSuccess, string>>;
     /** Registers a B2C customer (and optionally addresses); `autoLogin` keeps the session. */
@@ -737,8 +741,8 @@ declare function useCheckout(options: UseCheckoutOptions): UseCheckoutReturn;
 
 /** A cluster-config setting resolved against the current product set and selections. */
 interface ConfiguredSetting {
-    /** Setting id from the cluster config. */
-    id: number;
+    /** Setting id (uuid) from the cluster config. */
+    id: string;
     /** Raw attribute name this setting selects on. */
     name: string;
     /** Display widget hint (e.g. dropdown, swatch). */
@@ -3535,12 +3539,12 @@ declare function CategoryDescription(props: CategoryDescriptionProps): React$1.J
 interface CategoryShortDescriptionProps {
     /**
      * Language code used to resolve the correct localised short description
-     * from `category.shortDescription`.
+     * from `category.shortDescriptions`.
      */
     language: string;
     /**
      * Propeller Category object.
-     * The component reads `category.shortDescription` (an array of LocalizedString)
+     * The component reads `category.shortDescriptions` (an array of LocalizedString)
      * and renders the matching language entry as HTML.
      */
     category?: Category;

package/dist/index.js

@@ -4,7 +4,7 @@ export * from '@propeller-commerce/propeller-v2-core-ui';
 import * as React6 from 'react';
 import { createContext, useState, useRef, useMemo, useCallback, useContext, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { ProductStatus, ProductSortField, SortOrder, PurchaseRole, CrossupsellType, CartStatus, CartAddressType, Gender, YesNo, AddressType, PaymentStatuses, OrderSearchFields, OrderItemClass, ProductSearchableField, machineService, AttributeType, OrderSortField, OrderType, OrderDiscountType, BundleCondition } from '@propeller-commerce/propeller-sdk-v2';
+import { ProductStatus, ProductSortField, SortOrder, PurchaseRole, CrossupsellType, CartStatus, CartAddressType, Gender, YesNo, AddressType, MagicTokenService, PaymentStatuses, OrderSearchFields, OrderItemClass, ProductSearchableField, machineService, AttributeType, OrderSortField, OrderType, OrderDiscountType, BundleCondition } from '@propeller-commerce/propeller-sdk-v2';
 import { User } from 'lucide-react';
 
 // src/index.ts
@@ -287,6 +287,66 @@ function useAuth(options) {
       setLoading(false);
     }
   }, [graphqlClient, language, onAuthHeaderUpdate, configuration]);
+  const magicLogin = useCallback(async (token) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const loginResult = await new 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 = 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 ok({ user, accessToken, refreshToken, expiresAt });
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "Magic-token login failed";
+      setError(msg);
+      return err(msg);
+    } finally {
+      setLoading(false);
+    }
+  }, [graphqlClient, onAuthHeaderUpdate, configuration]);
+  const createMagicToken = useCallback(async (input) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const token = await new MagicTokenService(graphqlClient).createMagicToken(input);
+      return ok(token);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "Failed to create magic token";
+      setError(msg);
+      return err(msg);
+    } finally {
+      setLoading(false);
+    }
+  }, [graphqlClient]);
   const registerContact = useCallback(async (input, preferredLanguage = language, autoLogin = true) => {
     setLoading(true);
     setError(null);
@@ -533,7 +593,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 {
@@ -1107,7 +1167,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 = filterProductsBySelections(products, previousSelections);
     return collectAttributeValues(matching, attributeName);
@@ -1116,43 +1176,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) => attributeNameMatches(a, setting.name));
+        const match = items.find((a) => attributeNameMatches(a, setting.attributeName));
         if (!match) continue;
-        displayName = getAttributeDisplayName(match, language) || setting.name;
+        displayName = 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 = 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 = filterProductsBySelections(products, newSelections);
         if (matching.length > 0 && onConfigurationChange) onConfigurationChange(matching[0]);
@@ -1168,15 +1228,15 @@ function useClusterConfigurator(options) {
       if (!attrItems) return;
       const initial = {};
       for (const setting of sortedSettings) {
-        const match = attrItems.find((a) => attributeNameMatches(a, setting.name));
+        const match = attrItems.find((a) => attributeNameMatches(a, setting.attributeName));
         if (match) {
           const values = 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 = filterProductsBySelections(products, initial);
         if (matching.length > 0) onConfigurationChange(matching[0]);
@@ -1512,15 +1572,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 ?? "",
@@ -1600,8 +1660,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)}
           }
         }
@@ -2060,7 +2120,7 @@ function useProductInfo(options) {
       const service = createServices(graphqlClient).cluster;
       const clusterConfig = await service.getClusterConfig(clusterId);
       const attributeNames = (clusterConfig?.config?.settings ?? []).map(
-        (setting) => setting.name
+        (setting) => setting.attributeName
       );
       const variables = {
         clusterId,
@@ -6155,8 +6215,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);
@@ -6164,7 +6224,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) {
@@ -7854,7 +7914,7 @@ function CartSummary(rawProps) {
 var CartSummary_default = CartSummary;
 function CategoryDescription(props) {
   const [expanded, setExpanded] = useState(false);
-  const match = props.category?.description?.find(
+  const match = props.category?.descriptions?.find(
     (d) => d.language === props.language
   );
   const html = match?.value || "";
@@ -7895,7 +7955,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 || "";
@@ -12788,7 +12848,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);
@@ -12802,8 +12862,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 }]
       });
     }
   }