@visns-studio/visns-components 6.24.4 → 6.26.0

package/src/components/Navigation.jsx

@@ -33,9 +33,99 @@ import Notification from './Notification';
 import SwitchAccount from './SwitchAccount';
 import BusinessCardOcr from './BusinessCardOcr';
 import { isNavActive, bestMatchingUrl, cleanUrl } from './navActive';
-import { navBadge, badgeFor, badgeAriaLabel } from './navBadges';
+import {
+    navBadge,
+    badgeFor,
+    badgeAriaLabel,
+    DEFAULT_BADGE_TONE,
+} from './navBadges';
+import { drawerRows } from './navDrawer';
 import styles from './styles/Navigation.module.scss';
 
+/**
+ * Where the header layout stops being a bar and becomes a drawer.
+ *
+ * The same 1024px the sidebar layouts have always used (see the media block
+ * in Navigation.module.scss), stated once here because the JS and the
+ * stylesheet now have to agree: below it the nav strip is hidden by CSS and
+ * the drawer is mounted by JS, and a disagreement is a screen with no
+ * navigation on it at all.
+ */
+const DRAWER_BREAKPOINT = '(max-width: 1024px)';
+
+/**
+ * A pointer that cannot hover. iPads in landscape are 1024px wide — above the
+ * drawer breakpoint — so the DESKTOP bar is what a large tablet gets, and its
+ * group dropdowns opened on `:hover` alone. This is the query that tells the
+ * bar to drive them from state instead. See the group `<button>` below.
+ */
+const COARSE_POINTER = '(hover: none)';
+
+/**
+ * The account actions that stay in the bar once the drawer exists, by
+ * settings id. Everything else moves into the drawer.
+ *
+ * THREE, AND WHICH THREE IS THE DECISION: search, the notification bell and
+ * the ticket-queue count. Two of them carry a number that is the reason to
+ * look at the bar at all — a badge inside a closed drawer counts nothing —
+ * and search is the fastest route to any record in the CRM, which is what a
+ * one-handed reader on a phone is almost always after. The rest (messages,
+ * calendar, vault, settings, profile, sign out) are places you go, not
+ * numbers you watch, and they read better as full-width labelled rows than as
+ * unlabelled 34px circles crushed against the edge of a 390px screen.
+ *
+ * An id that is not in this list and not in the drawer would simply vanish,
+ * so the two are derived from ONE array: the bar renders the ids in it, the
+ * drawer renders the rest. A project whose ids differ from these keeps every
+ * action — they all fall through to the drawer.
+ *
+ * It is also what stops a component being mounted twice. `renderers` entries
+ * such as a universal-search palette or an SMS badge register global
+ * keystrokes and open websockets; a bar copy hidden with `display: none`
+ * beside a live drawer copy would run both.
+ */
+const MOBILE_BAR_ACTIONS = ['search', 'notifications', 'ticketQueue'];
+
+/**
+ * A media query as React state.
+ *
+ * Read SYNCHRONOUSLY in the initialiser, not in an effect: the first paint
+ * decides whether the bar draws nine chips or three, and a render at the
+ * wrong width followed by a correction is a visible flash of the desktop bar
+ * on every page load on a phone. The effect only keeps it honest afterwards —
+ * on rotation, on a resized window, on a desktop browser's device toolbar.
+ *
+ * Guarded for a window-less render even though nothing here runs on a server
+ * today; the guard costs one comparison and the alternative is a crash.
+ */
+const useMediaQuery = (query) => {
+    const [matches, setMatches] = useState(() =>
+        typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+            ? window.matchMedia(query).matches
+            : false
+    );
+
+    useEffect(() => {
+        if (
+            typeof window === 'undefined' ||
+            typeof window.matchMedia !== 'function'
+        ) {
+            return undefined;
+        }
+
+        const mql = window.matchMedia(query);
+        const onChange = (event) => setMatches(event.matches);
+
+        // The width may have changed between the initialiser and this effect.
+        setMatches(mql.matches);
+        mql.addEventListener('change', onChange);
+
+        return () => mql.removeEventListener('change', onChange);
+    }, [query]);
+
+    return matches;
+};
+
 // Opt-in icons for the sidebar (simple/cms) layouts: a nav entry names one
 // via its `icon` key, falling back to its `id`. Unknown names render
 // nothing, and the header layout never renders these, so existing nav
@@ -133,10 +223,25 @@ const actionLabel = (n) => {
  *
  * Renders nothing without a badge, so every caller can hand it whatever
  * navBadge() returned without guarding first.
+ *
+ * The tone becomes a modifier class and only when it is not the default: `ok`
+ * IS the base rule, so a `.nav-badge-ok` would be an empty block that every
+ * pill in the bar carried for nothing. navBadges.js has already reduced an
+ * unrecognised tone to the default, so the lookup below cannot miss.
  */
 const BadgePill = ({ badge }) =>
     badge ? (
-        <span className={styles['nav-badge']} aria-hidden="true">
+        <span
+            className={[
+                styles['nav-badge'],
+                badge.tone && badge.tone !== DEFAULT_BADGE_TONE
+                    ? styles[`nav-badge-${badge.tone}`]
+                    : '',
+            ]
+                .filter(Boolean)
+                .join(' ')}
+            aria-hidden="true"
+        >
             {badge.display}
         </span>
     ) : null;
@@ -325,9 +430,11 @@ function Navigation({
     renderers = {},
     /*
      * Live counts for navigation items: `{ [navId]: number }`, or the object
-     * form `{ [navId]: { count, label } }` when the accessible name needs a
-     * noun other than "open". See navBadges.js, which owns every rule about
-     * what renders and what does not.
+     * form `{ [navId]: { count, label, tone } }` when the accessible name
+     * needs a noun other than "open", or the number needs a severity —
+     * `tone: 'ok' | 'warn' | 'danger'`, default 'ok', which is the green pill
+     * everything wore before tones existed. See navBadges.js, which owns every
+     * rule about what renders and what does not.
      *
      * Empty by default and additive: an id with no entry, a zero, or a value
      * that will not parse draws nothing at all, so a consumer that publishes
@@ -349,6 +456,13 @@ function Navigation({
     const currentPage = location.pathname.substr(1) || 'dashboard';
     const [isOpen, setOpen] = useState(false);
 
+    // Below 1024px BOTH layouts are a drawer: the sidebar layouts slide their
+    // rail in, and the header layout — which has no rail — mounts one. Read as
+    // state rather than left to CSS because the two surfaces must not both
+    // render the same account action (see MOBILE_BAR_ACTIONS).
+    const isNarrow = useMediaQuery(DRAWER_BREAKPOINT);
+    const isCoarsePointer = useMediaQuery(COARSE_POINTER);
+
     // The mobile drawer is a full-viewport fixed overlay; without a scroll
     // lock the page behind it keeps scrolling under the user's thumb.
     useEffect(() => {
@@ -361,6 +475,32 @@ function Navigation({
         }
         return undefined;
     }, [isOpen]);
+
+    // Widening past the breakpoint takes the drawer away — including, in the
+    // header layout, the element it was rendered into. Left open, the state
+    // would be true with nothing on screen holding it, and the scroll lock
+    // above would keep the page frozen with no way to release it.
+    useEffect(() => {
+        if (!isNarrow) {
+            setOpen(false);
+        }
+    }, [isNarrow]);
+
+    /*
+     * A page change closes the drawer, whoever asked for it.
+     *
+     * Every link IN the drawer already closes it on the way out, and that is
+     * not enough: the account actions at the foot of it are mounted
+     * components — an SMS inbox, a credential palette — that open a panel of
+     * their own and then navigate from inside it, with nothing passing
+     * through those handlers. The drawer stayed sitting over the page they
+     * had just taken you to. Keyed on the PATH only, so a screen that
+     * rewrites its own query string cannot slam the menu shut mid-scroll.
+     */
+    useEffect(() => {
+        setOpen(false);
+    }, [currentPage]);
+
     const [isScrolled, setIsScrolled] = useState(false);
     const [navData, setNavData] = useState(navConfig);
     const [showBusinessCardOcr, setShowBusinessCardOcr] = useState(false);
@@ -390,6 +530,18 @@ function Navigation({
         );
     };
 
+    /**
+     * One account action as a header chip.
+     *
+     * Every branch's `<li>` carries `data-setting={n.id}`. Nothing in this
+     * library styles off it — WHICH chips survive the drawer breakpoint is a
+     * JS decision (MOBILE_BAR_ACTIONS), because a chip hidden in CSS is still
+     * a mounted component holding a websocket and a global keystroke. It is
+     * here so a consuming app can reach a chip it mounted by name from its own
+     * stylesheet, and so the cluster is legible in the inspector: nine
+     * identical `<li><a>` with an icon inside told you nothing about which was
+     * which.
+     */
     const renderSetting = (n) => {
         const iconComponents = SETTING_ICONS;
 
@@ -403,7 +555,7 @@ function Navigation({
         // A consumer-supplied renderer wins over the built-in chain.
         if (typeof renderers[n.id] === 'function') {
             return (
-                <li>
+                <li data-setting={n.id}>
                     {renderers[n.id]({
                         setting: n,
                         userProfile,
@@ -415,13 +567,13 @@ function Navigation({
 
         if (n.id === 'notifications') {
             return (
-                <li>
+                <li data-setting={n.id}>
                     <Notification setSystemAuth={setSystemAuth} />
                 </li>
             );
         } else if (n.id === 'businessCardOcr') {
             return (
-                <li>
+                <li data-setting={n.id}>
                     <button
                         type="button"
                         data-tooltip-id="system-tooltip"
@@ -437,7 +589,7 @@ function Navigation({
             );
         } else if (n.id === 'switchAccount') {
             return (
-                <li>
+                <li data-setting={n.id}>
                     <SwitchAccount
                         setSystemAuth={setSystemAuth}
                         setting={n}
@@ -449,7 +601,7 @@ function Navigation({
             const IconComponent = iconComponents[n.icon];
             const label = actionLabel(n);
             return (
-                <li>
+                <li data-setting={n.id}>
                     <button
                         type="button"
                         data-tooltip-id="system-tooltip"
@@ -475,7 +627,7 @@ function Navigation({
             const settingBadge = badgeFor(badges, n.id);
 
             return (
-                <li>
+                <li data-setting={n.id}>
                     <Link
                         to={n.url}
                         data-tooltip-id="system-tooltip"
@@ -602,9 +754,59 @@ function Navigation({
         );
     };
 
-    const [, setActiveDropdown] = useState(null); // We only need the setter
+    /**
+     * Which group's dropdown a TOUCH reader has opened.
+     *
+     * Null on a mouse, always: hover and `:focus-within` open the desktop menu
+     * in CSS and this state is not consulted (see the `aria-expanded` note on
+     * the group button). It exists because a coarse pointer has neither — the
+     * old code even blurred the button on click, so on a touch screen the menu
+     * opened for exactly as long as the tap lasted.
+     *
+     * This replaces an `activeDropdown` state whose value was discarded at the
+     * point of declaration (`const [, setActiveDropdown]`): it re-rendered the
+     * whole bar on every hover to change nothing, because the only thing it
+     * did was toggle the scroll container's overflow, which is a DOM poke.
+     * That poke is `liftNavClipping` now, and it is called from the tap path
+     * as well — the dropdown was clipped by the strip's `overflow-x: auto`
+     * everywhere the pointer had not been.
+     */
+    const [openGroup, setOpenGroup] = useState(null);
     const navWrapRef = useRef(null);
 
+    /**
+     * Let an open dropdown out of the horizontally-scrolling nav strip.
+     *
+     * The strip is `overflow-x: auto`, and a scroll container clips on BOTH
+     * axes however `visible` the other one is written — so a menu hanging
+     * below the bar is cut off at the bar's own bottom edge.
+     */
+    const liftNavClipping = (lift) => {
+        if (navWrapRef.current) {
+            navWrapRef.current.style.overflowX = lift ? 'visible' : 'auto';
+        }
+    };
+
+    // A tap anywhere else closes the group a touch reader opened. Without it
+    // the only way to dismiss the menu is to tap the heading again, which is
+    // not how any other menu on the device behaves. Mouse users never get
+    // here: `openGroup` is only ever set on a coarse pointer.
+    useEffect(() => {
+        if (openGroup === null) {
+            return undefined;
+        }
+
+        const onDown = (event) => {
+            if (!navWrapRef.current?.contains(event.target)) {
+                setOpenGroup(null);
+                liftNavClipping(false);
+            }
+        };
+
+        document.addEventListener('pointerdown', onDown);
+        return () => document.removeEventListener('pointerdown', onDown);
+    }, [openGroup]);
+
     const renderNav = (n) => {
         let navItemClasses;
         const NavItemIcon =
@@ -628,21 +830,13 @@ function Navigation({
 
         const handleMouseEnter = () => {
             if (hasChildren) {
-                setActiveDropdown(n.id);
-                // Temporarily disable overflow on the navwrap when dropdown is active
-                if (navWrapRef.current) {
-                    navWrapRef.current.style.overflowX = 'visible';
-                }
+                liftNavClipping(true);
             }
         };
 
         const handleMouseLeave = () => {
             if (hasChildren) {
-                setActiveDropdown(null);
-                // Restore overflow when dropdown is no longer active
-                if (navWrapRef.current) {
-                    navWrapRef.current.style.overflowX = 'auto';
-                }
+                liftNavClipping(false);
             }
         };
 
@@ -679,7 +873,15 @@ function Navigation({
                                                 ? styles.active
                                                 : ''
                                         }
-                                        onClick={() => setOpen(false)}
+                                        /* Closes both menus this row can sit
+                                           inside: the drawer, and — on a
+                                           touch screen — the dropdown the tap
+                                           on the heading opened. */
+                                        onClick={() => {
+                                            setOpen(false);
+                                            setOpenGroup(null);
+                                            liftNavClipping(false);
+                                        }}
                                     >
                                         {child.label}
                                         <BadgePill badge={childBadge} />
@@ -735,25 +937,49 @@ function Navigation({
                      * screen. A button takes focus, and the stylesheet opens
                      * the dropdown on :focus-within as well as :hover.
                      *
-                     * No onClick and no aria-expanded: the open state lives
-                     * in CSS, not in React (deliberately — see the discarded
-                     * `activeDropdown` setter above, which exists only to
-                     * toggle the scroll container's overflow), and claiming a
-                     * state this component does not hold would be a lie to
+                     * ON A FINE POINTER the open state still lives in CSS, not
+                     * in React, and `aria-expanded` is therefore absent: the
+                     * menu opens on hover, this component is never told, and
+                     * publishing a state it does not hold would be a lie to
                      * the screen reader rather than a help.
+                     *
+                     * ON A COARSE POINTER there is no hover to open it with,
+                     * so the tap does — and then React DOES hold the state,
+                     * `aria-expanded` is real, and the stylesheet opens the
+                     * menu off that attribute. Same markup, two mechanisms,
+                     * each honest about the input it is serving.
                      */
                     <button
                         type="button"
                         aria-haspopup="true"
+                        aria-expanded={
+                            isCoarsePointer ? openGroup === n.id : undefined
+                        }
                         aria-label={ariaLabel}
-                        /* The menu opens on :hover OR :focus-within. A MOUSE
-                           click leaves the button focused, so the menu it
-                           opened stayed pinned while hovering the next group
-                           opened that one too — two dropdowns at once. Blur
-                           on pointer clicks only: e.detail is the click
-                           count, 0 for keyboard "clicks", so Tab + Enter
-                           users keep the focus that holds their menu open. */
+                        /* Fine pointer: the menu opens on :hover OR
+                           :focus-within. A MOUSE click leaves the button
+                           focused, so the menu it opened stayed pinned while
+                           hovering the next group opened that one too — two
+                           dropdowns at once. Blur on pointer clicks only:
+                           e.detail is the click count, 0 for keyboard
+                           "clicks", so Tab + Enter users keep the focus that
+                           holds their menu open.
+
+                           Coarse pointer: NEVER blur — the blur is precisely
+                           what made the menu impossible to open by tapping,
+                           since the tap that opened it removed the focus
+                           holding it open in the same gesture. Toggle instead,
+                           and lift the strip's clipping the way a hover does,
+                           or the menu opens inside a scroll container that
+                           cuts it off at the bar's bottom edge. */
                         onClick={(e) => {
+                            if (isCoarsePointer) {
+                                const next = openGroup === n.id ? null : n.id;
+                                setOpenGroup(next);
+                                liftNavClipping(next !== null);
+                                return;
+                            }
+
                             if (e.detail > 0) {
                                 e.currentTarget.blur();
                             }
@@ -1071,6 +1297,169 @@ function Navigation({
         </div>
     );
 
+    /* ------------------------------------------------------------------ *
+     * The header layout's drawer (≤1024px)
+     * ------------------------------------------------------------------ *
+     * Everything below this comment is for the `full` layout — the one-line
+     * bar — and exists because it had NO mobile story at all: the hamburger,
+     * the sliding panel, the backdrop and the body scroll lock were all
+     * written for the sidebar layouts, and the bar's answer to a 390px screen
+     * was a horizontally-scrolling strip with the scrollbar hidden. Nine
+     * account chips at `width: max-content` then set the bar's minimum width
+     * at roughly 530px, which is wider than the phone: the navigation column
+     * collapsed to nothing and the whole page panned sideways.
+     *
+     * So the drawer machinery is REUSED rather than rebuilt — the same
+     * `aside--cms` panel, the same `aside--cms--open` transform, the same
+     * `drawer-backdrop`, the same `rail-actions` footer and the same
+     * `isOpen` state and scroll-lock effect that were already in scope. What
+     * is new is the flat row list (groups have no dropdown to open here; see
+     * navDrawer.js) and the anchor: this drawer hangs off the bottom of the
+     * header bar rather than the 50px content header, which is what
+     * `--nav-header-height` in the stylesheet measures.
+     */
+    const headerLayout = layout !== 'simple' && layout !== 'cms';
+    const hasDrawer = headerLayout && isNarrow;
+
+    /*
+     * The account actions, split in two.
+     *
+     * Above the breakpoint there is no split: `barActions` is every action
+     * and `drawerActions` is empty, so the desktop bar renders exactly what
+     * it always rendered. Below it, an action appears in ONE of the two
+     * surfaces and never both — see MOBILE_BAR_ACTIONS for why that matters
+     * more than it looks like it should.
+     */
+    const visibleSettings = navData.settings.filter(
+        (setting) => setting.hidden !== true && setting.permission === true
+    );
+    const barActions = hasDrawer
+        ? visibleSettings.filter((setting) =>
+              MOBILE_BAR_ACTIONS.includes(setting.id)
+          )
+        : visibleSettings;
+    const drawerActions = hasDrawer
+        ? visibleSettings.filter(
+              (setting) => !MOBILE_BAR_ACTIONS.includes(setting.id)
+          )
+        : [];
+
+    const headerDrawer = !hasDrawer ? null : (
+        <>
+            <aside
+                id="nav-drawer"
+                aria-label="Main menu"
+                className={[
+                    styles['aside--cms'],
+                    styles['aside--drawer'],
+                    isOpen ? styles['aside--cms--open'] : '',
+                ]
+                    .filter(Boolean)
+                    .join(' ')}
+            >
+                <nav className={styles['drawer-nav']}>
+                    <ul>
+                        {drawerRows(navData.navigations, currentPage).map(
+                            (row, rowKey) => {
+                                /*
+                                 * `badgeFor`, not `navBadge`: the group's own
+                                 * count, never a roll-up of its children's.
+                                 * The bar rolls a group up because its
+                                 * children are hidden inside a closed menu;
+                                 * here they are rows of their own, two
+                                 * fingers below, each wearing its own pill —
+                                 * so a roll-up would show the same work
+                                 * twice and the totals would not add up.
+                                 */
+                                const rowBadge = badgeFor(badges, row.id);
+
+                                return (
+                                    <li
+                                        key={`drawer-row-${rowKey}`}
+                                        className={
+                                            row.depth > 0
+                                                ? styles['drawer-child']
+                                                : undefined
+                                        }
+                                    >
+                                        {row.kind === 'heading' ? (
+                                            /* Inert on purpose. A group
+                                               parent has no page, so there is
+                                               nothing to navigate to and
+                                               nothing to disclose — the rows
+                                               it names are already open
+                                               underneath it. */
+                                            <span
+                                                className={
+                                                    styles['drawer-heading']
+                                                }
+                                            >
+                                                {row.label}
+                                            </span>
+                                        ) : (
+                                            <Link
+                                                to={row.url}
+                                                target={
+                                                    row.target
+                                                        ? row.target
+                                                        : '_self'
+                                                }
+                                                className={
+                                                    row.active
+                                                        ? styles.active
+                                                        : ''
+                                                }
+                                                aria-label={badgeAriaLabel(
+                                                    row.label,
+                                                    rowBadge
+                                                )}
+                                                onClick={() => setOpen(false)}
+                                            >
+                                                <span>{row.label}</span>
+                                                <BadgePill badge={rowBadge} />
+                                            </Link>
+                                        )}
+                                    </li>
+                                );
+                            }
+                        )}
+                    </ul>
+                </nav>
+
+                {/* The same footer the sidebar rail uses, carrying the
+                    actions the bar gave up — `renderRailSetting` already
+                    knows how to draw every one of them as a labelled row,
+                    mounted components included, and already closes the
+                    drawer when one is tapped. `data-nav-actions` is what
+                    tells those components' own stylesheets to open their
+                    panels away from a header chip they are no longer in. */}
+                <div
+                    className={styles['rail-actions']}
+                    data-nav-actions="sidebar"
+                >
+                    <ul>
+                        {drawerActions.map((setting, settingKey) => (
+                            <React.Fragment
+                                key={`drawer-setting-${settingKey}`}
+                            >
+                                {renderRailSetting(setting)}
+                            </React.Fragment>
+                        ))}
+                    </ul>
+                </div>
+            </aside>
+
+            {isOpen ? (
+                <button
+                    type="button"
+                    className={styles['drawer-backdrop']}
+                    aria-label="Close menu"
+                    onClick={() => setOpen(false)}
+                />
+            ) : null}
+        </>
+    );
+
     return layout === 'simple' || layout === 'cms' ? (
         <div className={styles.cwrap}>
             <aside
@@ -1199,6 +1588,35 @@ function Navigation({
         </div>
     ) : (
         <div className={styles.hwrap}>
+            {/* First in the source, and therefore first in the tab order and
+                first in the bar's grid — the thumb reaches the left edge of a
+                phone and the menu is the thing it is reaching for. Rendered
+                only below the breakpoint: above it the strip beside the logo
+                IS the menu, and a hamburger next to a visible menu is two
+                doors into one room. */}
+            {hasDrawer ? (
+                <button
+                    type="button"
+                    className={[
+                        styles.mobmenu,
+                        styles.hmenu,
+                        isOpen ? styles['mobmenu--open'] : '',
+                    ]
+                        .filter(Boolean)
+                        .join(' ')}
+                    aria-label={isOpen ? 'Close menu' : 'Open menu'}
+                    aria-expanded={isOpen}
+                    aria-controls="nav-drawer"
+                    onClick={() => setOpen(!isOpen)}
+                >
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+            ) : null}
             <div className={styles.logo}>
                 <Link to="/">
                     <img src={logo} alt="System Logo" />
@@ -1217,25 +1635,31 @@ function Navigation({
                     )}
                 </ul>
             </div>
-            <div
-                className={`${
-                    themeType === 'alternate'
-                        ? styles['hactions-alternate']
-                        : styles.hactions
-                } ${debugIcons ? styles['debug-icons'] : ''}`}
-                ref={actionItemsRef}
-            >
-                <ul>
-                    {navData.settings.map((setting, settingKey) =>
-                        setting.hidden !== true &&
-                        setting.permission === true ? (
+            {/* The cluster draws a pill-shaped tray behind its chips, so an
+                empty one is a small blank capsule floating in the bar. It can
+                only happen below the breakpoint, in a project whose settings
+                ids do not overlap MOBILE_BAR_ACTIONS at all — every action
+                then lives in the drawer, and the tray has nothing to hold. */}
+            {barActions.length > 0 ? (
+                <div
+                    className={`${
+                        themeType === 'alternate'
+                            ? styles['hactions-alternate']
+                            : styles.hactions
+                    } ${debugIcons ? styles['debug-icons'] : ''}`}
+                    ref={actionItemsRef}
+                >
+                    <ul>
+                        {barActions.map((setting, settingKey) => (
                             <React.Fragment key={`setting-${settingKey}`}>
                                 {renderSetting(setting)}
                             </React.Fragment>
-                        ) : null
-                    )}
-                </ul>
-            </div>
+                        ))}
+                    </ul>
+                </div>
+            ) : null}
+
+            {headerDrawer}
 
             <BusinessCardOcr
                 isOpen={showBusinessCardOcr}