useDeIdModal

This hook allows you to programmatically control the visibility of the de[id] modal.

The de[id] modal has a few states that can be toggled to.

DeIdModalType

enum DeIdModalType {
  ONBOARD = "ONBOARD",
  EDIT = "EDIT",
  CLOSE = "CLOSE",
}

DeIdModalTabs

enum DeIdModalTabs {
  SOCIALS = 0,
  WALLETS = 1,
}
 

ONBOARD

This state is used to show the de[id] modal in the onboarding flow.

EDIT

This state is used to show the de[id] modal in the edit flow.

CLOSE

This state is used to close the de[id] modal.

Usage

import { useDeIdModal } from '@commercetools-frontend/application-shell';
 
const { modalState, modalDispatch } = useDeIdModal();

Return value

{
  modalState: DeIdModalState;
  modalDispatch: Dispatch<DeIdModalAction>;
}

modalState

DeIdModalState

interface DeIdModalState {
  modalType: DeIdModalType;
  modalTab?: DeIdModalTabs; // only for EDIT
}

This state is used to show the current state of the de[id] modal. Note that modalTab is only used for the EDIT state since that state contains tabs.

modalDispatch

Dispatch<DeIdModalAction>

interface DeIdModalAction {
  type: DeIdModalType;
  payload?: {
    modalTab?: DeIdModalTabs; // only for EDIT
  };
}

This dispatch is used to change the state of the de[id] modal. Note that modalTab is only used for the EDIT state since that state contains tabs.

Example

This example shows how to open the de[id] modal in the edit flow, tab number 1.

modalDispatch({ type: DeIdModalType.EDIT, payload: { modalTab: 1 } });