feat: middleware 2.4.0 update for scayle integration

.gitignore

@@ -38,3 +38,5 @@ logs
 
 localStorage/
 tsconfig.tsbuildinfo
+
+certificates

components/cms-modern/CuratedProductGrid/CuratedProductGridCard/CuratedProductGridCard.tsx

@@ -19,7 +19,7 @@ const CuratedProductGridCard = (props: CuratedProductGridCardProps) => {
             category: 'Product',
             action: 'Click',
             label: slug,
-            value: prices.list,
+            value: prices?.list,
         });
     };
     const { locale: cmsLocale } = useCmsContext() || {};
@@ -33,30 +33,29 @@ const CuratedProductGridCard = (props: CuratedProductGridCardProps) => {
 
     return (
         <Link passHref href={`/product/${result.id}/${result.slug}`} onClick={handleClickProduct}>
-            <div {...other}>
-                <div
-                    style={{
-                        position: 'relative' as 'relative',
-                    }}
-                >
-                    {result.variants[0] && (
-                        <img
-                            src={imageUrl}
-                            style={{
-                                top: 0,
-                                bottom: 0,
-                                width: '100%',
-                            }}
-                            alt={result.name}
-                        />
-                    )}
-                </div>
-                <div
-                    style={{
-                        marginTop: 30,
-                        marginBottom: 60,
-                    }}
-                >
+            <div
+                {...other}
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'stretch',
+                    height: '100%',
+                }}
+            >
+                {result.variants[0] && (
+                    <img
+                        src={imageUrl}
+                        style={{
+                            maxWidth: '100%',
+                            height: 'auto',
+                            objectFit: 'contain',
+                            flexGrow: '1',
+                            overflow: 'auto',
+                        }}
+                        alt={result.name}
+                    />
+                )}
+                <div style={{ flexShrink: '0', overflow: 'auto', marginTop: 30, marginBottom: 60 }}>
                     <Typography
                         variant="h4"
                         component="h4"

components/cms-modern/Navigation/Navigation.tsx

@@ -65,13 +65,11 @@ const Navigation = ({ pages, style }: NavigationProps) => {
         <nav className="navigation" style={style}>
             <ul className="navigation__list">
                 {pages
-                    .sort((p1, p2) =>
-                        p1.content?.menu.priority > p2.content?.menu.priority
-                            ? 1
-                            : p1.content?.menu.priority < p2.content?.menu.priority
-                              ? -1
-                              : 0,
-                    )
+                    .sort((p1, p2) => {
+                        const menu1Priority = p1.content?.menu?.priority || 0;
+                        const menu2Priority = p2.content?.menu?.priority || 0;
+                        return menu1Priority > menu2Priority ? 1 : menu1Priority < menu2Priority ? -1 : 0;
+                    })
                     .map(({ title, href = '', children = [], content, category }, index) => {
                         return (
                             <li

docs/FeatureHighlights.md

@@ -6,7 +6,7 @@
 - Multiple Visualisation implemented (page, standalone, time-based, etc.)
 - Visualisation SDK implmentation for Real-Time Visualisation from Amplience Dynamic Content
 - Filter API implementation for Store page & Product Details Page personalisation
-- [dc-integration-middleware](https://github.com/amplience/dc-integration-middleware) implementation to connect to e-Commerce (CommerceTools, BigCommerce, Shopify, SFCC file based catalog, etc.)
+- [dc-integration-middleware](https://github.com/amplience/dc-integration-middleware) implementation to connect to e-Commerce (CommerceTools, BigCommerce, Shopify, SFCC, Scayle, file based catalog, etc.)
 - Admin Panel (visualise content, slots, editons, switch between production and staging view)
 - Custom Dashboards (translation & production Kanban board, deep clone)
 - [Stylitics](https://stylitics.com) components for configuration in content not code

package.json

@@ -11,7 +11,7 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@amplience/dc-integration-middleware": "^2.3.1",
+        "@amplience/dc-integration-middleware": "^2.4.0",
         "@amplience/dc-integration-stylitics": "^1.0.0",
         "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.15.14",

pages/api/index.ts

@@ -55,7 +55,12 @@ let commerceApi: CommerceAPI & { vendor: () => string } = {
         return await (await initCommerceAPI()).getCategoryTree(args);
     },
     getCustomerGroups: async function (args: CommonArgs): Promise<CustomerGroup[]> {
-        return await (await initCommerceAPI()).getCustomerGroups(args);
+        try {
+            return await (await initCommerceAPI()).getCustomerGroups(args);
+        } catch (e) {
+            console.warn((e as Error).message);
+            return [];
+        }
     },
     vendor: function (): string {
         return cacheApiConfig().vendor;

sample-.env.local

@@ -9,4 +9,5 @@ DEMOSTORE_CONFIG_ECOMM_JSON='{"vendor":"rest","codec_params":{"productURL":"http
 # DEMOSTORE_CONFIG_ECOMM_JSON='{"vendor":"commercetools","codec_params":{"project":"","language":"en","client_id":"","client_secret":"","auth_url":"","api_url":"","scope":""}}'
 # DEMOSTORE_CONFIG_ECOMM_JSON='{"vendor":"sfcc","codec_params":{"api_url":"","version":"","auth_url":"","client_id":"","client_secret":"","site_id":""}}'
 # DEMOSTORE_CONFIG_ECOMM_JSON='{"vendor":"bigcommerce","codec_params":{"api_url":"","api_token":"","store_hash":""}}'
-# DEMOSTORE_CONFIG_ECOMM_JSON='{"vendor":"shopify","codec_params":{"access_token":"","admin_access_token":"","site_id":"","version":""}}'
+# DEMOSTORE_CONFIG_ECOMM_JSON='{"vendor":"shopify","codec_params":{"access_token":"","admin_access_token":"","site_id":"","version":""}}'
+# DEMOSTORE_CONFIG_ECOMM_JSON='{"vendor":"scayle","codec_params":{"access_token":"","shop_id":"","tenant_space":"","api_version":"","image_base_path": ""}}'