Merge pull request #118 from jamalsoueidan/wizard-business-account

Wizard business account
jamalsoueidan · Jul 12, 2024 · 3422cb8 · 3422cb8
2 parents 5d707bf + 787b1ea
commit 3422cb8
Show file tree

Hide file tree

Showing 62 changed files with 2,950 additions and 1,034 deletions.
diff --git a/app/components/LayoutWrapper.tsx b/app/components/LayoutWrapper.tsx
@@ -5,11 +5,7 @@ import {
   Button,
   Flex,
   Group,
-  Image,
   NavLink as NavLinkMantine,
-  rem,
-  Title,
-  UnstyledButton,
 } from '@mantine/core';
 import {
   useDisclosure,
@@ -34,10 +30,9 @@ import {
 } from '@tabler/icons-react';
 import {Suspense, type ReactNode} from 'react';
 import {useTranslation} from 'react-i18next';
-import {useLanguage} from '~/hooks/useLanguage';
 import {type loader} from '~/root';
 import {Footer} from './Footer';
-import logo from '/Artboard4.svg';
+import {Logo} from './Logo';
 
 export function LayoutWrapper({children}: {children: ReactNode}) {
   const data = useLoaderData<typeof loader>();
@@ -46,7 +41,6 @@ export function LayoutWrapper({children}: {children: ReactNode}) {
   const [scroll] = useWindowScroll();
   const isMobile = useMediaQuery('(max-width: 62em)');
   const location = useLocation();
-  const language = useLanguage();
   const path = location.pathname;
 
   const {publish, cart: analyticsCart} = useAnalytics();
@@ -90,30 +84,7 @@ export function LayoutWrapper({children}: {children: ReactNode}) {
         ) : null}
         <Group h="100%" miw="150px">
           <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
-          <UnstyledButton component={Link} to="/" onClick={close}>
-            <Title
-              order={1}
-              component={Flex}
-              lh="xs"
-              fz={rem(28)}
-              fw="500"
-              data-testid="logo-login"
-            >
-              {language !== 'AR' ? (
-                <>
-                  ByS
-                  <Image src={logo} alt="it's me" h="auto" w="8px" mx="2px" />
-                  sters
-                </>
-              ) : (
-                <>
-                  باي
-                  <Image src={logo} alt="it's me" h="auto" w="8px" mx="2px" />
-                  سيستر
-                </>
-              )}
-            </Title>
-          </UnstyledButton>
+          <Logo close={close} />
         </Group>
         <Flex
           justify="center"

diff --git a/app/components/Logo.tsx b/app/components/Logo.tsx
@@ -0,0 +1,35 @@
+import {Flex, Image, rem, Title, UnstyledButton} from '@mantine/core';
+import {Link} from '@remix-run/react';
+import {useLanguage} from '~/hooks/useLanguage';
+import logo from '/Artboard4.svg';
+
+export function Logo({close}: {close: () => void}) {
+  const language = useLanguage();
+
+  return (
+    <UnstyledButton component={Link} to="/" onClick={close}>
+      <Title
+        order={1}
+        component={Flex}
+        lh="xs"
+        fz={rem(28)}
+        fw="500"
+        data-testid="logo-login"
+      >
+        {language !== 'AR' ? (
+          <>
+            ByS
+            <Image src={logo} alt="it's me" h="auto" w="8px" mx="2px" />
+            sters
+          </>
+        ) : (
+          <>
+            باي
+            <Image src={logo} alt="it's me" h="auto" w="8px" mx="2px" />
+            سيستر
+          </>
+        )}
+      </Title>
+    </UnstyledButton>
+  );
+}
diff --git a/app/components/ModalAccount.tsx b/app/components/ModalAccount.tsx
@@ -1,11 +1,10 @@
 import {
-  Blockquote,
+  Box,
   Button,
   Card,
   Center,
   Flex,
   Image,
-  Overlay,
   rem,
   Stack,
   Text,
@@ -14,31 +13,36 @@ import {
 } from '@mantine/core';
 import {useFetcher} from '@remix-run/react';
 import {type CustomerDetailsQuery} from 'customer-accountapi.generated';
+import {useEffect} from 'react';
 import {useMobile} from '~/hooks/isMobile';
 import {type ActionResponse} from '~/routes/account.profile';
 
 export const ModalAccount = ({customer}: {customer?: CustomerDetailsQuery}) => {
   const isMobile = useMobile();
   const fetcher = useFetcher<ActionResponse>();
 
-  // if user not logged in !customer
-  // if user already firstname
-  if (!customer) {
-    return null;
-  }
-
-  if (customer.customer.firstName && !!fetcher.data) {
-    return null;
-  }
-
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     fetcher.submit(event.currentTarget, {method: 'post'});
   };
 
+  useEffect(() => {
+    if (fetcher.data) {
+      window.location.reload();
+    }
+  }, [fetcher.data]);
+
   return (
-    <>
-      <Center w="100%" h="100vh" style={{zIndex: 3000}} pos="absolute">
+    <Box
+      style={{zIndex: 201}}
+      pos="absolute"
+      top="0"
+      left="0"
+      right="0"
+      bottom="0"
+      bg={isMobile ? '#FFF' : '#f5f5f5'}
+    >
+      <Center w="100%" h="100vh">
         <Card bg="white" radius="sm" w={{base: '100%', sm: '476px'}}>
           <fetcher.Form
             action="/account/profile"
@@ -57,17 +61,7 @@ export const ModalAccount = ({customer}: {customer?: CustomerDetailsQuery}) => {
                 venligst oplyse dit fornavn og efternavn.
               </Text>
             </Stack>
-            {fetcher.data?.error ? (
-              <Blockquote
-                color="red"
-                my="xl"
-                data-testid="required-notification"
-              >
-                <strong>Fejl:</strong>
-                <br />
-                {fetcher.data.error}
-              </Blockquote>
-            ) : null}
+
             <TextInput
               label="Fornavn"
               id="firstName"
@@ -106,7 +100,6 @@ export const ModalAccount = ({customer}: {customer?: CustomerDetailsQuery}) => {
           </fetcher.Form>
         </Card>
       </Center>
-      <Overlay color={isMobile ? '#FFF' : '#f5f5f5'} backgroundOpacity={1} />
-    </>
+    </Box>
   );
 };
diff --git a/app/components/ProfessionButton.tsx b/app/components/ProfessionButton.tsx
@@ -36,7 +36,7 @@ export const skills = {
   bridal_makeup: 'Bryllups Makeup',
 };
 
-export const professionImages: Record<string, string> = {
+export const professions: Record<string, string> = {
   all: 'https://cdn.shopify.com/s/files/1/0682/4060/5458/files/all.jpg?v=1713361903',
   nail_technician:
     'https://cdn.shopify.com/s/files/1/0682/4060/5458/files/nail_technician.webp?v=1713361477',
@@ -57,7 +57,7 @@ export const professionImages: Record<string, string> = {
 export const useProfessionAndSkills = () => {
   const {t} = useTranslation(['professions', 'skills']);
   const professionOptions = useMemo(() => {
-    return Object.keys(professionImages)
+    return Object.keys(professions)
       .filter((key) => key !== 'all')
       .map((key) => ({
         label: t(`professions:${key}` as any),
@@ -98,7 +98,7 @@ export const ProfessionButton = ({
       }
     >
       <Avatar
-        src={modifyImageUrl(professionImages[profession], '200x200')}
+        src={modifyImageUrl(professions[profession], '200x200')}
         alt={t(`professions:${profession}` as any)}
         radius="100%"
         size={rem(90)}

diff --git a/app/components/account/AccountTitle.module.css b/app/components/account/AccountTitle.module.css
diff --git a/app/components/account/AccountTitle.tsx b/app/components/account/AccountTitle.tsx
@@ -10,7 +10,6 @@ import {
 } from '@mantine/core';
 import {Link} from '@remix-run/react';
 import {IconArrowLeft} from '@tabler/icons-react';
-import classes from './AccountTitle.module.css';
 
 export function AccountTitle({
   heading,
@@ -42,7 +41,7 @@ export function AccountTitle({
             </ActionIcon>
           ) : null}
           <Title
-            className={classes.title}
+            fz={{base: 'lg', md: 'h3'}}
             {...props}
             data-testid="account-title"
           >
@@ -68,7 +67,7 @@ export function AccountTitleBack({
 }: TitleProps & {heading: string}) {
   return (
     <>
-      <Title className={classes.title} {...props}>
+      <Title fz={{base: 'lg', md: 'h3'}} {...props}>
         {heading}
       </Title>
       {children}