Create a new CMS component

1. Begin by creating a new component in the appropriate feature folder.

   shop/client/features/account/components/invoices/InvoicesComponent.tsx

   export function InvoicesComponent() {
       return <div></div>;
   }

2. In the cms folder, create a new CMS-specific component that references the component created in step 1.

   shop/client/features/cms/components/invoice/CmsInvoicesComponent.tsx

   import { InvoicesComponent } from 'shop/client/features/account/components/invoices/InvoicesComponent';
   
   function CmsInvoicesComponent() {
       return <InvoicesComponent />;
   }
   
   export default CmsInvoicesComponent;

3. Add an index.ts file next to the CMS component and export the component wrapped in a Loadable to enable lazy loading.

   shop/client/features/cms/components/invoice/index.ts

   import Loadable from 'shop/client/components/support/loadable/Loadable';
   
   export default Loadable({ factory: () => import('shop/client/features/cms/components/invoice/CmsInvoicesComponent') });

4. Update the CMSComponentTypeCode constant by adding a new entry that corresponds to the typeCode provided by the backend for your component.

   shop/client/constants/cms.ts

   export const enum CMSComponentTypeCode {
       //...
       INVOICES = 'CmsInvoicesComponent'
   }

5. Register the component in the component registry.

   shop/client/features/cms/components/support/registry/CMSComponentRegistry.ts

   import InvoicesComponent from 'shop/client/features/cms/components/invoice';
   
   //...
   
   CMSComponentRegistry.register(CMSComponentTypeCode.INVOICES, InvoicesComponent);

6. Test your component by mocking a CMS component