@adobe-commerce/elsie 1.3.1-alpha02 → 1.4.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.3.1-alpha02",
+  "version": "1.4.0-alpha1",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -27,10 +27,10 @@
   },
   "devDependencies": {
     "@adobe-commerce/event-bus": "~1.0.0",
-    "@adobe-commerce/fetch-graphql": "~1.0.0",
-    "@adobe-commerce/recaptcha": "~1.0.0",
+    "@adobe-commerce/fetch-graphql": "~1.1.0",
+    "@adobe-commerce/recaptcha": "~1.0.1",
     "@adobe-commerce/storefront-design": "~1.0.0",
-    "@dropins/build-tools": "~1.0.0",
+    "@dropins/build-tools": "~1.0.1",
     "preact": "~10.22.1",
     "vite-plugin-banner": "^0.8.0"
   },

package/src/components/CartItem/CartItem.css

@@ -241,15 +241,10 @@
 }
 
 .dropin-cart-item__price,
-.dropin-cart-item__footer div,
 .dropin-cart-item__attributes div {
   margin-top: var(--group-spacing);
 }
 
-.dropin-cart-item__footer p {
-  margin-top: 0;
-}
-
 .dropin-cart-item__quantity:not(.dropin-cart-item__quantity--edit) {
   display: none;
 }

package/src/components/Icon/Icon.stories.tsx

@@ -14,8 +14,13 @@ import * as Icons from '@adobe-commerce/elsie/icons';
 
 /**
  * Use Icons as symbols or metaphors to communicate and enhance the user experience.
+ * 
+ * The Icon component supports three source types:
+ * - Direct component imports
+ * - Icon names from the built-in icon set
+ * - SVGs from URLs (supports URLs that match the host domain)
  */
-const meta: Meta<IconProps> = {
+const meta: Meta<StoryIconProps> = {
   title: 'Components/Icon',
   component: Icon,
   argTypes: {
@@ -25,6 +30,13 @@ const meta: Meta<IconProps> = {
       control: {
         type: 'select',
       },
+      description: 'Select a built-in icon',
+    },
+    url: {
+      control: {
+        type: 'text',
+      },
+      description: 'Or enter a URL to an external SVG (this takes priority over icon selection)',
     },
     size: {
       control: 'select',
@@ -33,6 +45,7 @@ const meta: Meta<IconProps> = {
     stroke: {
       control: 'select',
       options: ['1', '2', '3', '4'],
+      description: 'Stroke width. Works only for stroke-based icons.',
     },
     title: {
       control: 'text',
@@ -43,7 +56,11 @@ const meta: Meta<IconProps> = {
 
 export default meta;
 
-type Story = StoryObj<IconProps>;
+type Story = StoryObj<StoryIconProps>;
+
+interface StoryIconProps extends IconProps {
+  url?: string;
+}
 
 /**
  * ```ts
@@ -52,25 +69,43 @@ type Story = StoryObj<IconProps>;
  */
 
 export const Primary: Story = {
+  render: ({ url, source, ...args }: StoryIconProps) => {
+    const iconSource = url || source;
+    return <Icon {...args} source={iconSource as any} />;
+  },
   args: {
     source: Cart,
   },
 };
 
 export const Lazy: Story = {
-  argTypes: {
-    source: {
-      mapping: Object.keys(Icons),
-    },
+  render: ({ url, source, ...args }: StoryIconProps) => {
+    const iconSource = url || source;
+    return <Icon {...args} source={iconSource as any} />;
   },
   args: {
     source: 'Cart',
   },
 };
 
-export const AllIcons: Story = {
+export const AllBuiltInIcons: Story = {
   argTypes: {
-    style: Object
+    style: Object,
+    url: {
+      table: {
+        disable: true
+      }
+    },
+    source: {
+      table: {
+        disable: true
+      }
+    },
+    title: {
+      table: {
+        disable: true
+      }
+    }
   },
   args: {
     style: {
@@ -96,3 +131,84 @@ export const AllIcons: Story = {
     </div>
   ),
 };
+
+
+export const UrlExamples: Story = {
+  argTypes: {
+    source: {
+      table: {
+        disable: true
+      }
+    },
+    title: {
+      table: {
+        disable: true
+      }
+    }
+  },
+  render: ({ url, ...args }: StoryIconProps) => (
+    <div style={{ 
+      display: 'grid', 
+      gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', 
+      gap: '2rem',
+      padding: '1rem'
+    }}>
+      <div style={{
+        border: '1px solid #e1e5e9',
+        borderRadius: '8px',
+        padding: '1.5rem',
+        textAlign: 'center',
+        backgroundColor: '#f8f9fa'
+      }}>
+        <h3 style={{ margin: '0 0 1rem 0', color: '#2c3e50' }}>✅ Valid URL</h3>
+        <Icon 
+          source={url || `${window.location.origin}/favicon.svg`}
+          size="12"
+          title="logo icon from common domain"
+          aria-label="Star icon loaded from external URL"
+          {...args}
+        />
+        <p style={{ 
+          fontSize: '12px', 
+          color: '#495057',
+          margin: '0.5rem 0 0 0',
+          wordBreak: 'break-all'
+        }}>
+          {url ? `Displays icon from: ${url}` : `Displays icon from ${window.location.origin}/favicon.svg`}
+        </p>
+      </div>
+      
+      <div style={{
+        border: '1px solid #f8d7da',
+        borderRadius: '8px',
+        padding: '1.5rem',
+        textAlign: 'center',
+        backgroundColor: '#f8d7da'
+      }}>
+        <h3 style={{ margin: '0 0 1rem 0', color: '#721c24' }}>❌ Invalid URL</h3>
+        <Icon 
+          source="https://invalid-url.com/icon.svg" 
+          size="32"
+          title="Failed to load icon"
+          aria-label="Icon that failed to load"
+        />
+        <p style={{ 
+          fontSize: '12px', 
+          color: '#721c24',
+          margin: '0.5rem 0 0 0',
+          wordBreak: 'break-all'
+        }}>
+          Shows empty SVG
+        </p>
+      </div>
+      
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Examples of different URL formats supported by the Icon component.',
+      },
+    },
+  },
+};

package/src/components/Icon/Icon.tsx

@@ -10,6 +10,7 @@
 import { FunctionComponent } from 'preact';
 import { classes } from '@adobe-commerce/elsie/lib/classes';
 import { lazy, Suspense, SVGProps } from 'preact/compat';
+import { useState, useEffect } from 'preact/hooks';
 
 import '@adobe-commerce/elsie/components/Icon/Icon.css';
 
@@ -62,12 +63,14 @@ const lazyIcons = {
   Coupon: lazy(() => import('@adobe-commerce/elsie/icons/Coupon.svg')),
   Gift: lazy(() => import('@adobe-commerce/elsie/icons/Gift.svg')),
   GiftCard: lazy(() => import('@adobe-commerce/elsie/icons/GiftCard.svg')),
+  Edit: lazy(() => import('@adobe-commerce/elsie/icons/Edit.svg')),
 };
 
 export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'size'> {
-  source:
-    | FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>
-    | IconType;
+  source?:
+  | FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>
+  | IconType
+  | string;
   size?: '12' | '16' | '24' | '32' | '64' | '80';
   stroke?: '1' | '2' | '3' | '4';
   className?: string;
@@ -78,6 +81,130 @@ export type IconNode = FunctionComponent<
   SVGProps<SVGSVGElement> & { title?: string }
 >;
 
+function isValidUrl(source: string): boolean { // check for URL from same domain
+  try {
+    if (source.startsWith('//')) {
+      const absoluteUrl = `${window.location.protocol}${source}`;
+      const url = new URL(absoluteUrl);
+      return url.hostname === window.location.hostname;
+    }
+    const url = new URL(source);
+    
+    if (url.hostname !== window.location.hostname) {
+      console.error(`[Icon] External URL rejected for security: ${source} - Only same-domain URLs are allowed`);
+      return false;
+    }
+    
+    return true;
+  } catch {
+    console.error(`[Icon] Invalid URL format: ${source}`);
+    return false;
+  }
+}
+
+function UrlSvgLoader({
+  url,
+  ...props
+}: SVGProps<SVGSVGElement> & { url: string }) {
+  const [svgContent, setSvgContent] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    fetch(url)
+      .then(response => {
+        if (!response.ok) {
+          console.error(`[Icon] Failed to fetch SVG: ${response.status} ${response.statusText}`);
+          throw error;
+        }
+        return response.text();
+      })
+      .then(content => {
+        // Check if content is valid SVG
+        try {
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(content, "image/svg+xml");
+          const svg = doc.querySelector('svg');
+          if (!svg) {
+            throw new Error("No <svg> element found");
+          }
+          // Success!
+        } catch(e: unknown) {
+          if (e instanceof Error ) {
+            console.error(`[Icon] Invalid SVG content from ${url}: ${e.message}`);
+          } else {
+            console.error(`[Icon] Invalid SVG content from ${url}: ${String(e)}`);
+          }
+          setError(true);
+          setLoading(false);
+        }
+        
+
+        // Process SVG content to ensure proper sizing and accessibility
+        let processedContent = content;
+
+        if (props.width) {
+          processedContent = processedContent.replace(
+            /<svg([^>]*)\s+width\s*=\s*["'][^"']*["']/gi,
+            '<svg$1'
+          );
+          processedContent = processedContent.replace(
+            /<svg/i,
+            `<svg width="${props.width}"`
+          );
+        }
+
+        if (props.height) {
+          processedContent = processedContent.replace(
+            /<svg([^>]*)\s+height\s*=\s*["'][^"']*["']/gi,
+            '<svg$1'
+          );
+          processedContent = processedContent.replace(
+            /<svg/i,
+            `<svg height="${props.height}"`
+          );
+        }
+        
+        if (props.title) {
+          processedContent = processedContent.replace(/<title[^>]*>.*?<\/title>/gi, '');
+          processedContent = processedContent.replace(
+            /<svg([^>]*)>/i,
+            `<svg$1><title>${props.title}</title>`
+          );
+        }
+        
+        setSvgContent(processedContent);
+        setLoading(false);
+      })
+      .catch((error) => {
+        if (error instanceof Error) {
+          console.error(`[Icon] ${error.message}`);
+        } else {
+          console.error(`[Icon] ${String(error)}`);
+        }
+        setError(true);
+        setLoading(false);
+      });
+  }, [url, props.width, props.height, props.title]);
+
+  if (loading || error) {
+    return <svg {...props} />;
+  }
+
+  return (
+    <span
+      className={props.className}
+      style={{
+        width: String(props.width),
+        height: String(props.height),
+        display: 'inline-flex',
+        lineHeight: 0,
+      }}
+      dangerouslySetInnerHTML={{ __html: svgContent }}
+    />
+  );
+}
+
 export function Icon({
   source: Source,
   size = '24',
@@ -86,7 +213,6 @@ export function Icon({
   className,
   ...props
 }: IconProps) {
-  const LazyIcon = typeof Source === 'string' ? lazyIcons[Source] : null;
 
   const defaultProps = {
     className: classes([
@@ -99,10 +225,27 @@ export function Icon({
     viewBox,
   };
 
+  if (typeof Source === 'string' && isValidUrl(Source)) {
+    return (
+      <Suspense fallback={<svg {...props} {...defaultProps} />}>
+        <UrlSvgLoader url={Source} {...props} {...defaultProps}/>
+      </Suspense>
+    );
+  }
+
+  const LazyIcon = typeof Source === 'string' && Source in lazyIcons
+    ? lazyIcons[Source as IconType]
+    : null;
+
+  const isRejectedUrl = typeof Source === 'string' && 
+    (Source.startsWith('http') || Source.startsWith('//') || Source.startsWith('/'));
+
   return (
     <Suspense fallback={<svg {...props} {...defaultProps} />}>
       {LazyIcon ? (
         <LazyIcon {...props} {...defaultProps} />
+      ) : isRejectedUrl ? (
+        <svg {...props} {...defaultProps} />
       ) : (
         // @ts-ignore
         <Source {...props} {...defaultProps} />

package/src/components/Modal/Modal.css

@@ -10,10 +10,10 @@
 /* https://cssguidelin.es/#bem-like-naming */
 
 .dropin-modal {
-  height: 100vh;
-  width: 100vw;
   position: fixed;
   top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
   z-index: 99999;
   overflow: auto;

package/src/components/Modal/Modal.stories.tsx

@@ -11,7 +11,7 @@ import { Meta, StoryObj } from '@storybook/preact';
 import { Modal as component, ModalProps } from './Modal';
 import { useState } from 'preact/hooks';
 import { Button } from '../Button';
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within, waitFor } from '@storybook/test';
 
 const meta: Meta<ModalProps> = {
   title: 'Components/Modal',
@@ -107,13 +107,21 @@ export const SmallModal: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('button'));
 
+    const portalRoot = await waitFor(() => {
+      const root = document.querySelector('[data-portal-root]') as HTMLDivElement;
+      expect(root).toBeTruthy();
+      return root;
+    });
+
+    await expect(portalRoot).toBeVisible();
+
     const modal = document.querySelector(
       '.dropin-modal__body'
     ) as HTMLDivElement;
 
     await expect(modal).toBeVisible();
 
-    await expect(await canvas.findByText('Small modal')).toBeVisible();
+    expect(portalRoot.querySelector('h4')?.innerText).toBe('Small modal');
 
     const closeButton = document.querySelector(
       '.dropin-modal__header-close-button'
@@ -148,13 +156,21 @@ export const MediumModal: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('button'));
 
+    const portalRoot = await waitFor(() => {
+      const root = document.querySelector('[data-portal-root]') as HTMLDivElement;
+      expect(root).toBeTruthy();
+      return root;
+    });
+
+    await expect(portalRoot).toBeVisible();
+
     const modal = document.querySelector(
       '.dropin-modal__body'
     ) as HTMLDivElement;
 
     await expect(modal).toBeVisible();
 
-    await expect(await canvas.findByText('Medium modal')).toBeVisible();
+    expect(portalRoot.querySelector('h3')?.innerText).toBe('Medium modal');
 
     const closeButton = document.querySelector(
       '.dropin-modal__header-close-button'
@@ -187,11 +203,17 @@ export const FullModal: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('button'));
 
+    const portalRoot = await waitFor(() => {
+      const root = document.querySelector('[data-portal-root]') as HTMLDivElement;
+      expect(root).toBeTruthy();
+      return root;
+    });
+
     const modal = document.querySelector(
       '.dropin-modal__body'
     ) as HTMLDivElement;
 
-    await expect(modal).toBeVisible();
+    await expect(portalRoot).toBeVisible();
 
     const closeButton = document.querySelector(
       '.dropin-modal__header-close-button'

package/src/components/Modal/Modal.tsx

@@ -18,6 +18,7 @@ import {
 import { Button } from '../Button';
 import { Close as CloseSVG } from '@adobe-commerce/elsie/icons';
 import { VNode } from 'preact';
+import { Portal } from '../Portal/Portal';
 
 import '@adobe-commerce/elsie/components/Modal/Modal.css';
 
@@ -106,52 +107,54 @@ export const Modal: FunctionComponent<ModalProps> = ({
   }, []);
 
   return (
-    <div
-      className={classes([
-        'dropin-modal',
-        ['dropin-modal--dim', backgroundDim],
-      ])}
-    >
+    <Portal>
       <div
-        {...props}
         className={classes([
-          'dropin-modal__body',
-          [`dropin-modal__body--${size}`, size],
-          className,
+          'dropin-modal',
+          ['dropin-modal--dim', backgroundDim],
         ])}
       >
         <div
+          {...props}
           className={classes([
-            'dropin-modal__header',
-            ['dropin-modal__header-title', !!title],
+            'dropin-modal__body',
+            [`dropin-modal__body--${size}`, size],
+            className,
           ])}
         >
-          {title && (
-            <div className={classes(['dropin-modal__header-title-content'])}>
-              {title}
-            </div>
-          )}
-
-          {showCloseButton && (
-            <Button
-              aria-label={translations.modalCloseLabel}
-              variant="tertiary"
-              className="dropin-modal__header-close-button"
-              onClick={handleOnClose}
-              icon={<CloseSVG />}
-            />
-          )}
-        </div>
-
-        <div
-          className={classes([
-            'dropin-modal__content',
-            ['dropin-modal__body--centered', centered],
-          ])}
-        >
-          {children}
+          <div
+            className={classes([
+              'dropin-modal__header',
+              ['dropin-modal__header-title', !!title],
+            ])}
+          >
+            {title && (
+              <div className={classes(['dropin-modal__header-title-content'])}>
+                {title}
+              </div>
+            )}
+
+            {showCloseButton && (
+              <Button
+                aria-label={translations.modalCloseLabel}
+                variant="tertiary"
+                className="dropin-modal__header-close-button"
+                onClick={handleOnClose}
+                icon={<CloseSVG />}
+              />
+            )}
+          </div>
+
+          <div
+            className={classes([
+              'dropin-modal__content',
+              ['dropin-modal__body--centered', centered],
+            ])}
+          >
+            {children}
+          </div>
         </div>
       </div>
-    </div>
+    </Portal>
   );
 };

package/src/components/Portal/Portal.stories.tsx

@@ -0,0 +1,145 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+import { Meta, StoryObj } from '@storybook/preact';
+import { Portal } from './Portal';
+import { Button } from '../Button';
+import { useState } from 'preact/compat';
+
+const meta: Meta<typeof Portal> = {
+  title: 'Components/Portal',
+  component: Portal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Portal>;
+
+/**
+ * ```ts
+ * import { Portal } from '@/elsie/components/Portal';
+ *
+ * <Portal>
+ *      <div>👋 Howdy, I'm Howdy!</div>
+ * </Portal>
+ * ```
+ */
+
+// Portal with dynamic content
+export const DynamicContent: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [count, setCount] = useState(0);
+
+    return (
+      <div style={{ border: '2px dashed #ccc', padding: '20px' }}>
+        <Button onClick={() => setIsOpen(!isOpen)}>
+          {isOpen ? 'Close Portal' : 'Open Portal'}
+        </Button>
+        
+        {isOpen && (
+          <Portal>
+            <div style={{ 
+              position: 'fixed', 
+              top: '50%', 
+              left: '50%', 
+              transform: 'translate(-50%, -50%)',
+              background: 'white',
+              padding: '20px',
+              border: '1px solid #ccc',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+            }}>
+              <p>Portal content with counter: {count}</p>
+              <Button onClick={() => setCount(c => c + 1)}>
+                Increment Counter
+              </Button>
+              <Button 
+                variant="tertiary" 
+                onClick={() => setIsOpen(false)}
+                style={{ marginLeft: '8px' }}
+              >
+                Close
+              </Button>
+            </div>
+          </Portal>
+        )}
+      </div>
+    );
+  },
+};
+
+// Portal with nested portals
+export const NestedPortals: Story = {
+  render: () => {
+    const [isOuterOpen, setOuterOpen] = useState(false);
+    const [isInnerOpen, setInnerOpen] = useState(false);
+
+    return (
+      <div style={{ border: '2px dashed #ccc', padding: '20px' }}>
+        <Button onClick={() => setOuterOpen(!isOuterOpen)}>
+          {isOuterOpen ? 'Close Outer Portal' : 'Open Outer Portal'}
+        </Button>
+        
+        {isOuterOpen && (
+          <Portal>
+            <div style={{ 
+              position: 'fixed', 
+              top: '50%', 
+              left: '50%', 
+              transform: 'translate(-50%, -50%)',
+              background: 'white',
+              padding: '20px',
+              border: '1px solid #ccc',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+            }}>
+              <p>Outer Portal Content</p>
+              <Button onClick={() => setInnerOpen(!isInnerOpen)}>
+                {isInnerOpen ? 'Close Inner Portal' : 'Open Inner Portal'}
+              </Button>
+              
+              {isInnerOpen && (
+                <Portal>
+                  <div style={{ 
+                    position: 'fixed', 
+                    top: '60%', 
+                    left: '50%', 
+                    transform: 'translate(-50%, -50%)',
+                    background: 'white',
+                    padding: '20px',
+                    border: '1px solid #ccc',
+                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+                  }}>
+                    <p>Inner Portal Content</p>
+                    <Button 
+                      variant="tertiary" 
+                      onClick={() => setInnerOpen(false)}
+                    >
+                      Close Inner Portal
+                    </Button>
+                  </div>
+                </Portal>
+              )}
+              
+              <Button 
+                variant="tertiary" 
+                onClick={() => setOuterOpen(false)}
+                style={{ marginLeft: '8px' }}
+              >
+                Close Outer Portal
+              </Button>
+            </div>
+          </Portal>
+        )}
+      </div>
+    );
+  },
+};

package/src/components/Portal/Portal.tsx

@@ -0,0 +1,43 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+import { ComponentChildren, render } from 'preact';
+import { FunctionComponent, useEffect, useRef } from 'preact/compat';
+
+interface PortalProps {
+  children: ComponentChildren;
+}
+
+export const Portal: FunctionComponent<PortalProps> = ({ children }) => {
+  const portalRoot = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    // Create portal root if it doesn't exist
+    if (!portalRoot.current) {
+      portalRoot.current = document.createElement('div');
+      portalRoot.current.setAttribute('data-portal-root', '');
+      portalRoot.current.classList.add('dropin-design');
+      document.body.appendChild(portalRoot.current);
+    }
+
+    // Render children into portal root
+    render(children, portalRoot.current);
+
+    // Cleanup
+    return () => {
+      if (portalRoot.current) {
+        render(null, portalRoot.current);
+        portalRoot.current.remove();
+        portalRoot.current = null;
+      }
+    };
+  }, [children]);
+
+  return null;
+}; 

package/src/icons/Edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>

package/src/icons/index.ts

@@ -40,3 +40,4 @@ export { default as EmptyBox } from './EmptyBox.svg';
 export { default as Coupon } from './Coupon.svg';
 export { default as Gift } from './Gift.svg';
 export { default as GiftCard } from './GiftCard.svg';
+export { default as Edit } from './Edit.svg';

package/src/lib/aem/assets.ts

@@ -0,0 +1,207 @@
+import { provider as UI, Image } from '@adobe-commerce/elsie/components';
+import { getConfigValue } from '@adobe-commerce/elsie/lib/aem/configs';
+
+interface AemAssetsParams {
+  quality?: number;
+  format?: string;
+  crop?: {
+    xOrigin?: number;
+    yOrigin?: number;
+    width?: number;
+    height?: number;
+  };
+  size?: {
+    width?: number;
+    height?: number;
+  };
+  width?: number;
+  height?: number;
+  [key: string]: any;
+}
+
+interface AemAssetsImageConfig {
+  wrapper?: HTMLElement;
+  alias: string;
+  params: AemAssetsParams;
+  imageProps: {
+    src: string;
+    width?: number;
+    height?: number;
+    [key: string]: any;
+  };
+  src?: string;
+}
+
+interface RenderContext {
+  replaceWith: (element: HTMLElement) => void;
+}
+
+export function isAemAssetsEnabled(): boolean {
+  const config = getConfigValue('commerce-assets-enabled');
+
+  return config && (
+    (typeof config === 'string' && config.toLowerCase() === 'true')
+    || (typeof config === 'boolean' && config === true)
+  );
+}
+
+export function getDefaultAemAssetsOptimizationParams(): { quality: number; format: string } {
+  // See: https://adobe-aem-assets-delivery-experimental.redoc.ly/
+  return {
+    quality: 80,
+    format: 'webp',
+  };
+}
+
+/**
+ * Normalizes the given URL to ensure it is a valid URL.
+ * @param {string} url - The URL to normalize.
+ * @returns {string} The normalized URL.
+ */
+function normalizeUrl(url: string): string {
+  let imageUrl = url;
+
+  if (imageUrl.startsWith('//')) {
+    // Use current window's protocol.
+    const { protocol } = window.location;
+    console.log('protocol', protocol);
+    imageUrl = protocol + imageUrl;
+  }
+
+  return imageUrl;
+}
+
+export function isAemAssetsUrl(url: string | URL): boolean {
+  const assetsUrl = typeof url === 'string' ? new URL(normalizeUrl(url)) : url;
+
+  if (!assetsUrl.pathname.startsWith('/adobe/assets/urn:aaid:aem')) {
+    return false;
+  }
+
+  return true;
+}
+
+export function generateAemAssetsOptimizedUrl(url: string, alias: string, params: AemAssetsParams = {}): string {
+  const defaultParams = getDefaultAemAssetsOptimizationParams();
+  const mergedParams: AemAssetsParams = { ...defaultParams, ...params };
+
+  // Destructure the ones that need special handling
+  const {
+    format,
+    crop,
+    size,
+    ...optimizedParams
+  } = mergedParams;
+
+  const searchParams = new URLSearchParams(optimizedParams);
+
+  if (crop) {
+    const [xOrigin, yOrigin] = [crop.xOrigin || 0, crop.yOrigin || 0];
+    const [width, height] = [crop.width || 100, crop.height || 100];
+
+    const cropTransform = `${xOrigin}p,${yOrigin}p,${width}p,${height}p`;
+    searchParams.set('crop', cropTransform);
+  }
+
+  // Both values must be present
+  if (size && size.width && size.height) {
+    searchParams.set('size', `${size.width},${size.height}`);
+  }
+
+  return `${url}/as/${alias}.${format}?${searchParams.toString()}`;
+}
+
+export function tryGenerateAemAssetsOptimizedUrl(url: string, alias: string, params: AemAssetsParams = {}): string {
+  const assetsEnabled = isAemAssetsEnabled();
+
+  if (!(assetsEnabled)) {
+    // No-op, doesn't do anything.
+    return url;
+  }
+
+  const assetsUrl = new URL(normalizeUrl(url));
+
+  if (!isAemAssetsUrl(assetsUrl)) {
+    // Not an AEM Assets URL, so no-op.
+    return url;
+  }
+
+  const base = assetsUrl.origin + assetsUrl.pathname;
+  return generateAemAssetsOptimizedUrl(base, alias, params);
+}
+
+export function makeAemAssetsImageSlot(
+  config: AemAssetsImageConfig,
+) {
+  return (ctx: RenderContext) => {
+    const {
+      wrapper,
+      alias,
+      params,
+      imageProps,
+      src,
+    } = config;
+
+    const container = wrapper ?? document.createElement('div');
+    const imageSrc = generateAemAssetsOptimizedUrl(src || imageProps.src, alias, params);
+
+    UI.render(Image as any, {
+      ...imageProps,
+
+      src: imageSrc,
+      params: {
+        width: params.width,
+
+        // If not null, they will be applied by default.
+        // And they are not compatible with the AEM Assets API.
+        crop: null,
+        fit: null,
+        auto: null,
+      },
+    })(container);
+
+    ctx.replaceWith(container);
+  };
+}
+
+export function tryRenderAemAssetsImage(ctx: RenderContext, config: AemAssetsImageConfig): void {
+  // Renders an equivalent of the default image.
+  function renderDefaultImage(): void {
+    const container = config.wrapper ?? document.createElement('div');
+    const { imageProps } = config;
+
+    (UI.render as any)(Image, imageProps)(container);
+    ctx.replaceWith(container);
+  }
+
+  const assetsEnabled = isAemAssetsEnabled();
+
+  if (!(assetsEnabled)) {
+    // No-op, render the default image.
+    renderDefaultImage();
+    return;
+  }
+
+  const { imageProps, src, ...slotConfig } = config;
+  const assetsUrl = new URL(normalizeUrl(src ?? imageProps.src));
+
+  if (!isAemAssetsUrl(assetsUrl)) {
+    // Not an AEM Assets URL, so render the default image.
+    renderDefaultImage();
+    return;
+  }
+
+  makeAemAssetsImageSlot({
+    // Use the default image props for params and src.
+    // Unless overriden by the slot config.
+    src: assetsUrl.toString(),
+    params: {
+      width: imageProps.width,
+      height: imageProps.height,
+      ...slotConfig.params,
+    },
+    imageProps,
+    alias: slotConfig.alias,
+    wrapper: slotConfig.wrapper,
+  })(ctx);
+}