From 5d413923ced85c35628a564230a2faf4e74e89a1 Mon Sep 17 00:00:00 2001 From: Alessandro Casazza Date: Mon, 2 Oct 2023 17:03:33 +0200 Subject: [PATCH] feat: Add `customDomain` to MFE components to set easily your forked app. --- .../src/components/customers/MyAccountLink.tsx | 9 +++++++-- .../components/customers/MyIdentityLink.tsx | 18 ++++++++++++++++-- .../src/components/orders/CartLink.tsx | 12 +++++++++--- .../src/components/orders/HostedCart.tsx | 8 +++++++- .../src/hooks/useOrderContainer.ts | 2 +- .../src/utils/getApplicationLink.ts | 10 +++++++--- 6 files changed, 47 insertions(+), 12 deletions(-) diff --git a/packages/react-components/src/components/customers/MyAccountLink.tsx b/packages/react-components/src/components/customers/MyAccountLink.tsx index 5e00983a..febd2db9 100644 --- a/packages/react-components/src/components/customers/MyAccountLink.tsx +++ b/packages/react-components/src/components/customers/MyAccountLink.tsx @@ -26,10 +26,14 @@ interface Props extends Omit { * 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, diff --git a/packages/react-components/src/components/customers/MyIdentityLink.tsx b/packages/react-components/src/components/customers/MyIdentityLink.tsx index 389837b0..048263ee 100644 --- a/packages/react-components/src/components/customers/MyIdentityLink.tsx +++ b/packages/react-components/src/components/customers/MyIdentityLink.tsx @@ -37,10 +37,23 @@ interface Props extends Omit { * 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, diff --git a/packages/react-components/src/components/orders/CartLink.tsx b/packages/react-components/src/components/orders/CartLink.tsx index cf028991..bc21e251 100644 --- a/packages/react-components/src/components/orders/CartLink.tsx +++ b/packages/react-components/src/components/orders/CartLink.tsx @@ -38,10 +38,14 @@ interface Props extends Omit { * 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 { diff --git a/packages/react-components/src/components/orders/HostedCart.tsx b/packages/react-components/src/components/orders/HostedCart.tsx index 7b150c3b..81c845bb 100644 --- a/packages/react-components/src/components/orders/HostedCart.tsx +++ b/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) { diff --git a/packages/react-components/src/hooks/useOrderContainer.ts b/packages/react-components/src/hooks/useOrderContainer.ts index a9376c38..abca5b01 100644 --- a/packages/react-components/src/hooks/useOrderContainer.ts +++ b/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 addToCart: (params: TAddToCartParams) => ReturnType diff --git a/packages/react-components/src/utils/getApplicationLink.ts b/packages/react-components/src/utils/getApplicationLink.ts index cc5379c5..cb5767cd 100644 --- a/packages/react-components/src/utils/getApplicationLink.ts +++ b/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}` }