feat: customize mfe links

packages/drop-in/package.json

@@ -46,6 +46,7 @@
   },
   "dependencies": {
     "@commercelayer/js-auth": "^6.3.1",
+    "@commercelayer/organization-config": "^1.4.9",
     "@commercelayer/sdk": "^6.14.1",
     "@types/lodash": "^4.17.7",
     "iframe-resizer": "4.4.2",

packages/drop-in/src/apis/commercelayer/account.ts

@@ -1,5 +1,5 @@
 import { getAccessToken } from '#apis/commercelayer/client'
-import { getConfig } from '#apis/commercelayer/config'
+import { getConfig, getOrganizationConfig } from '#apis/commercelayer/config'
 import { getClosestLocationHref } from '#utils/url'
 
 export async function getMyAccountUrl(): Promise<string | undefined> {
@@ -10,7 +10,10 @@ export async function getMyAccountUrl(): Promise<string | undefined> {
     return undefined
   }
 
-  return `${config.appEndpoint}/my-account?accessToken=${accessToken}`
+  const organizationConfig = await getOrganizationConfig()
+  const hostedUrl = `${config.appEndpoint}/my-account`
+
+  return `${organizationConfig?.links?.my_account ?? hostedUrl}?accessToken=${accessToken}`
 }
 
 export async function getIdentityUrl(
@@ -22,7 +25,10 @@ export async function getIdentityUrl(
     return '#'
   }
 
-  return `${config.appEndpoint}/identity/${type}?clientId=${
+  const organizationConfig = await getOrganizationConfig()
+  const hostedUrl = `${config.appEndpoint}/identity`
+
+  return `${organizationConfig?.links?.identity ?? hostedUrl}/${type}?clientId=${
     config.clientId
   }&scope=${config.scope}&returnUrl=${getClosestLocationHref()}`
 }

packages/drop-in/src/apis/commercelayer/cart.ts

@@ -1,5 +1,5 @@
 import { createClient, getAccessToken } from '#apis/commercelayer/client'
-import { getConfig } from '#apis/commercelayer/config'
+import { getConfig, getOrganizationConfig } from '#apis/commercelayer/config'
 import { fireEvent } from '#apis/event'
 import { getKeyForCart } from '#apis/storage'
 import type {
@@ -86,9 +86,10 @@ export async function getCartUrl(
     cartId = cart.id
   }
 
-  return `${config.appEndpoint}/cart/${
-    cartId ?? 'null'
-  }?accessToken=${accessToken}`
+  const organizationConfig = await getOrganizationConfig()
+  const hostedUrl = `${config.appEndpoint}/cart/${cartId ?? 'null'}`
+
+  return `${organizationConfig?.links?.cart ?? hostedUrl}?accessToken=${accessToken}`
 }
 
 export async function getCheckoutUrl(): Promise<string | undefined> {
@@ -100,9 +101,10 @@ export async function getCheckoutUrl(): Promise<string | undefined> {
     return undefined
   }
 
-  return `${config.appEndpoint}/checkout/${
-    cart.id ?? 'null'
-  }?accessToken=${accessToken}`
+  const organizationConfig = await getOrganizationConfig()
+  const hostedUrl = `${config.appEndpoint}/checkout/${cart.id ?? 'null'}`
+
+  return `${organizationConfig?.links?.checkout ?? hostedUrl}?accessToken=${accessToken}`
 }
 
 export async function _getCart(): Promise<Order | null> {

packages/drop-in/src/apis/commercelayer/config.ts

@@ -1,3 +1,9 @@
+import { jwtDecode, jwtIsSalesChannel } from '@commercelayer/js-auth'
+import { createClient, getAccessToken } from './client'
+import { getConfig as mergeConfig } from '@commercelayer/organization-config'
+import { getCart } from './cart'
+import { memoize } from '#utils/utils'
+
 export interface CommerceLayerConfig {
   /**
    * Client ID is the application unique identifier. You can find it in your dashboard.
@@ -107,3 +113,39 @@ export function getConfig(): Config {
     appEndpoint
   }
 }
+
+const getOrganization = memoize(async () => {
+  const config = getConfig()
+  const client = await createClient(config)
+  return await client.organization.retrieve({
+    fields: {
+      // @ts-expect-error This is the resource name
+      organizations: ['config']
+    }
+  })
+})
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export async function getOrganizationConfig() {
+  const config = getConfig()
+  const { accessToken } = await getAccessToken(config)
+  const jwt = jwtDecode(accessToken)
+  const cart = await getCart()
+
+  const organization = await getOrganization()
+
+  const mergeConfigOptions: Parameters<typeof mergeConfig>[0] = {
+    jsonConfig: organization.config ?? {},
+    market:
+      jwtIsSalesChannel(jwt.payload) && jwt.payload.market?.id[0] != null
+        ? `market:id:${jwt.payload.market.id[0]}`
+        : undefined,
+    params: {
+      accessToken,
+      orderId: cart?.id,
+      lang: 'en'
+    }
+  }
+
+  return mergeConfig(mergeConfigOptions)
+}

packages/drop-in/src/components/cl-cart-link/cl-cart-link.spec.tsx

@@ -1,4 +1,5 @@
 import * as cart from '#apis/commercelayer/cart'
+import * as config from '#apis/commercelayer/config'
 import * as client from '#apis/commercelayer/client'
 import type { CommerceLayerClient } from '@commercelayer/sdk'
 import { newSpecPage } from '@stencil/core/testing'
@@ -17,6 +18,8 @@ describe('cl-cart-link.spec', () => {
       scope: 'market:code:usa'
     })
 
+    jest.spyOn(config, 'getOrganizationConfig').mockResolvedValue({})
+
     const { root, waitForChanges } = await newSpecPage({
       components: [CLCartLink],
       html: '<cl-cart-link>Cart</cl-cart-link>'
@@ -45,6 +48,7 @@ describe('cl-cart-link.spec', () => {
       accessToken: 'token-123',
       scope: 'market:code:usa'
     })
+    jest.spyOn(config, 'getOrganizationConfig').mockResolvedValue({})
     jest.spyOn(cart, 'getCart').mockResolvedValue({
       type: 'orders',
       id: 'order-123',
@@ -86,6 +90,7 @@ describe('cl-cart-link.spec', () => {
       accessToken: 'token-123',
       scope: 'market:code:usa'
     })
+    jest.spyOn(config, 'getOrganizationConfig').mockResolvedValue({})
     jest.spyOn(cart, 'getCart').mockResolvedValue(null)
     jest
       .spyOn(client, 'createClient')

packages/drop-in/src/components/cl-identity-link/cl-identity-link.spec.tsx

@@ -1,4 +1,5 @@
 import * as client from '#apis/commercelayer/client'
+import * as config from '#apis/commercelayer/config'
 import { newSpecPage } from '@stencil/core/testing'
 import { ClIdentityLink } from './cl-identity-link'
 import * as logger from '#utils/logger'
@@ -14,6 +15,8 @@ beforeEach(() => {
     scope: 'market:code:usa'
   })
 
+  jest.spyOn(config, 'getOrganizationConfig').mockResolvedValue({})
+
   log = jest.spyOn(logger, 'log')
 })
 

packages/drop-in/src/components/cl-my-account-link/cl-my-account-link.spec.tsx

@@ -1,4 +1,5 @@
 import * as client from '#apis/commercelayer/client'
+import * as config from '#apis/commercelayer/config'
 import { fireEvent } from '#apis/event'
 import { newSpecPage } from '@stencil/core/testing'
 import { ClMyAccountLink } from './cl-my-account-link'
@@ -15,6 +16,8 @@ describe('cl-my-account-link.spec', () => {
       scope: 'market:code:usa'
     })
 
+    jest.spyOn(config, 'getOrganizationConfig').mockResolvedValue({})
+
     const { root, waitForChanges } = await newSpecPage({
       components: [ClMyAccountLink],
       html: '<cl-my-account-link>My Account</cl-my-account-link>'
@@ -38,6 +41,8 @@ describe('cl-my-account-link.spec', () => {
       scope: 'market:code:usa'
     })
 
+    jest.spyOn(config, 'getOrganizationConfig').mockResolvedValue({})
+
     const { root, waitForChanges } = await newSpecPage({
       components: [ClMyAccountLink],
       html: '<cl-my-account-link target="_blank">My Account</cl-my-account-link>'
@@ -62,6 +67,8 @@ describe('cl-my-account-link.spec', () => {
       scope: 'market:code:usa'
     })
 
+    jest.spyOn(config, 'getOrganizationConfig').mockResolvedValue({})
+
     const { root, waitForChanges } = await newSpecPage({
       components: [ClMyAccountLink],
       html: '<cl-my-account-link target="_blank">My Account</cl-my-account-link>'
@@ -86,6 +93,8 @@ describe('cl-my-account-link.spec', () => {
       scope: 'market:code:usa'
     })
 
+    jest.spyOn(config, 'getOrganizationConfig').mockResolvedValue({})
+
     const { root, waitForChanges } = await newSpecPage({
       components: [ClMyAccountLink],
       html: '<cl-my-account-link target="_blank">My Account</cl-my-account-link>'