feat: Add new hooks useCommerceLayer

packages/react-components/specs/hooks/useCommerceLayer.spec.tsx

@@ -0,0 +1,66 @@
+import CommerceLayer from '#components/auth/CommerceLayer'
+import { render, renderHook, waitFor, screen } from '@testing-library/react'
+import { useEffect, useState } from 'react'
+import useCommerceLayer from 'src/hooks/useCommerceLayer'
+import getToken from '../utils/getToken'
+import { type SkusContext } from 'specs/utils/context'
+
+function HookComponent(): JSX.Element {
+  const ctx = useCommerceLayer()
+  const [sku, setSku] = useState<string | undefined>()
+  useEffect(() => {
+    if (ctx.sdkClient != null && sku == null) {
+      void ctx
+        .sdkClient()
+        ?.skus.list({ filters: { code_eq: 'BABYONBU000000E63E7412MX' } })
+        .then((res) => {
+          if (res.first() != null) {
+            setSku(res.first()?.code)
+          }
+        })
+    }
+    return () => {
+      setSku(undefined)
+    }
+  }, [])
+  if (sku != null) {
+    return <>{sku}</>
+  }
+  return <>Hook component</>
+}
+
+describe('useCommerceLayer hook', () => {
+  let token: string | undefined
+  let domain: string | undefined
+  beforeAll(async () => {
+    const { accessToken, endpoint } = await getToken()
+    if (accessToken !== undefined) {
+      token = accessToken
+      domain = endpoint
+    }
+  })
+  beforeEach<SkusContext>(async (ctx) => {
+    if (token != null && domain != null) {
+      ctx.accessToken = token
+      ctx.endpoint = domain
+      ctx.sku = 'BABYONBU000000E63E7412MX'
+    }
+  })
+  it('useCommerceLayer outside of CommerceLayer', () => {
+    expect(() => renderHook(() => useCommerceLayer())).toThrow(
+      'Cannot use `useCommerceLayer` outside of <CommerceLayer/>'
+    )
+  })
+  it<SkusContext>('get sku by sdk client', async (ctx) => {
+    render(
+      <CommerceLayer accessToken={ctx.accessToken} endpoint={ctx.endpoint}>
+        <HookComponent />
+      </CommerceLayer>
+    )
+    await waitFor(async () => await screen.findByText(ctx.sku), {
+      timeout: 5000
+    })
+    const sku = screen.getByText(ctx.sku)
+    expect(sku.textContent).toEqual(ctx.sku)
+  })
+})

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

@@ -0,0 +1,29 @@
+import CommerceLayerContext from '#context/CommerceLayerContext'
+import getSdk from '#utils/getSdk'
+import { type CommerceLayerClient } from '@commercelayer/sdk'
+import { useContext } from 'react'
+
+interface ReturnProps {
+  accessToken?: string
+  sdkClient: () => CommerceLayerClient | undefined
+}
+
+export function useCommerceLayer(): ReturnProps {
+  const ctx = useContext(CommerceLayerContext)
+  if ('accessToken' in ctx) {
+    return {
+      accessToken: ctx.accessToken,
+      sdkClient: () => {
+        if (ctx?.accessToken != null && ctx?.endpoint != null)
+          return getSdk({
+            accessToken: ctx.accessToken,
+            endpoint: ctx.endpoint
+          })
+        return undefined
+      }
+    }
+  }
+  throw new Error('Cannot use `useCommerceLayer` outside of <CommerceLayer/>')
+}
+
+export default useCommerceLayer