From 062ba477908604d9a5f42a1cb9be3694546ebc5f Mon Sep 17 00:00:00 2001
From: gofnnp <fbicha1234@gmail.com>
Date: Fri, 25 Aug 2023 03:57:54 +0400
Subject: [PATCH] feat: add price list page

---
 package-lock.json                             |  16 ++++++-
 package.json                                  |   3 +-
 public/check-mark-1.png                       | Bin 0 -> 2619 bytes
 src/components/App/index.tsx                  |  11 ++++-
 src/components/PriceItem/index.tsx            |  39 ++++++++++++++++
 src/components/PriceItem/styles.module.css    |  33 +++++++++++++
 src/components/PriceList/index.tsx            |  44 ++++++++++++++++++
 src/components/PriceList/styles.module.css    |   5 ++
 src/components/PriceListPage/index.tsx        |  38 +++++++++++++++
 .../PriceListPage/styles.module.css           |  31 ++++++++++++
 src/index.css                                 |  10 ++--
 src/locales/dev.ts                            |  11 +++++
 src/routes.ts                                 |  13 ++++++
 src/services/random-value/index.ts            |  13 ++++++
 src/types.ts                                  |   3 +-
 15 files changed, 261 insertions(+), 9 deletions(-)
 create mode 100644 public/check-mark-1.png
 create mode 100644 src/components/PriceItem/index.tsx
 create mode 100644 src/components/PriceItem/styles.module.css
 create mode 100644 src/components/PriceList/index.tsx
 create mode 100644 src/components/PriceList/styles.module.css
 create mode 100644 src/components/PriceListPage/index.tsx
 create mode 100644 src/components/PriceListPage/styles.module.css
 create mode 100644 src/services/random-value/index.ts

diff --git a/package-lock.json b/package-lock.json
index 5fd19c3..47a9bd8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,8 @@
         "react-dom": "^18.2.0",
         "react-i18next": "^12.3.1",
         "react-redux": "^8.0.5",
-        "react-router-dom": "^6.11.2"
+        "react-router-dom": "^6.11.2",
+        "unique-names-generator": "^4.7.1"
       },
       "devDependencies": {
         "@chargebee/chargebee-js-types": "^1.0.1",
@@ -3242,6 +3243,14 @@
         "node": ">=12.20"
       }
     },
+    "node_modules/unique-names-generator": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/unique-names-generator/-/unique-names-generator-4.7.1.tgz",
+      "integrity": "sha512-lMx9dX+KRmG8sq6gulYYpKWZc9RlGsgBR6aoO8Qsm3qvkSJ+3rAymr+TnV8EDMrIrwuFJ4kruzMWM/OpYzPoow==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
@@ -5566,6 +5575,11 @@
       "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
       "dev": true
     },
+    "unique-names-generator": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/unique-names-generator/-/unique-names-generator-4.7.1.tgz",
+      "integrity": "sha512-lMx9dX+KRmG8sq6gulYYpKWZc9RlGsgBR6aoO8Qsm3qvkSJ+3rAymr+TnV8EDMrIrwuFJ4kruzMWM/OpYzPoow=="
+    },
     "update-browserslist-db": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
diff --git a/package.json b/package.json
index 6f05c1c..4c44719 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^12.3.1",
     "react-redux": "^8.0.5",
-    "react-router-dom": "^6.11.2"
+    "react-router-dom": "^6.11.2",
+    "unique-names-generator": "^4.7.1"
   },
   "devDependencies": {
     "@chargebee/chargebee-js-types": "^1.0.1",
diff --git a/public/check-mark-1.png b/public/check-mark-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0ed2183dab226fe14db562d0cacddf789418a62
GIT binary patch
literal 2619
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
Dn@Z;w

literal 0
HcmV?d00001

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index a90dc34..f91e151 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -5,7 +5,7 @@ import {
 import { useAuth } from '@/auth'
 import { useSelector } from 'react-redux'
 import { selectors } from '@/store'
-import routes, { hasNavigation, getRouteBy, hasNoFooter } from '@/routes'
+import routes, { hasNavigation, getRouteBy, hasNoFooter, hasNoHeader } from '@/routes'
 import BirthdayPage from '../BirthdayPage'
 import BirthtimePage from '../BirthtimePage'
 import CreateProfilePage from '../CreateProfilePage'
@@ -23,6 +23,9 @@ import DidYouKnowPage from '../DidYouKnowPage'
 import FreePeriodInfoPage from '../FreePeriodInfoPage'
 import AttentionPage from '../AttentionPage'
 import FeedbackPage from '../FeedbackPage'
+import CompatibilityPage from '../Compatibility'
+import BreathPage from '../BreathPage'
+import PriceListPage from '../PriceListPage'
 
 function App(): JSX.Element {
   const [isSpecialOfferOpen, setIsSpecialOfferOpen] = useState<boolean>(false)
@@ -46,6 +49,9 @@ function App(): JSX.Element {
         <Route path={routes.client.createProfile()} element={<SkipStep />} />
         <Route path={routes.client.emailEnter()} element={<EmailEnterPage />} />
         <Route path={routes.client.static()} element={<StaticPage />} />
+        <Route path={routes.client.compatibility()} element={<CompatibilityPage />} />
+        <Route path={routes.client.breath()} element={<BreathPage />} />
+        <Route path={routes.client.priceList()} element={<PriceListPage />} />
         <Route element={<PrivateOutlet />}>
           <Route path={routes.client.subscription()} element={<SubscriptionPage />} />
           <Route path={routes.client.paymentMethod()} element={<PaymentPage />} />
@@ -65,11 +71,12 @@ function Layout({ setIsSpecialOfferOpen }: LayoutProps): JSX.Element {
   const location = useLocation()
   const showNavbar = hasNavigation(location.pathname)
   const showFooter = hasNoFooter(location.pathname)
+  const showHeader = hasNoHeader(location.pathname)
   const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false)
   const changeIsSpecialOfferOpen = () => setIsSpecialOfferOpen(true)
   return (
     <div className='container'>
-      <Header openMenu={() => setIsMenuOpen(true)} clickCross={changeIsSpecialOfferOpen}/>
+      { showHeader ? <Header openMenu={() => setIsMenuOpen(true)} clickCross={changeIsSpecialOfferOpen}/> : null }
       <main className='content'><Outlet /></main>
       { showFooter ? <Footer color={showNavbar ? 'black' : 'white'}/> : null }
       { showNavbar ? <Navbar isOpen={isMenuOpen} closeMenu={() => setIsMenuOpen(false)} /> : null}
diff --git a/src/components/PriceItem/index.tsx b/src/components/PriceItem/index.tsx
new file mode 100644
index 0000000..95adcb1
--- /dev/null
+++ b/src/components/PriceItem/index.tsx
@@ -0,0 +1,39 @@
+import { Currency, Locale, Price } from '../PaymentTable'
+import { IPrice } from '../PriceList'
+import styles from './styles.module.css'
+
+const currency = Currency.USD
+const locale = Locale.EN
+
+const roundToWhole = (value: string | number): number => {
+    value = Number(value)
+    if (value % Math.floor(value) !== 0) {
+        return value
+    }
+    return Math.floor(value)
+}
+
+const removeAfterDot = (value: string): string => {
+    const _value = Number(value.split('$')[1])
+    if (_value % Math.floor(_value) !== 0 && _value !== 0) {
+        return value
+    }
+    return value.split('.')[0]
+}
+
+interface PriceItemProps {
+    click: () => void
+}
+
+function PriceItem({ id, value, click }: IPrice & PriceItemProps): JSX.Element {
+  console.log(id);
+  const _price = new Price(roundToWhole(value), currency, locale)
+
+  return (
+    <div onClick={click} className={`${styles.container} ${value === 9 ? styles.popular : ''}`}>
+      {removeAfterDot(_price.format())}
+    </div>
+  )
+}
+
+export default PriceItem
diff --git a/src/components/PriceItem/styles.module.css b/src/components/PriceItem/styles.module.css
new file mode 100644
index 0000000..6e67676
--- /dev/null
+++ b/src/components/PriceItem/styles.module.css
@@ -0,0 +1,33 @@
+.container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 60px;
+    height: 60px;
+    border-radius: 10px;
+    border: solid #d6d2d2 2px;
+    font-weight: 600;
+}
+
+.popular {
+    border-color: #30bf52;
+}
+
+.popular:after {
+    content: 'Most Popular';
+    position: absolute;
+    width: 80px;
+    height: 20px;
+    left: -10px;
+    bottom: -25px;
+    background-color: #30bf52;
+    font-size: 9px;
+    font-weight: 500;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+}
\ No newline at end of file
diff --git a/src/components/PriceList/index.tsx b/src/components/PriceList/index.tsx
new file mode 100644
index 0000000..cd17d65
--- /dev/null
+++ b/src/components/PriceList/index.tsx
@@ -0,0 +1,44 @@
+import PriceItem from '../PriceItem'
+import styles from './styles.module.css'
+
+export interface IPrice {
+    id: number
+    value: number
+}
+
+const prices: IPrice[] = [
+    {
+        id: 1,
+        value: 0
+    },
+    {
+        id: 2,
+        value: 5
+    },
+    {
+        id: 3,
+        value: 9
+    },
+    {
+        id: 4,
+        value: 13.67
+    },
+]
+
+interface PriceListProps {
+    click: () => void
+}
+
+function PriceList({click}: PriceListProps): JSX.Element {
+  
+
+  return (
+    <div className={`${styles.container}`}>
+      {prices.map((price, idx) => (
+        <PriceItem key={idx} value={price.value} id={price.id} click={click} />
+      ))}
+    </div>
+  )
+}
+
+export default PriceList
diff --git a/src/components/PriceList/styles.module.css b/src/components/PriceList/styles.module.css
new file mode 100644
index 0000000..e65220e
--- /dev/null
+++ b/src/components/PriceList/styles.module.css
@@ -0,0 +1,5 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
\ No newline at end of file
diff --git a/src/components/PriceListPage/index.tsx b/src/components/PriceListPage/index.tsx
new file mode 100644
index 0000000..a964ec6
--- /dev/null
+++ b/src/components/PriceListPage/index.tsx
@@ -0,0 +1,38 @@
+import { useNavigate } from 'react-router-dom'
+import routes from '@/routes'
+import styles from './styles.module.css'
+import UserHeader from '../UserHeader'
+import { useSelector } from 'react-redux'
+import { selectors } from '@/store'
+import Title from '../Title'
+import { useTranslation } from 'react-i18next'
+import EmailsList from '../EmailsList'
+import PriceList from '../PriceList'
+
+function PriceListPage(): JSX.Element {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const email = useSelector(selectors.selectEmail)
+  const handleNext = () => {
+    navigate(routes.client.breath())
+  }
+  
+
+  return (
+    <>
+        <UserHeader email={email} />
+        <section className={`${styles.page} page`}>
+            <Title className={styles.title} variant='h2'>{t('choose_your_own_fee')}</Title>
+            <p className={styles.slogan}>{t('should_not_get', { strongText: <strong>{t('money')}</strong> })}</p>
+            <div className={styles['emails-list-container']}>
+                <EmailsList />
+            </div>
+            <div className={styles['price-list-container']}>
+                <PriceList click={handleNext} />
+            </div>
+        </section>
+    </>
+  )
+}
+
+export default PriceListPage
diff --git a/src/components/PriceListPage/styles.module.css b/src/components/PriceListPage/styles.module.css
new file mode 100644
index 0000000..c92e3e5
--- /dev/null
+++ b/src/components/PriceListPage/styles.module.css
@@ -0,0 +1,31 @@
+.page {
+  position: relative;
+  height: calc(100vh - 81px);
+  max-height: -webkit-fill-available;
+  flex: auto;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  font-weight: 700;
+}
+
+.slogan {
+  text-align: center;
+  font-weight: 500;
+  max-width: 250px;
+  line-height: 1.3;
+}
+
+.emails-list-container {
+  width: 40%;
+  min-width: 200px;
+  height: 130px;
+  margin-top: 48px;
+}
+
+.price-list-container {
+  width: 100%;
+  margin-top: 32px;
+}
diff --git a/src/index.css b/src/index.css
index 243b5ae..b1667eb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -28,6 +28,12 @@ button,h4 {
 
 button {
   line-height: 20px;
+  cursor: pointer;
+}
+
+input {
+  border: none;
+  outline: none;
 }
 
 a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
@@ -122,7 +128,3 @@ a,button,div,input,select,textarea {
 .CircularProgressbar {
   position: relative;
 }
-
-button {
-  cursor: pointer;
-}
diff --git a/src/locales/dev.ts b/src/locales/dev.ts
index 29f7f3f..2e252e3 100644
--- a/src/locales/dev.ts
+++ b/src/locales/dev.ts
@@ -65,5 +65,16 @@ export default {
     get_100_off: "Get 100% off - Today only",
     special_welcome_offer: "Special welcome offer!",
     get_discount: "Get discount",
+    compatibility: "Compatibility",
+    iAm: "I am",
+    name: "Name",
+    check: "Check",
+    breathIn: "Breathe in",
+    breathOut: "Breathe out",
+    hold: "Hold",
+    choose_your_own_fee: "Choose your own fee",
+    should_not_get: "<strongText> shouldn't get in the way of finding something for you",
+    money: "Money",
+    people_joined_today: "<countPeoples> people joined today",
   },
 }
diff --git a/src/routes.ts b/src/routes.ts
index 52251e8..384aadf 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -20,6 +20,9 @@ const routes = {
     wallpaper: () => [host, 'wallpaper'].join('/'),
     static: () => [host, 'static', ':typeId'].join('/'),
     legal: (type: string) => [host, 'static', type].join('/'),
+    compatibility: () => [host, 'compatibility'].join('/'),
+    breath: () => [host, 'breath'].join('/'),
+    priceList: () => [host, 'price-list'].join('/'),
   },
   server: {
     user: () => [apiHost, prefix, 'user.json'].join('/'),
@@ -37,6 +40,7 @@ const routes = {
     subscriptionStatus: () => [apiHost, prefix, 'user', 'subscription_receipts', 'status.json'].join('/'),
     subscriptionReceipts: () => [apiHost, prefix, 'user', 'subscription_receipts.json'].join('/'),
     subscriptionReceipt: (id: string) => [apiHost, prefix, 'user', 'subscription_receipts', `${id}.json`].join('/'),
+    compatCategories: () => [apiHost, prefix, 'ai', 'compat_categories.json'].join('/'),
   },
 }
 
@@ -48,6 +52,7 @@ export const entrypoints = [
   routes.client.didYouKnow(),
   routes.client.attention(),
   routes.client.feedback(),
+  routes.client.breath(),
 ]
 export const isEntrypoint = (path: string) => entrypoints.includes(path)
 export const isNotEntrypoint = (path: string) => !isEntrypoint(path)
@@ -64,9 +69,17 @@ export const withoutFooterRoutes = [
   routes.client.createProfile(),
   routes.client.attention(),
   routes.client.feedback(),
+  routes.client.compatibility(),
+  routes.client.breath(),
+  routes.client.priceList(),
 ]
 export const hasNoFooter = (path: string) => !withoutFooterRoutes.includes(path)
 
+export const withoutHeaderRoutes = [
+  routes.client.compatibility(),
+]
+export const hasNoHeader = (path: string) => !withoutHeaderRoutes.includes(path)
+
 export const getRouteBy = (status: UserStatus): string => {
   switch (status) {
     case 'lead':
diff --git a/src/services/random-value/index.ts b/src/services/random-value/index.ts
new file mode 100644
index 0000000..a061a37
--- /dev/null
+++ b/src/services/random-value/index.ts
@@ -0,0 +1,13 @@
+import { uniqueNamesGenerator, Config, names } from "unique-names-generator";
+
+export const getRandomName = (): string => {
+  const config: Config = {
+    dictionaries: [names],
+  };
+  return uniqueNamesGenerator(config);
+};
+
+// The maximum is exclusive and the minimum is inclusive
+export const getRandomArbitrary = (min: number, max: number) => {
+  return Math.floor(Math.random() * (max - min) + min);
+};
diff --git a/src/types.ts b/src/types.ts
index 78e70a3..453badf 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -11,7 +11,8 @@ export interface FormField<T> {
   value: T
   label?: string | null
   placeholder?: string | null
-  onValid: (value: T) => void
+  inputClassName?: string
+  onValid: (value: string) => void
   onInvalid: () => void
 }