All files / src/hooks/common useBannerPush.ts

100% Statements 10/10
100% Branches 6/6
100% Functions 2/2
100% Lines 10/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32              13x 117x 117x   117x                   13x 10x 10x 10x     10x   10x    
import { MASQUERADE_SNACKBAR_HEIGHT } from "@components/Merchants/Masquerade/constants";
import useMasqueradeReducer from "@hooks/Reducers/useMasqueradeReducer";
import { useGetMerchantById } from "@hooks/enterprise-api/account/useGetMerchants";
import { checkPortals } from "@utils/routing";
import { useBannerOffset } from "./useBannerOffset";
 
/** What decides `position: sticky` on the masquerade bar — see `MasqueradeSnackbar`. */
export const useIsStickyMasqueradeBar = () => {
  const { isMerchantPortal } = checkPortals();
  const { data } = useGetMerchantById();
 
  return !data?.isOnboardingCompleted && isMerchantPortal;
};
 
/**
 * `bannerOffset` is what the banner strip takes off the viewport; `bannerPush`
 * is only the part a page has to reserve below itself. A sticky masquerade bar
 * sits in flow and pushes the page on its own, so drop that bar's height — but
 * not the whole offset, since a maintenance banner is fixed and still needs
 * reserving alongside it.
 */
export const useBannerPush = () => {
  const bannerOffset = useBannerOffset();
  const { isMasqueradeMode } = useMasqueradeReducer();
  const isStickyMasqueradeBar = useIsStickyMasqueradeBar();
 
  const stickyHeight =
    isMasqueradeMode && isStickyMasqueradeBar ? MASQUERADE_SNACKBAR_HEIGHT : 0;
 
  return { bannerOffset, bannerPush: bannerOffset - stickyHeight };
};