feat: welcome page title and club banner added

public/locales/en/authentication.json

@@ -50,5 +50,14 @@
     "ContainsASymbol": "Contains the symbol (!@#$%&*^)",
     "confirmPassword": "Confirm password",
     "passwordChangedSuccessfully": "Password changed successfully"
+  },
+  "accountCreated": {
+    "yourHarmonyAccountHasBeenSuccessfullyCreated": "Your Harmony account has been successfully created.",
+    "yourAccountInformationCanBeChangedThrough": "Your account information can be changed through ",
+    "yourAccountInformationCanBeChangedThroughEnd": "",
+    "accountSettings": "account settings",
+    "harmonyClub": "Harmony club",
+    "encourageYourBusinessCustomersToMakeRepeatPurchasesBySendingThemDiscountCodesAndPoints": "Encourage your business customers to make repeat purchases by sending them discount codes and points.",
+    "redirectingTo": "Redirecting to"
   }
 }

public/locales/fa/authentication.json

@@ -52,5 +52,14 @@
     "ContainsASymbol": "شامل علامت (!@#$%&*^)",
     "confirmPassword": "تکرار رمز عبور",
     "passwordChangedSuccessfully": "رمز عبور با موفقیت تغییر یافت"
+  },
+  "accountCreated": {
+    "yourHarmonyAccountHasBeenSuccessfullyCreated": "حساب هارمونی شما با موفقیت ایجاد شد",
+    "yourAccountInformationCanBeChangedThrough": "اطلاعات حساب شما از طریق ",
+    "yourAccountInformationCanBeChangedThroughEnd": " قابل تغییر می باشد",
+    "accountSettings": "تنظیمات حساب",
+    "harmonyClub": "هارمونی کلاب",
+    "encourageYourBusinessCustomersToMakeRepeatPurchasesBySendingThemDiscountCodesAndPoints": "با ارسال کد تخفیف و امتیاز به مشتریان کسب و کارتان آنها را به خرید مجدد ترغیب کنید  ",
+    "redirectingTo": "در حال انتقال به"
   }
 }

src/assets/account-created.svg

@@ -0,0 +1,6 @@
+<svg width="160" height="161" viewBox="0 0 160 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.5" width="160" height="160" rx="80" fill="#E3F2FD"/>
+<rect x="16" y="16.5" width="128" height="128" rx="64" fill="#BBDEFB"/>
+<path d="M80.0001 37.1667C68.6467 37.1667 59.4167 46.3967 59.4167 57.7501C59.4167 68.8867 68.1267 77.9001 79.4801 78.2901C79.8267 78.2467 80.1734 78.2467 80.4334 78.2901C80.5201 78.2901 80.5634 78.2901 80.6501 78.2901C80.6934 78.2901 80.6934 78.2901 80.7367 78.2901C91.8301 77.9001 100.54 68.8867 100.583 57.7501C100.583 46.3967 91.3534 37.1667 80.0001 37.1667Z" fill="#2962FF"/>
+<path d="M102.013 89.8599C89.9234 81.7999 70.2067 81.7999 58.0301 89.8599C52.5267 93.4999 49.4934 98.4833 49.4934 103.813C49.4934 109.143 52.5267 114.083 57.9867 117.723C64.0534 121.797 72.0267 123.833 80.0001 123.833C87.9734 123.833 95.9467 121.797 102.013 117.723C107.473 114.04 110.507 109.1 110.507 103.727C110.463 98.4399 107.473 93.4566 102.013 89.8599ZM90.0967 100.26L79.1767 111.18C78.6567 111.7 77.9634 111.96 77.2701 111.96C76.5767 111.96 75.8834 111.657 75.3634 111.18L69.9034 105.72C68.8634 104.68 68.8634 102.947 69.9034 101.907C70.9434 100.867 72.6767 100.867 73.7167 101.907L77.2701 105.46L86.2834 96.4466C87.3234 95.4066 89.0567 95.4066 90.0967 96.4466C91.1801 97.4866 91.1801 99.2199 90.0967 100.26Z" fill="#2962FF"/>
+</svg>

src/features/authorization/components/AccountCreated/AccountCreated.tsx

@@ -0,0 +1,58 @@
+import React, { useMemo, useState } from 'react';
+import { AuthenticationCard } from '../AuthenticationCard';
+import { Box, CardHeader, Divider, Stack, Typography } from '@mui/material';
+import AccountCreatedIcon from '@/assets/account-created.svg';
+import { useTranslation } from 'react-i18next';
+import { Link as RouterLink, useSearchParams } from 'react-router-dom';
+import Link from '@mui/material/Link';
+import { AccountCreatedClubBanner } from './AccountCreatedClubBanner';
+
+type RequestedApplication = 'default' | 'unknown' | 'club';
+
+export const AccountCreated = () => {
+  const { t } = useTranslation('authentication');
+  const [params] = useSearchParams();
+
+  // Checking if there is a requested application and if its club or any other url
+  const requestedApplication = useMemo<RequestedApplication>(() => {
+    const returnUrl = params.get('returnUrl');
+
+    if (!returnUrl) return 'default';
+
+    if (returnUrl.includes('https://club.business-harmony.com/')) {
+      return 'club';
+    }
+
+    return 'unknown';
+  }, [params]);
+
+  return (
+    <AuthenticationCard maxWidth="636px">
+      <Stack sx={{ alignItems: 'center' }}>
+        <img src={AccountCreatedIcon} />
+
+        <Typography variant="h5" sx={{ mt: 2 }}>
+          {t('accountCreated.yourHarmonyAccountHasBeenSuccessfullyCreated')}
+        </Typography>
+
+        <Typography variant="body2" sx={{ mt: 1, mb: 2 }}>
+          {t('accountCreated.yourAccountInformationCanBeChangedThrough')}
+
+          <Link component={RouterLink} to="/setting/profile" underline="always">
+            {t('accountCreated.accountSettings')}
+          </Link>
+
+          {t('accountCreated.yourAccountInformationCanBeChangedThroughEnd')}
+        </Typography>
+      </Stack>
+
+      {requestedApplication !== 'default' && (
+        <Box sx={{ mx: 7 }}>
+          <Divider sx={{ my: 2 }} />
+
+          {requestedApplication === 'club' && <AccountCreatedClubBanner />}
+        </Box>
+      )}
+    </AuthenticationCard>
+  );
+};

src/features/authorization/components/AccountCreated/AccountCreatedClubBanner.tsx

@@ -0,0 +1,25 @@
+import { Stack, Typography, useTheme } from '@mui/material';
+import { Icon } from '@rkheftan/harmony-ui';
+import { Box, Profile2User } from 'iconsax-react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const AccountCreatedClubBanner = () => {
+  const { t } = useTranslation('authentication');
+  const theme = useTheme();
+
+  return (
+    <Stack direction="row" sx={{ py: 2.5 }} spacing={2} alignItems="start">
+      <Profile2User size={80} color={theme.palette.club.main} />
+
+      <Stack spacing={0.5}>
+        <Typography variant="h6">{t('accountCreated.harmonyClub')}</Typography>
+        <Typography variant="body2">
+          {t(
+            'accountCreated.encourageYourBusinessCustomersToMakeRepeatPurchasesBySendingThemDiscountCodesAndPoints',
+          )}
+        </Typography>
+      </Stack>
+    </Stack>
+  );
+};

src/features/authorization/components/AuthenticationCard.tsx

@@ -1,8 +1,15 @@
 import { Paper } from '@mui/material';
 import { type PropsWithChildren } from 'react';
 
+export interface AuthenticationCardProps extends PropsWithChildren {
+  maxWidth?: string;
+}
+
 // Beacuse in the otp verify there is a element outside of the authentication card
-export const AuthenticationCard = ({ children }: PropsWithChildren) => {
+export const AuthenticationCard = ({
+  children,
+  maxWidth,
+}: AuthenticationCardProps) => {
   return (
     <Paper
       elevation={0}
@@ -14,7 +21,7 @@ export const AuthenticationCard = ({ children }: PropsWithChildren) => {
         },
         marginInline: 2,
         width: (t) => `calc(100% - ${t.spacing(2)})`,
-        maxWidth: '552px',
+        maxWidth: maxWidth ?? '552px',
       }}
     >
       {children}

src/features/authorization/routes/AccountCreatedPage.tsx

@@ -0,0 +1,20 @@
+import { FlexBox } from '@/components/common/FlexBox';
+import Logo from '@/components/Logo';
+import { AccountCreated } from '../components/AccountCreated/AccountCreated';
+
+export const AccountCreatedPage = () => {
+  return (
+    <FlexBox
+      direction="column"
+      align="center"
+      justify="center"
+      sx={{
+        minHeight: '100vh',
+        gap: 3,
+      }}
+    >
+      <Logo />
+      <AccountCreated />
+    </FlexBox>
+  );
+};

src/routes/config.tsx

@@ -1,4 +1,5 @@
 import { Layout } from '@/components';
+import { AccountCreatedPage } from '@/features/authorization/routes/AccountCreatedPage';
 import {
   Calendar,
   Devices,
@@ -72,6 +73,10 @@ export const appRoutes: RouteConfig[] = [
     path: '/login',
     element: <AuthenticationPage />,
   },
+  {
+    path: '/account-created',
+    element: <AccountCreatedPage />,
+  },
   { path: '/signup', element: <UserCompletionPage />, authorize: true },
   {
     path: '/forget-password',

src/theme/color.type.ts

@@ -43,4 +43,8 @@ export interface Palette {
     dark: Partial<TypeText>;
     light: Partial<TypeText>;
   };
+  club: {
+    dark: PaletteColorOptions;
+    light: PaletteColorOptions;
+  };
 }

src/theme/colors.ts

@@ -16,6 +16,14 @@ export const PALETTE: Palette = {
       contrastText: '#FFFFFF',
     },
   },
+  club: {
+    light: {
+      main: '#FF5722',
+    },
+    dark: {
+      main: '#FF5722',
+    },
+  },
   secondary: {
     light: {
       main: grey[900],

src/theme/palette.ts

@@ -1,6 +1,15 @@
 import { type PaletteOptions } from '@mui/material/styles';
 import { PALETTE } from './colors';
 
+declare module '@mui/material/styles' {
+  interface Palette {
+    club: Palette['primary']; // Extend Palette to include 'club'
+  }
+  interface PaletteOptions {
+    club?: PaletteOptions['primary']; // Extend PaletteOptions for optional 'club'
+  }
+}
+
 export const lightPalette: PaletteOptions = {
   mode: 'light',
   primary: PALETTE.primary.light,
@@ -12,6 +21,7 @@ export const lightPalette: PaletteOptions = {
   info: PALETTE.info.light,
   background: PALETTE.background.light,
   text: PALETTE.text.light,
+  club: PALETTE.club.light,
 };
 
 export const darkPalette: PaletteOptions = {
@@ -25,4 +35,5 @@ export const darkPalette: PaletteOptions = {
   info: PALETTE.info.dark,
   background: PALETTE.background.dark,
   text: PALETTE.text.dark,
+  club: PALETTE.club.dark,
 };