ui-soxo-bootstrap-core 2.6.62-dev.4 → 2.6.63-dev.1

package/core/lib/components/global-header/global-header.js

@@ -7,7 +7,7 @@ import { motion, useAnimation } from 'framer-motion';
 import { boxVariants } from './animations';
 import { GlobalContext, GlobalProvider } from './../../Store';
 import { Link, useLocation } from 'react-router-dom';
-import { Avatar, Input, Tooltip, Typography } from 'antd';
+import { Avatar, Input, Tooltip, Typography, message } from 'antd';
 import ProgressBar from '../progress-bar/progress-bar'; // Adjust the path as needed
 import { Button } from '../../elements';
 import GenericHeader from '../header/generic-header';
@@ -20,23 +20,53 @@ import LanguageSwitcher from '../language-switcher/language-switcher';
 import { useTranslation } from 'react-i18next';
 import SettingsUtil from '../../../utils/settings.utils';
 import SpotlightSearch from '../spotlight-search/spotlight-search.component';
- import LicenseAlert from '../../../components/license-management/license-alert';
+import LicenseAlert from '../../../components/license-management/license-alert';
 import SupportDesk from '../support-desk/support-desk';
-import { resolveSupportConfig } from '../support-desk/support-desk.utils';
+import { MODES, getSupportUrl, resolveSupportConfig } from '../support-desk/support-desk.utils';
 
 const { Title } = Typography;
-function GlobalHeaderContent({ loading, appSettings, children, isConnected, history, modules = [], sidemenu = [], reload, meta = {}, 
-    licAlert,
-   licenseData,
-  ...props }) {
+function GlobalHeaderContent({
+  loading,
+  appSettings,
+  children,
+  isConnected,
+  history,
+  modules = [],
+  sidemenu = [],
+  reload,
+  meta = {},
+  licAlert,
+  licenseData,
+  ...props
+}) {
   let location = useLocation();
   // let location = {};
   const { isMobile, user = { locations: [] }, kiosk, state, settings } = useContext(GlobalContext);
   const [visible, setVisible] = useState(false);
   const helpDeskSetting = settings?.HELPATR || {};
   // Memoised: the drawer's effects depend on this object, so it must keep its identity across renders.
-  const supportConfig = useMemo(() => resolveSupportConfig(helpDeskSetting, user), [helpDeskSetting, user]);
+  const supportConfig = useMemo(() => resolveSupportConfig(helpDeskSetting), [helpDeskSetting]);
   const [supportOpen, setSupportOpen] = useState(false);
+  const [supportLoading, setSupportLoading] = useState(false);
+  // Link fetched on Help click, handed to the drawer so the form does not request it twice.
+  const [supportUrl, setSupportUrl] = useState('');
+
+  /**
+   * Fetch the first link before opening the drawer, so the button shows a loader and a
+   * failure is reported without opening an empty drawer.
+   */
+  const openSupport = async () => {
+    if (supportLoading) return;
+    setSupportLoading(true);
+    try {
+      setSupportUrl(await getSupportUrl(supportConfig, MODES.RAISE));
+      setSupportOpen(true);
+    } catch (err) {
+      message.error(err?.message || 'Unable to open Support right now.');
+    } finally {
+      setSupportLoading(false);
+    }
+  };
   // Variable to handle toggling of menu
   const [collapsed, setCollapsed] = useState(false);
   // varibale handle branch switcher
@@ -88,42 +118,28 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
   useEffect(() => {}, [state.theme]);
   return (
     <>
-    <div
-      className={`global-header ${process.env.REACT_APP_THEME}  ${isConnected && !kiosk ? 'connected' : ''}`}
-      style={{
-        // background: state.theme.colors.bodyBackground,
-        height: 'auto',
-      }}
-    >
-      {/* <MenuOutlined style={{left:'1%',top:'1%', fontSize:18, position:'absolute', zIndex:999}} onClick={showSidebar}/> */}
-      <div className="layout-content">
-        <div
-          //whileHover="hover"
-          //whileTap="tap"
-          className={`left-bar ${!isConnected && !isMobile ? '' : 'hide'}${!collapsed ? 'open' : 'close'}${kiosk && !isConnected ? 'kioskon' : ''}`}
-          // style={{ background: state.theme.colors.leftSectionBackground }}
-        >
-          {!isMobile && !isConnected ? (
-            <motion.div
-              variants={boxVariants}
-              initial={['entering']}
-              animate={boxControls}
-              className={`sidebar-container ${!collapsed ? 'open' : 'close'}${kiosk ? '' : 'kioskon'}`}
-            >
-              <SideMenu
-                // isOpen={isOpen}
-                collapsed={collapsed}
-                setCollapsed={setCollapsed}
-                loading={loading}
-                appSettings={appSettings}
-                callback={onClose}
-                modules={modules}
-                history={history}
-              />
-            </motion.div>
-          ) : (
-            <Drawer placement="left" onClose={onClose} visible={visible} className="side-drawer-content">
-              <div className={`sidebar-container ${!collapsed ? 'open' : 'close'}`}>
+      <div
+        className={`global-header ${process.env.REACT_APP_THEME}  ${isConnected && !kiosk ? 'connected' : ''}`}
+        style={{
+          // background: state.theme.colors.bodyBackground,
+          height: 'auto',
+        }}
+      >
+        {/* <MenuOutlined style={{left:'1%',top:'1%', fontSize:18, position:'absolute', zIndex:999}} onClick={showSidebar}/> */}
+        <div className="layout-content">
+          <div
+            //whileHover="hover"
+            //whileTap="tap"
+            className={`left-bar ${!isConnected && !isMobile ? '' : 'hide'}${!collapsed ? 'open' : 'close'}${kiosk && !isConnected ? 'kioskon' : ''}`}
+            // style={{ background: state.theme.colors.leftSectionBackground }}
+          >
+            {!isMobile && !isConnected ? (
+              <motion.div
+                variants={boxVariants}
+                initial={['entering']}
+                animate={boxControls}
+                className={`sidebar-container ${!collapsed ? 'open' : 'close'}${kiosk ? '' : 'kioskon'}`}
+              >
                 <SideMenu
                   // isOpen={isOpen}
                   collapsed={collapsed}
@@ -134,120 +150,144 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
                   modules={modules}
                   history={history}
                 />
-              </div>
-            </Drawer>
-          )}
-        </div>
-        {/* Right Section of the Component Loader */}
-        <div
-          className={`right-section ${!collapsed ? 'open' : 'close'} ${kiosk ? 'kioskon' : ''}`}
-          style={{ background: state.theme.colors.bodyBackground }}
-        >
-          {/* For not connected section */}
-          {!isConnected && !kiosk ? (
-            <div
-              className={`page-wrapper ${!collapsed ? 'open' : 'close'}`}
-              // style={{ background: state.theme.colors.headerBg }}
-            >
-              {/*  */}
-              <div className="page-header-name">
-                <ProgressBar isLoading={loading} />
-                <span type onClick={!isMobile ? toggleCollapsed : hideToggle} className="toggle-box toggle-menu">
-                  <MenuOutlined />
-                </span>
-                {/* Back Button */}
-                {location.pathname !== '/' ? (
-                  <span
-                    className="toggle-box"
-                    onClick={() => {
-                      history && history.goBack();
-                    }}
-                  >
-                    <GenericHeader />
+              </motion.div>
+            ) : (
+              <Drawer placement="left" onClose={onClose} visible={visible} className="side-drawer-content">
+                <div className={`sidebar-container ${!collapsed ? 'open' : 'close'}`}>
+                  <SideMenu
+                    // isOpen={isOpen}
+                    collapsed={collapsed}
+                    setCollapsed={setCollapsed}
+                    loading={loading}
+                    appSettings={appSettings}
+                    callback={onClose}
+                    modules={modules}
+                    history={history}
+                  />
+                </div>
+              </Drawer>
+            )}
+          </div>
+          {/* Right Section of the Component Loader */}
+          <div
+            className={`right-section ${!collapsed ? 'open' : 'close'} ${kiosk ? 'kioskon' : ''}`}
+            style={{ background: state.theme.colors.bodyBackground }}
+          >
+            {/* For not connected section */}
+            {!isConnected && !kiosk ? (
+              <div
+                className={`page-wrapper ${!collapsed ? 'open' : 'close'}`}
+                // style={{ background: state.theme.colors.headerBg }}
+              >
+                {/*  */}
+                <div className="page-header-name">
+                  <ProgressBar isLoading={loading} />
+                  <span type onClick={!isMobile ? toggleCollapsed : hideToggle} className="toggle-box toggle-menu">
+                    <MenuOutlined />
                   </span>
-                ) : null}
-                {/* Back Button Ends */}
-                {location.pathname !== '/' ? (
-                  <h4 className="menu-caption header-caption" style={{ color: state.theme.colors.headerColor }}>
-                    {menu.caption}
-                  </h4>
-                ) : null}
-              </div>
-              {/* Page Menu Actions */}
-              {user.role || user.id ? (
-                <div className="page-menu">
-                  {/* Search Input in header start */}
-                  {!isMobile && (
-                    <div>
-                      <Input placeholder="Search (Shift + F)" prefix={<SearchOutlined />} onClick={openSearchModal} readOnly style={{ width: 250 }} />
-                      <SpotlightSearch ref={(elem) => SettingsUtil.registerModal(elem)} props={props} />
-                    </div>
-                  )}
-                  {/* Search Input in header start */}
-                  {/** branchswitcher Option  */}
-                  {/* branch switcher controlled with env for matria and nura */}
-                  {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER ? <div className="branch-switcher">{globalCustomerHeader()}</div> : null}
-                  {/* <div className="branch-switcher">{globalCustomerHeader()}</div> */}
-                  {/* Search Option */}
-                  {/* <ModalSearch /> */}
-                  {/* Search Option Ends */}
-                  {/* Configurator Actions */}
-                  {user.isAdmin ? (
-                    <>
-                      {/* Models */}
-                      {menu && menu.id ? (
-                        <Link to={`/menus/${menu.id}`}>
-                          <Button type="default" size={'small'} icon={<SettingOutlined />}></Button>
-                        </Link>
-                      ) : null}
-                      {/* Models Ends */}
-                    </>
+                  {/* Back Button */}
+                  {location.pathname !== '/' ? (
+                    <span
+                      className="toggle-box"
+                      onClick={() => {
+                        history && history.goBack();
+                      }}
+                    >
+                      <GenericHeader />
+                    </span>
                   ) : null}
-                  {/* Configurator Actions Ends */}
-                  {/* Reload Button */}
-                  <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={'small'}></Button>
-                  {/* Reload Button Ends */}
-                  {/* Help-desk-btn */}
-                  {/* Shown only when the support settings are complete, so the button never does nothing */}
-                  {helpDeskSetting?.showSupportBtn && supportConfig.enabled ? (
-                    <Tooltip title={helpDeskSetting?.toolTipText} overlayClassName="modern-tooltip">
-                      <span>
-                        <Button onClick={() => setSupportOpen(true)} type="default" size="small">
-                          {helpDeskSetting?.buttonText || 'Help'}
-                        </Button>
-                      </span>
-                    </Tooltip>
+                  {/* Back Button Ends */}
+                  {location.pathname !== '/' ? (
+                    <h4 className="menu-caption header-caption" style={{ color: state.theme.colors.headerColor }}>
+                      {menu.caption}
+                    </h4>
                   ) : null}
-                  {/** Switch Languages starts */}
-                  {process.env.REACT_APP_ENABLE_LANGUAGE_SWITCHER ? <LanguageSwitcher /> : null}
-                  {/** Switch Languages ends */}
-                  {/* User Profile */}
-                  <div style={{ padding: '10px' }}>
-                    <ProfileAvatar />
-                    <span style={{ color: state.theme.colors.colorText }}> {user.name} </span>
-                  </div>
-                  {/* User Profile Ends */}
                 </div>
-              ) : null}
-              {/* Page Menu Actions Ends */}
-            </div>
-          ) : null}
-          {/* The children is rendered */}
-          {children}
-          {/* The children is rendered */}
+                {/* Page Menu Actions */}
+                {user.role || user.id ? (
+                  <div className="page-menu">
+                    {/* Search Input in header start */}
+                    {!isMobile && (
+                      <div>
+                        <Input
+                          placeholder="Search (Shift + F)"
+                          prefix={<SearchOutlined />}
+                          onClick={openSearchModal}
+                          readOnly
+                          style={{ width: 250 }}
+                        />
+                        <SpotlightSearch ref={(elem) => SettingsUtil.registerModal(elem)} props={props} />
+                      </div>
+                    )}
+                    {/* Search Input in header start */}
+                    {/** branchswitcher Option  */}
+                    {/* branch switcher controlled with env for matria and nura */}
+                    {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER ? <div className="branch-switcher">{globalCustomerHeader()}</div> : null}
+                    {/* <div className="branch-switcher">{globalCustomerHeader()}</div> */}
+                    {/* Search Option */}
+                    {/* <ModalSearch /> */}
+                    {/* Search Option Ends */}
+                    {/* Configurator Actions */}
+                    {user.isAdmin ? (
+                      <>
+                        {/* Models */}
+                        {menu && menu.id ? (
+                          <Link to={`/menus/${menu.id}`}>
+                            <Button type="default" size={'small'} icon={<SettingOutlined />}></Button>
+                          </Link>
+                        ) : null}
+                        {/* Models Ends */}
+                      </>
+                    ) : null}
+                    {/* Configurator Actions Ends */}
+                    {/* Reload Button */}
+                    <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={'small'}></Button>
+                    {/* Reload Button Ends */}
+                    {/* Help-desk-btn */}
+                    {/* Shown only when the support settings are complete, so the button never does nothing */}
+                    {helpDeskSetting?.showSupportBtn && supportConfig.enabled ? (
+                      <Tooltip title={helpDeskSetting?.toolTipText} overlayClassName="modern-tooltip">
+                        <span>
+                          <Button onClick={openSupport} loading={supportLoading} type="default" size="small">
+                            {helpDeskSetting?.buttonText || 'Help'}
+                          </Button>
+                        </span>
+                      </Tooltip>
+                    ) : null}
+                    {/** Switch Languages starts */}
+                    {process.env.REACT_APP_ENABLE_LANGUAGE_SWITCHER ? <LanguageSwitcher /> : null}
+                    {/** Switch Languages ends */}
+                    {/* User Profile */}
+                    <div style={{ padding: '10px' }}>
+                      <ProfileAvatar />
+                      <span style={{ color: state.theme.colors.colorText }}> {user.name} </span>
+                    </div>
+                    {/* User Profile Ends */}
+                  </div>
+                ) : null}
+                {/* Page Menu Actions Ends */}
+              </div>
+            ) : null}
+            {/* The children is rendered */}
+            {children}
+            {/* The children is rendered */}
+          </div>
+          {/* Right Section of the Component Loader Ends */}
         </div>
-        {/* Right Section of the Component Loader Ends */}
       </div>
-    </div>
-
 
-
-  {supportConfig.enabled && supportOpen ? (
-        <SupportDesk open={supportOpen} onClose={() => setSupportOpen(false)} config={supportConfig} title={helpDeskSetting?.buttonText || 'Support'} />
+      {supportConfig.enabled && supportOpen ? (
+        <SupportDesk
+          open={supportOpen}
+          onClose={() => setSupportOpen(false)}
+          config={supportConfig}
+          initialUrl={supportUrl}
+          title={helpDeskSetting?.buttonText || 'Support'}
+        />
       ) : null}
 
-  {licAlert && licenseData && (
-       <div
+      {licAlert && licenseData && (
+        <div
           style={{
             top: 0,
             marginTop: '3rem',
@@ -258,8 +298,8 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
         >
           <LicenseAlert data={licenseData} />
         </div>
-      )} 
-      </>
+      )}
+    </>
   );
 }
 export default function GlobalHeader(props) {

package/core/lib/components/index.js

@@ -56,6 +56,14 @@ import TableWrapper from './table-wrapper/table-wrapper'
 
 import TableComponent from '../elements/basic/table/table'
 
+import {
+  withColumnFilters,
+  applyColumnFilters,
+  hasColumnFilters,
+  getColumnFilterValue,
+  ColumnFilterDropdown,
+} from '../elements/basic/table/column-filter/column-filter'
+
 import CustomActions from '../models/actions/components/custom-actions/custom-actions'
 
 // Generic Components Ends
@@ -154,6 +162,11 @@ export {
 
   TableWrapper,
   TableComponent,
+  withColumnFilters,
+  applyColumnFilters,
+  hasColumnFilters,
+  getColumnFilterValue,
+  ColumnFilterDropdown,
   CustomActions,
 
   // Generic Components Ends

package/core/lib/components/support-desk/components/{raise-ticket/raise-ticket.js → support-frame/support-frame.js}

@@ -1,21 +1,24 @@
 /**
- * "Raise a Ticket" tab: the Helpdesk form in an iframe.
+ * One Helpdesk page in an iframe ("Raise a Ticket" or "My Tickets").
  *
- * The link is minted when the tab opens, so an idle session never holds an expired token.
+ * The link is requested when the tab opens and on every Reload, so an idle session never
+ * holds an expired token.
  *
- * Frappe's session cookie is SameSite=Lax, so some browsers render the embedded form blank.
- * If the form has not loaded after FORM_SLOW_MS we offer "Open in new tab", which opens a
+ * Frappe's session cookie is SameSite=Lax, so some browsers render the embedded page blank.
+ * If the page has not loaded after FORM_SLOW_MS we offer "Open in new tab", which opens a
  * fresh link as a top level page.
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Alert, Button, Result, Spin, message } from 'antd';
-import { ExportOutlined, ReloadOutlined } from '@ant-design/icons';
-import { FORM_SLOW_MS, buildFormUrl, openInNewTab } from '../../support-desk.utils';
+import { ExportOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons';
+import { FORM_SLOW_MS, getSupportUrl, openInNewTab } from '../../support-desk.utils';
 
-export default function RaiseTicket({ config }) {
-  const [url, setUrl] = useState('');
+export default function SupportFrame({ config, mode, intro, loadingText, errorTitle, initialUrl = '', allowAnother = false }) {
+  const [url, setUrl] = useState(initialUrl);
   // minting -> loading (iframe requested) -> ready (iframe finished) | error
-  const [phase, setPhase] = useState('minting');
+  const [phase, setPhase] = useState(initialUrl ? 'loading' : 'minting');
+  // A link passed in by the caller is used once; Reload always asks for a new one.
+  const initialRef = useRef(initialUrl);
   const [error, setError] = useState('');
   const [slow, setSlow] = useState(false);
 
@@ -30,19 +33,23 @@ export default function RaiseTicket({ config }) {
     setSlow(false);
 
     try {
-      const next = await buildFormUrl(config);
+      const next = await getSupportUrl(config, mode);
       if (requestRef.current !== requestId) return;
       setUrl(next);
       setPhase('loading');
     } catch (err) {
       if (requestRef.current !== requestId) return;
       setUrl('');
-      setError(err?.message || 'Unable to open the Support form right now.');
+      setError(err?.message || 'Unable to open Support right now.');
       setPhase('error');
     }
-  }, [config]);
+  }, [config, mode]);
 
   useEffect(() => {
+    if (initialRef.current) {
+      initialRef.current = '';
+      return undefined;
+    }
     load();
     // Ignore the result of a request that finishes after unmount.
     return () => {
@@ -50,7 +57,7 @@ export default function RaiseTicket({ config }) {
     };
   }, [load]);
 
-  // Warn when the form is slow or blank.
+  // Warn when the page is slow or blank.
   useEffect(() => {
     if (phase !== 'loading') return undefined;
     const timer = setTimeout(() => setSlow(true), FORM_SLOW_MS);
@@ -58,13 +65,13 @@ export default function RaiseTicket({ config }) {
   }, [phase, url]);
 
   const handleOpenInNewTab = () =>
-    openInNewTab(() => buildFormUrl(config)).catch((err) => message.error(err?.message || 'Unable to open the Support form right now.'));
+    openInNewTab(() => getSupportUrl(config, mode)).catch((err) => message.error(err?.message || 'Unable to open Support right now.'));
 
   if (phase === 'error') {
     return (
       <Result
         status="warning"
-        title="We couldn't open the Support form"
+        title={errorTitle}
         subTitle={error}
         extra={
           <Button type="primary" icon={<ReloadOutlined />} onClick={load}>
@@ -78,8 +85,13 @@ export default function RaiseTicket({ config }) {
   return (
     <div className="support-raise">
       <div className="support-raise__bar">
-        <span>Tell us about your issue and our support team will reply as soon as possible.</span>
+        <span>{intro}</span>
         <span>
+          {allowAnother && (
+            <Button type="primary" size="small" icon={<PlusOutlined />} onClick={load} disabled={phase === 'minting'}>
+              Submit another ticket
+            </Button>
+          )}
           <Button type="link" size="small" icon={<ReloadOutlined />} onClick={load} disabled={phase === 'minting'}>
             Reload
           </Button>
@@ -94,7 +106,7 @@ export default function RaiseTicket({ config }) {
           banner
           type="warning"
           showIcon
-          message="The form is taking longer than usual. If it stays blank, open it in a new tab."
+          message="This page is taking longer than usual. If it stays blank, open it in a new tab."
           action={
             <Button size="small" icon={<ReloadOutlined />} onClick={load}>
               Reload
@@ -106,10 +118,21 @@ export default function RaiseTicket({ config }) {
       <div className="support-raise__frame">
         {phase !== 'ready' && (
           <div className="support-raise__loading">
-            <Spin tip="Preparing the Support form…" />
+            <Spin tip={loadingText} />
           </div>
         )}
-        {url && <iframe title="Support" src={url} allow="clipboard-write" className="support-frame" onLoad={() => setPhase('ready')} />}
+        {url && (
+          <iframe
+            title="Support"
+            src={url}
+            allow="clipboard-write"
+            // No allow-top-navigation: the embedded page cannot redirect the Nura Desk tab away.
+            sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads"
+            referrerPolicy="no-referrer"
+            className="support-frame"
+            onLoad={() => setPhase('ready')}
+          />
+        )}
       </div>
     </div>
   );

package/core/lib/components/support-desk/support-desk.js

@@ -1,23 +1,23 @@
 /**
  * Support drawer opened from the global header Help button.
  *
- *   "Raise a Ticket" -> Helpdesk form (components/raise-ticket)
- *   "My Tickets"     -> the user's own tickets (components/my-tickets)
+ *   "Raise a Ticket" -> Helpdesk form
+ *   "My Tickets"     -> the user's own tickets
  *
  * Both tabs stay mounted once opened, so a half written ticket is not lost when the user
- * looks at their list. The ticket list reloads every time its tab is shown.
+ * looks at their list. Each page asks the API for a fresh link on open and on Reload.
  */
 import React, { useState } from 'react';
 import { Drawer, Tabs } from 'antd';
 import { CustomerServiceOutlined, FormOutlined, UnorderedListOutlined } from '@ant-design/icons';
-import MyTickets from './components/my-tickets/my-tickets';
-import RaiseTicket from './components/raise-ticket/raise-ticket';
+import SupportFrame from './components/support-frame/support-frame';
+import { MODES } from './support-desk.utils';
 import './support-desk.scss';
 
 const RAISE = 'raise';
 const MINE = 'mine';
 
-export default function SupportDesk({ open, onClose, config, title = 'Support' }) {
+export default function SupportDesk({ open, onClose, config, initialUrl = '', title = 'Support' }) {
   const [tab, setTab] = useState(RAISE);
 
   return (
@@ -45,7 +45,7 @@ export default function SupportDesk({ open, onClose, config, title = 'Support' }
                 <FormOutlined /> Raise a Ticket
               </span>
             ),
-            children: <RaiseTicket config={config} />,
+            children: <SupportFrame config={config} mode={MODES.RAISE} initialUrl={initialUrl} allowAnother intro="Tell us about your issue and our support team will reply as soon as possible." loadingText="Preparing the Support form…" errorTitle="We couldn't open the Support form" />,
           },
           {
             key: MINE,
@@ -54,7 +54,7 @@ export default function SupportDesk({ open, onClose, config, title = 'Support' }
                 <UnorderedListOutlined /> My Tickets
               </span>
             ),
-            children: <MyTickets config={config} active={tab === MINE} onRaiseTicket={() => setTab(RAISE)} />,
+            children: <SupportFrame config={config} mode={MODES.MINE} intro="Your tickets, with their latest status." loadingText="Loading your tickets…" errorTitle="We couldn't open your tickets" />,
           },
         ]}
       />