javascript – How to build a scalable Architecture that must support multiple brands, flows and markets?

Looking to get some opinions/suggestions on how to manage or improve an application that supports multiple brands, markets and flows.

In this example I am using a form. There is one base form that can potentially be different for each flow & market. A telephone number may be required for one flow but not another or it might require a different format for each market.

A suggested approach using a slot technique:

const ExampleTopLevelComponent = ({ customSlots = {}, ...props }) => {
  const newSlots = {
    ...exampleSlot1(), // Field
    ...exampleSlot2(), // Field
    ...exampleSlot3(), // Field
    ...exampleSlot4(), // Field
  };

  const combinedSlots = { ...customSlots, ...newSlots };

  switch (condition) {
    case "BRAND":
      return <ExampleBrandSecondLevel customSlots={combinedSlots} {...props} />;
    default:
      return combinedSlots;
  }
};

const ExampleBrandSecondLevel = ({ customSlots, ...props }) => {
  const newSlots = {};
  const combinedSlots = { ...customSlots, ...newSlots };

  switch (flow) {
    case "FLOW_1":
      return <ComponentFlow1 customSlots={combinedSlots} {...props} />;
    ...
    ...
    default:
      return combinedSlots;
  }
};

const ComponentFlow1 = ({ customSlots = {}, ...props }) => {
  const newSlots = {};
  const combinedSlots = { ...customSlots, ...newSlots };

  switch (market) {
    case "MARKET_1":
      return <ExampleMarket1 customSlots={combinedSlots} {...props} />;
    ...
    ...
    default:
      return combinedSlots;
  }
};

const ExampleMarket1 = ({ customSlots = {} }) => {
  const newSlots = {
    ...exampleSlot1({ readOnly: true }), // Overwrite top level
    ...newSlot1(),
  };

  const combinedSlots = { ...customSlots, ...newSlots };

  return combinedSlots;
};

Final object for render would be the following when flow = ‘FLOW_1’ and market = ‘MARKET_1’.

const slots = {
  ...exampleSlot1({ readOnly: true }),
  ...exampleSlot2(),
  ...exampleSlot3(),
  ...exampleSlot4(),
  ...newSlot1(),
};

This does work, however it is causing a lot of duplicate code as I need to provide the same scaffolding for all components across the application. When the apps grows the overhead will be huge and difficult to manage.

I have thought about a schema approach but that might be difficult to read when there are 15+ slots with different customisations such as labels, onClicks etc. etc.