feat: Add customDomain to MFE components to set easily your forked …

…app.

packages/react-components/src/components/customers/MyAccountLink.tsx

@@ -26,10 +26,14 @@ interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
    * The label of the link
    */
   label?: string | JSX.Element
+  /**
+   * The domain of your forked application
+   */
+  customDomain?: string
 }
 
 export function MyAccountLink(props: Props): JSX.Element {
-  const { label = 'Go to my account', children, ...p } = props
+  const { label = 'Go to my account', children, customDomain, ...p } = props
   const { accessToken, endpoint } = useContext(CommerceLayerContext)
   if (accessToken == null || endpoint == null)
     throw new Error('Cannot use `MyAccountLink` outside of `CommerceLayer`')
@@ -39,7 +43,8 @@ export function MyAccountLink(props: Props): JSX.Element {
     slug,
     accessToken,
     applicationType: 'my-account',
-    domain
+    domain,
+    customDomain
   })
   const parentProps = {
     disabled,

packages/react-components/src/components/customers/MyIdentityLink.tsx

@@ -37,10 +37,23 @@ interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
    * The return url to redirect the user after the login/signup
    */
   returnUrl?: string
+  /**
+   * The domain of your forked application
+   */
+  customDomain?: string
 }
 
 export function MyIdentityLink(props: Props): JSX.Element {
-  const { label, children, type, clientId, scope, returnUrl, ...p } = props
+  const {
+    label,
+    children,
+    type,
+    clientId,
+    scope,
+    returnUrl,
+    customDomain,
+    ...p
+  } = props
   const { accessToken, endpoint } = useContext(CommerceLayerContext)
   if (accessToken == null || endpoint == null)
     throw new Error('Cannot use `MyIdentityLink` outside of `CommerceLayer`')
@@ -53,7 +66,8 @@ export function MyIdentityLink(props: Props): JSX.Element {
     modeType: type,
     clientId,
     scope,
-    returnUrl: returnUrl ?? window.location.href
+    returnUrl: returnUrl ?? window.location.href,
+    customDomain
   })
   const parentProps = {
     label,

packages/react-components/src/components/orders/CartLink.tsx

@@ -38,10 +38,14 @@ interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
    * The type of the cart. Defaults to undefined. If set to 'mini', the cart will open in a modal.
    */
   type?: 'mini'
+  /**
+   * The domain of your forked application
+   */
+  customDomain?: string
 }
 
 export function CartLink(props: Props): JSX.Element | null {
-  const { label, children, type, ...p } = props
+  const { label, children, type, customDomain, ...p } = props
   const { order, createOrder } = useContext(OrderContext)
   const { accessToken, endpoint } = useContext(CommerceLayerContext)
   if (accessToken == null)
@@ -56,7 +60,8 @@ export function CartLink(props: Props): JSX.Element | null {
           orderId: order?.id,
           accessToken,
           domain,
-          applicationType: 'cart'
+          applicationType: 'cart',
+          customDomain
         })
       : ''
   const handleClick = async (
@@ -74,7 +79,8 @@ export function CartLink(props: Props): JSX.Element | null {
             orderId,
             accessToken,
             domain,
-            applicationType: 'cart'
+            applicationType: 'cart',
+            customDomain
           })
       }
     } else {

packages/react-components/src/components/orders/HostedCart.tsx

@@ -110,6 +110,10 @@ interface Props
    * A function that will be called when the cart is open and the background is clicked.
    */
   handleOpen?: () => void
+  /**
+   * The domain of your forked application.
+   */
+  customDomain?: string
 }
 
 export function HostedCart({
@@ -118,6 +122,7 @@ export function HostedCart({
   style,
   open = false,
   handleOpen,
+  customDomain,
   ...props
 }: Props): JSX.Element | null {
   const [isOpen, setOpen] = useState(false)
@@ -142,7 +147,8 @@ export function HostedCart({
           orderId,
           accessToken,
           domain,
-          applicationType: 'cart'
+          applicationType: 'cart',
+          customDomain
         })
       )
       if (openCart) {

packages/react-components/src/hooks/useOrderContainer.ts

@@ -26,7 +26,7 @@ type TCreateCartParams = Pick<
 interface TReturnOrder
   extends Omit<
     OrderState,
-    'loading' | 'include' | 'includeLoaded' | 'withoutIncludes'
+    'loading' | 'include' | 'includeLoaded' | 'withoutIncludes' | 'orderId'
   > {
   reloadOrder: () => Promise<OrderState['order']>
   addToCart: (params: TAddToCartParams) => ReturnType<typeof addToCart>

packages/react-components/src/utils/getApplicationLink.ts

@@ -32,6 +32,7 @@ interface TArgs {
   accessToken: string
   slug: string
   domain: string
+  customDomain?: string
 }
 
 type Props = ApplicationTypeProps & TArgs
@@ -45,15 +46,18 @@ export function getApplicationLink({
   modeType,
   clientId,
   scope,
-  returnUrl
+  returnUrl,
+  customDomain
 }: Props): string {
   const env = domain === 'commercelayer.io' ? '' : 'stg.'
-  const t = modeType === 'login' ? '' : 'signup'
+  const t =
+    applicationType === 'identity' ? (modeType === 'login' ? '' : 'signup') : ''
   const c = clientId ? `&clientId=${clientId}` : ''
   const s = scope ? `&scope=${scope}` : ''
   const r = returnUrl ? `&returnUrl=${returnUrl}` : ''
   const params = applicationType === 'identity' ? `${c}${s}${r}` : ''
-  return `https://${slug}.${env}commercelayer.app/${applicationType.toString()}/${
+  const domainName = customDomain ?? `${slug}.${env}commercelayer.app`
+  return `https://${domainName}/${applicationType.toString()}/${
     orderId ?? t ?? ''
   }?accessToken=${accessToken}${params}`
 }