set up a modal for onboarding

src/components/onboarding/OnboardingModal/index.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+import styles from './style.module.scss';
+
+const OnboardingModal = () => {
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+
+  useEffect(() => {
+    // Block interactions with the page
+    dialogRef.current?.showModal();
+  }, []);
+
+  return (
+    <dialog
+      className={styles.wrapper}
+      ref={dialogRef}
+      // Prevent closing dialog with escape key (TODO: on Chrome you can press
+      // escape twice to bypass)
+      onCancel={e => e.preventDefault()}
+    >
+      hey
+    </dialog>
+  );
+};
+
+export default OnboardingModal;

src/components/onboarding/OnboardingModal/style.module.scss

@@ -0,0 +1,14 @@
+@use 'src/styles/vars.scss' as vars;
+
+.wrapper {
+  background-color: var(--theme-background);
+  border: 0;
+  display: flex;
+  height: 100%;
+  left: 0;
+  max-height: unset;
+  max-width: unset;
+  overscroll-behavior: contain;
+  top: 0;
+  width: 100%;
+}

src/components/onboarding/OnboardingModal/style.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  wrapper: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/components/onboarding/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as OnboardingModal } from './OnboardingModal';

src/pages/debug.tsx

@@ -1,13 +1,17 @@
 import { Button, Typography } from '@/components/common';
+import { OnboardingModal } from '@/components/onboarding';
 import { config, showToast } from '@/lib';
 import withAccessType from '@/lib/hoc/withAccessType';
 import { PermissionService } from '@/lib/services';
 import { setClientCookie } from '@/lib/services/CookieService';
 import { CookieCartItem } from '@/lib/types/client';
 import { CookieType } from '@/lib/types/enums';
 import { GetServerSideProps } from 'next';
+import { useState } from 'react';
 
 const DebugPage = () => {
+  const [showOnboarding, setShowOnboarding] = useState(false);
+
   return (
     <div>
       <Typography variant="h1/bold">Debug</Typography>
@@ -43,6 +47,9 @@ const DebugPage = () => {
       >
         Fill Cart
       </Button>
+      <Typography variant="h2/medium">Onboarding</Typography>
+      <Button onClick={() => setShowOnboarding(true)}>Teach Me the Ways</Button>
+      {showOnboarding ? <OnboardingModal /> : null}
     </div>
   );
 };