jamalsoueidan · jamalsoueidan · Jun 27, 2024 · Jun 27, 2024
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -16,6 +16,7 @@ import {AE, DK, US} from 'country-flag-icons/react/3x2';
 import {useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import type {FooterQuery, HeaderQuery} from 'storefrontapi.generated';
+import {useMobile} from '~/hooks/isMobile';
 import {useRootLoaderData} from '~/root';
 import classes from './Footer.module.css';
 import logo from '/logo.avif';
@@ -26,6 +27,7 @@ export function Footer({
 }: FooterQuery & {shop: HeaderQuery['shop']}) {
   const {t} = useTranslation(['footer']);
   const [currentPath, setCurrentPath] = useState('');
+  const isMobile = useMobile();
 
   useEffect(() => {
     // Check if the window object is available (client-side rendering)
@@ -82,11 +84,9 @@ export function Footer({
               </Button>
             </Flex>
           </Stack>
-
           <FooterMenu menu={menu} />
-
           <Stack gap="lg" w={{base: '100%', sm: '20%'}}>
-            <Stack gap="xs">
+            <Stack gap="xs" align={isMobile ? 'center' : undefined}>
               <Text className={classes.title}>{t('social_media')}</Text>
               <Group gap="xs" justify="flex-start">
                 <ActionIcon
@@ -119,7 +119,11 @@ export function Footer({
                 </ActionIcon>
               </Group>
             </Stack>
-            <Stack gap="0">
+            <Stack
+              gap="0"
+              align={isMobile ? 'center' : undefined}
+              mt={isMobile ? 'md' : undefined}
+            >
               <Text className={classes.title}>{t('language')}</Text>
               <Group gap="4px" justify="flex-start">
                 <ActionIcon
@@ -150,7 +154,7 @@ export function Footer({
             </Stack>
           </Stack>
         </Flex>
-        <Text c="dimmed" size="sm" mt="xl">
+        <Text c="dimmed" size="sm" mt="xl" ta={isMobile ? 'center' : undefined}>
           © 2024 BySisters. All rights reserved.
         </Text>
       </Container>
@@ -161,9 +165,13 @@ export function Footer({
 function FooterMenu({menu}: {menu: FooterQuery['menu']}) {
   const {t} = useTranslation(['footer']);
   const {publicStoreDomain} = useRootLoaderData();
-
+  const isMobile = useMobile();
   return (
-    <Stack align="flex-start" gap="xs" w={{base: '100%', sm: '20%'}}>
+    <Stack
+      align={isMobile ? 'center' : 'flex-start'}
+      gap="xs"
+      w={{base: '100%', sm: '20%'}}
+    >
       <Text className={classes.title}>{t('company')}</Text>
       {menu?.items
         .filter(({url}) => url !== null && url !== undefined)

diff --git a/app/components/ModalAccount.tsx b/app/components/ModalAccount.tsx
@@ -0,0 +1,111 @@
+import {
+  Blockquote,
+  Button,
+  Flex,
+  Image,
+  Modal,
+  rem,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from '@mantine/core';
+import {useFetcher} from '@remix-run/react';
+import {type CustomerDetailsQuery} from 'customer-accountapi.generated';
+import {useEffect, useState} 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>();
+  const [isModalOpen, setModalOpen] = useState(true);
+
+  useEffect(() => {
+    if (fetcher.state === 'idle' && fetcher.data && !fetcher.data.error) {
+      setModalOpen(false);
+    }
+  }, [fetcher.state, fetcher.data]);
+
+  // if user not logged in !customer
+  // if user already firstname
+  if (!customer || customer.customer.firstName) {
+    return null;
+  }
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    fetcher.submit(event.currentTarget, {method: 'post'});
+  };
+
+  return (
+    <Modal.Root opened={isModalOpen} onClose={() => {}} shadow="0" centered>
+      <Modal.Overlay
+        color={isMobile ? '#FFF' : '#f5f5f5'}
+        backgroundOpacity={1}
+      />
+      <Modal.Content radius="md" p="lg">
+        <fetcher.Form
+          action="/account/profile"
+          method="post"
+          onSubmit={handleSubmit}
+        >
+          <Flex p="xl" align="center" justify="center" mb="xl">
+            <Image src="/logo.avif" w="200px" />
+          </Flex>
+          <Stack gap={rem(6)} mb="lg">
+            <Title size="h2" fw="500">
+              Personlig information
+            </Title>
+            <Text c="dimmed">
+              For at gøre din oplevelse hos os mere personlig, bedes du 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"
+            name="firstName"
+            type="text"
+            autoComplete="given-name"
+            placeholder="Fornavn"
+            aria-label="Fornavn"
+            labelProps={{mb: '5px'}}
+            mb="md"
+            required
+            data-testid="first-name-input"
+          />
+
+          <TextInput
+            label="Efternavn"
+            id="lastName"
+            name="lastName"
+            type="text"
+            autoComplete="family-name"
+            placeholder="Efternavn"
+            aria-label="Efternavn"
+            labelProps={{mb: '5px'}}
+            mb="md"
+            required
+            data-testid="last-name-input"
+          />
+          <Button
+            size="md"
+            fullWidth
+            disabled={fetcher.state !== 'idle'}
+            type="submit"
+          >
+            Gem og forsæt
+          </Button>
+        </fetcher.Form>
+      </Modal.Content>
+    </Modal.Root>
+  );
+};
diff --git a/app/components/Wrapper.module.css b/app/components/Wrapper.module.css
@@ -1,6 +1,6 @@
 .padding {
-  padding-top: 30px;
-  padding-bottom: 30px;
+  padding-top: 25px;
+  padding-bottom: 25px;
 
   @media (min-width: $mantine-breakpoint-sm) {
     padding-top: 50px;
@@ -9,8 +9,8 @@
 }
 
 .margin {
-  margin-top: 30px;
-  margin-bottom: 30px;
+  margin-top: 25px;
+  margin-bottom: 25px;
 
   @media (min-width: $mantine-breakpoint-sm) {
     margin-top: 50px;

diff --git a/app/components/account/AccountContent.tsx b/app/components/account/AccountContent.tsx
@@ -2,7 +2,7 @@ import {Card} from '@mantine/core';
 
 export function AccountContent({children}: {children: React.ReactNode}) {
   return (
-    <Card radius="xl" p={{base: 'xs', md: 'xl'}}>
+    <Card radius="xl" p={{base: 'xs', md: 'sm'}}>
       {children}
     </Card>
   );

diff --git a/app/components/account/AccountTitle.tsx b/app/components/account/AccountTitle.tsx
@@ -3,6 +3,7 @@ import {
   Box,
   Divider,
   Flex,
+  Group,
   ScrollArea,
   Title,
   type TitleProps,
@@ -22,9 +23,9 @@ export function AccountTitle({
       <Flex
         direction="column"
         gap={{base: 'sm', md: 'lg'}}
-        p={{base: 'xs', md: 'xl'}}
+        p={{base: 'xs', md: 'sm'}}
       >
-        <Flex direction="row" align="center">
+        <Group gap="0">
           {linkBack ? (
             <ActionIcon
               variant="transparent"
@@ -47,7 +48,7 @@ export function AccountTitle({
           >
             {heading}
           </Title>
-        </Flex>
+        </Group>
         {children ? (
           <ScrollArea type="auto" h="52px">
             <Flex gap="md" direction="row">
@@ -56,7 +57,6 @@ export function AccountTitle({
           </ScrollArea>
         ) : null}
       </Flex>
-      <Divider />
     </Box>
   );
 }

diff --git a/app/graphql/customer-account/CustomerDetailsQuery.ts b/app/graphql/customer-account/CustomerDetailsQuery.ts
@@ -4,6 +4,11 @@ export const CUSTOMER_FRAGMENT = `#graphql
     id
     firstName
     lastName
+    emailAddress {
+      emailAddress
+      marketingState
+    }
+    tags
     defaultAddress {
       ...Address
     }

diff --git a/app/hooks/isMobile.ts b/app/hooks/isMobile.ts
@@ -0,0 +1,6 @@
+import {useMediaQuery} from '@mantine/hooks';
+
+export const useMobile = () => {
+  const isMobile = useMediaQuery('(max-width: 48em)');
+  return isMobile;
+};
diff --git a/app/i18n/@types/resources.d.ts b/app/i18n/@types/resources.d.ts
@@ -1,4 +1,74 @@
 interface Resources {
+  "account": {
+    "business_title": "Partner",
+    "business_text": "Gå til business",
+    "business_action": "Gå til business",
+    "orders_title": "Bookinger",
+    "orders_text": "Administrer dine tidligere og kommende bookinger.",
+    "profile_title": "Personlig oplysninger",
+    "profile_text": "Ændre din fornavn eller efternavn.",
+    "address_title": "Adresser",
+    "address_text": "Administrer dine adresser",
+    "partner_title": "Partner",
+    "partner_text": "Start din skønhedskarrier",
+    "partner_action": "Kom igang",
+    "profile": {
+      "title": "Personlige oplysninger",
+      "error": "Fejl",
+      "first_name": "Fornavn",
+      "last_name": "Efternavn",
+      "save": "Gem ændringer"
+    },
+    "orders": {
+      "title": "Ordre",
+      "date": "Dato",
+      "payment": "Betaling",
+      "status": "Status",
+      "total": "Beløb",
+      "empty": "Du har ikke afgivet nogen ordre endnu",
+      "goto_frontpage": "Gå til forside",
+      "id": {
+        "title": "Ordre {{name}}",
+        "bought": "Købt",
+        "products": "Produkter",
+        "image": "Billed",
+        "description": "Beskrivelse",
+        "total": "Total",
+        "summary": "Summary",
+        "discount": "Rabat",
+        "subtotal": "Subtotal",
+        "tax": "Moms",
+        "shipping": "Forsendelse",
+        "no_shipping": "Ingen forsendelse",
+        "treatments": "Behandlinger",
+        "details": "Detaljer",
+        "visiting": "Hos <0>{{name}}</0>",
+        "visiting_deleted": "Skønhedsprofil er slettet",
+        "time": "Tid",
+        "location": "Location",
+        "location_expenses": "Udgifterne bliver beregnet under købsprocessen."
+      }
+    },
+    "address": {
+      "title": "Adresser",
+      "creating": "Opretter...",
+      "create": "Opret adresse",
+      "edit": "Ændre adresse",
+      "saving": "Gemmer...",
+      "save": "Gem",
+      "deleting": "Sletter...",
+      "delete": "Slet",
+      "form": {
+        "first_name": "Fornavn",
+        "last_name": "Efternavn",
+        "address": "Adresse",
+        "zip": "Postnummer",
+        "city": "By",
+        "phone": "Telefonnummer",
+        "default_address": "Indstil som standardadresse"
+      }
+    }
+  },
   "book": {
     "complete_shipping_calculation": "Udgifterne bliver beregnet under købsprocessen",
     "complete_map": "Se adresse på google map",
@@ -42,6 +112,7 @@ interface Resources {
     "english": "Engelsk",
     "arabic": "Arabisk",
     "login": "Log ind",
+    "logout": "Log ud",
     "monday": "Mandag",
     "tuesday": "Tirsdag",
     "wednesday": "Onsdag",
@@ -76,12 +147,12 @@ interface Resources {
     "reset_filters": "Nulstil filtering"
   },
   "index": {
-    "treatments_button": "Vis Kategorier",
-    "treatments_title": "Book unikke [oplevelser og skønhedsoplevelse]",
+    "treatments_button": "Vis skønhedsbehandlinger",
+    "treatments_title": "Book din [skønhedsbehandling] idag",
     "artists_button": "Vis skønhedseksperter",
     "artists_title": "Mød vores [talentfulde eksperter]",
     "left_button": "Find en skønhedsekspert",
-    "right_button": "Vis behandlinger",
+    "right_button": "Vis skønhedsbehandlinger",
     "subtitle": "Vores platform forbinder dig med talentfulde skønhedseksperter inden for alle aspekter af skønhed.",
     "title": "Find [skønhedseksperter] og book deres [behandlinger] direkte på vores platform"
   },

diff --git a/app/i18n/defaultConfig.ts b/app/i18n/defaultConfig.ts
@@ -1,5 +1,5 @@
 export const i18nDefaultConfig = {
-  debug: true,
+  debug: false,
   react: {
     useSuspense: false,
   },