add apple help modal to configure client page

Author: filipslezaklab

webnext/src/pages/ClientDownload/ClientDownloadPage.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import { useMemo, useState } from 'react';
 import { m } from '../../paraglide/messages';
+import { AppleHelpModal } from '../../shared/components/AppleHelpModal/AppleHelpModal';
 import { Page } from '../../shared/components/Page/Page';
 import { PageNavigation } from '../../shared/components/PageNavigation/PageNavigation';
 import { EnrollmentStep } from '../../shared/components/Step/Step';
@@ -20,7 +21,6 @@ import { isPresent } from '../../shared/defguard-ui/utils/isPresent';
 import { getClientArtifactsQueryOptions } from '../../shared/query/queryOptions';
 import { openVirtualLink } from '../../shared/utils/openVirtualLink';
 import androidIcon from './assets/android.png';
-import apple_video_src from './assets/apple_hardware_help.mp4';
 import iosIcon from './assets/ios.png';
 import laptopIcon from './assets/laptop.png';
 import desktopIcon from './assets/pc-tower.png';
@@ -162,6 +162,12 @@ export const ClientDownloadPage = () => {
           icon={iosIcon}
         />
       </div>
+      <AppleHelpModal
+        isOpen={appleHelpModalOpen}
+        onClose={() => {
+          setAppleHelpModalOpen(false);
+        }}
+      />
       <Modal
         title={m.client_download_modal_title()}
         size="small"
@@ -187,37 +193,6 @@ export const ClientDownloadPage = () => {
           }}
         />
       </Modal>
-      <Modal
-        title={m.client_download_apple_help_title()}
-        size="small"
-        isOpen={appleHelpModalOpen}
-        onClose={() => {
-          setAppleHelpModalOpen(false);
-        }}
-      >
-        <p>{m.client_download_apple_help_content_1()}</p>
-        <SizedBox height={ThemeSpacing.Xl} />
-        <video
-          controls
-          playsInline
-          preload="metadata"
-          src={apple_video_src}
-          style={{
-            width: '100%',
-            height: 'auto',
-          }}
-        />
-        <SizedBox height={ThemeSpacing.Xl} />
-        <p>{m.client_download_apple_help_content_2()}</p>
-        <ModalControls
-          submitProps={{
-            text: m.controls_got_it(),
-            onClick: () => {
-              setAppleHelpModalOpen(false);
-            },
-          }}
-        />
-      </Modal>
       <PageNavigation
         backText={m.controls_back()}
         onBack={() => {

webnext/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx

@@ -6,6 +6,7 @@ import { capitalCase } from 'change-case';
 import { QRCodeCanvas } from 'qrcode.react';
 import { useMemo, useState } from 'react';
 import { m } from '../../../paraglide/messages';
+import { AppleHelpModal } from '../../../shared/components/AppleHelpModal/AppleHelpModal';
 import { ContactFooter } from '../../../shared/components/ContactFooter/ContactFooter';
 import { ContainerWithIcon } from '../../../shared/components/ContainerWithIcon/ContainerWithIcon';
 import { Page } from '../../../shared/components/Page/Page';
@@ -30,6 +31,8 @@ export const ConfigureClientPage = () => {
 
   const { data: clientLinks } = useQuery(getClientArtifactsQueryOptions);
 
+  const [appleHelpModalOpen, setAppleHelpModalOpen] = useState(false);
+
   const clientDownloadMenu = useMemo(
     (): MenuItemsGroup[] => [
       {
@@ -44,6 +47,7 @@ export const ConfigureClientPage = () => {
       {
         header: {
           text: m.client_download_apple_help_header(),
+          onHelp: () => setAppleHelpModalOpen(true),
         },
         items: [
           {
@@ -217,6 +221,12 @@ export const ConfigureClientPage = () => {
         <p className="finish">{m.client_setup_footer_extra()}</p>
         <ContactFooter email={pageData.enrollmentData.admin.email} />
       </footer>
+      <AppleHelpModal
+        isOpen={appleHelpModalOpen}
+        onClose={() => {
+          setAppleHelpModalOpen(false);
+        }}
+      />
     </Page>
   );
 };

webnext/src/shared/components/AppleHelpModal/AppleHelpModal.tsx

@@ -0,0 +1,43 @@
+import { m } from '../../../paraglide/messages';
+import { Modal } from '../../defguard-ui/components/Modal/Modal';
+import { ModalControls } from '../../defguard-ui/components/ModalControls/ModalControls';
+import { SizedBox } from '../../defguard-ui/components/SizedBox/SizedBox';
+import { ThemeSpacing } from '../../defguard-ui/types';
+import apple_video_src from './assets/apple_hardware_help.mp4';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const AppleHelpModal = ({ isOpen, onClose }: Props) => {
+  return (
+    <Modal
+      title={m.client_download_apple_help_title()}
+      size="small"
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <p>{m.client_download_apple_help_content_1()}</p>
+      <SizedBox height={ThemeSpacing.Xl} />
+      <video
+        controls
+        playsInline
+        preload="metadata"
+        src={apple_video_src}
+        style={{
+          width: '100%',
+          height: 'auto',
+        }}
+      />
+      <SizedBox height={ThemeSpacing.Xl} />
+      <p>{m.client_download_apple_help_content_2()}</p>
+      <ModalControls
+        submitProps={{
+          text: m.controls_got_it(),
+          onClick: onClose,
+        }}
+      />
+    </Modal>
+  );
+};