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

package/dist/index.d.cts

@@ -737,8 +737,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 +3535,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

@@ -737,8 +737,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 +3535,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

@@ -1107,7 +1107,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 +1116,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 +1168,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 +1512,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 +1600,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 +2060,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 +6155,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 +6164,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 +7854,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 +7895,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 +12788,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 +12802,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 }]
       });
     }
   }