diff --git a/public/locales/en/authentication.json b/public/locales/en/authentication.json index 9faa2fc..c1af38d 100644 --- a/public/locales/en/authentication.json +++ b/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" } } diff --git a/public/locales/fa/authentication.json b/public/locales/fa/authentication.json index f688171..9df6cf9 100644 --- a/public/locales/fa/authentication.json +++ b/public/locales/fa/authentication.json @@ -52,5 +52,14 @@ "ContainsASymbol": "شامل علامت (!@#$%&*^)", "confirmPassword": "تکرار رمز عبور", "passwordChangedSuccessfully": "رمز عبور با موفقیت تغییر یافت" + }, + "accountCreated": { + "yourHarmonyAccountHasBeenSuccessfullyCreated": "حساب هارمونی شما با موفقیت ایجاد شد", + "yourAccountInformationCanBeChangedThrough": "اطلاعات حساب شما از طریق ", + "yourAccountInformationCanBeChangedThroughEnd": " قابل تغییر می باشد", + "accountSettings": "تنظیمات حساب", + "harmonyClub": "هارمونی کلاب", + "encourageYourBusinessCustomersToMakeRepeatPurchasesBySendingThemDiscountCodesAndPoints": "با ارسال کد تخفیف و امتیاز به مشتریان کسب و کارتان آنها را به خرید مجدد ترغیب کنید ", + "redirectingTo": "در حال انتقال به" } } diff --git a/src/assets/account-created.svg b/src/assets/account-created.svg new file mode 100644 index 0000000..455d813 --- /dev/null +++ b/src/assets/account-created.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/features/authorization/components/AccountCreated/AccountCreated.tsx b/src/features/authorization/components/AccountCreated/AccountCreated.tsx new file mode 100644 index 0000000..1bc795e --- /dev/null +++ b/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(() => { + const returnUrl = params.get('returnUrl'); + + if (!returnUrl) return 'default'; + + if (returnUrl.includes('https://club.business-harmony.com/')) { + return 'club'; + } + + return 'unknown'; + }, [params]); + + return ( + + + + + + {t('accountCreated.yourHarmonyAccountHasBeenSuccessfullyCreated')} + + + + {t('accountCreated.yourAccountInformationCanBeChangedThrough')} + + + {t('accountCreated.accountSettings')} + + + {t('accountCreated.yourAccountInformationCanBeChangedThroughEnd')} + + + + {requestedApplication !== 'default' && ( + + + + {requestedApplication === 'club' && } + + )} + + ); +}; diff --git a/src/features/authorization/components/AccountCreated/AccountCreatedClubBanner.tsx b/src/features/authorization/components/AccountCreated/AccountCreatedClubBanner.tsx new file mode 100644 index 0000000..b1de1f0 --- /dev/null +++ b/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 ( + + + + + {t('accountCreated.harmonyClub')} + + {t( + 'accountCreated.encourageYourBusinessCustomersToMakeRepeatPurchasesBySendingThemDiscountCodesAndPoints', + )} + + + + ); +}; diff --git a/src/features/authorization/components/AccountCreated/AccountCreatedRedirectButton.tsx b/src/features/authorization/components/AccountCreated/AccountCreatedRedirectButton.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/features/authorization/components/AuthenticationCard.tsx b/src/features/authorization/components/AuthenticationCard.tsx index 6c49575..6a9b136 100644 --- a/src/features/authorization/components/AuthenticationCard.tsx +++ b/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 ( { }, marginInline: 2, width: (t) => `calc(100% - ${t.spacing(2)})`, - maxWidth: '552px', + maxWidth: maxWidth ?? '552px', }} > {children} diff --git a/src/features/authorization/routes/AccountCreatedPage.tsx b/src/features/authorization/routes/AccountCreatedPage.tsx new file mode 100644 index 0000000..29c9a4c --- /dev/null +++ b/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 ( + + + + + ); +}; diff --git a/src/routes/config.tsx b/src/routes/config.tsx index 6eef082..9d12741 100644 --- a/src/routes/config.tsx +++ b/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: , }, + { + path: '/account-created', + element: , + }, { path: '/signup', element: , authorize: true }, { path: '/forget-password', diff --git a/src/theme/color.type.ts b/src/theme/color.type.ts index 5e9151d..2cba15a 100644 --- a/src/theme/color.type.ts +++ b/src/theme/color.type.ts @@ -43,4 +43,8 @@ export interface Palette { dark: Partial; light: Partial; }; + club: { + dark: PaletteColorOptions; + light: PaletteColorOptions; + }; } diff --git a/src/theme/colors.ts b/src/theme/colors.ts index b9985a0..b61726c 100644 --- a/src/theme/colors.ts +++ b/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], diff --git a/src/theme/palette.ts b/src/theme/palette.ts index c37351e..e3c1dc8 100644 --- a/src/theme/palette.ts +++ b/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, };