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

---
 src/components/EmailEnterPage/index.tsx     |  3 +-
 src/components/EmailItem/index.tsx          | 34 +++++++++++++++++++++
 src/components/EmailItem/styles.module.css  |  7 +++++
 src/components/EmailsList/styles.module.css | 34 +++++++++++++++++++++
 src/components/ErrorText/index.tsx          |  2 +-
 src/components/ErrorText/styles.css         |  4 +++
 6 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 src/components/EmailItem/index.tsx
 create mode 100644 src/components/EmailItem/styles.module.css
 create mode 100644 src/components/EmailsList/styles.module.css

diff --git a/src/components/EmailEnterPage/index.tsx b/src/components/EmailEnterPage/index.tsx
index 06b99c5..6705de2 100644
--- a/src/components/EmailEnterPage/index.tsx
+++ b/src/components/EmailEnterPage/index.tsx
@@ -32,8 +32,9 @@ function EmailEnterPage(): JSX.Element {
     setIsDisabled(false)
   }
   const handleClick = () => {
+    // TODO: fix backend error 422 auth with email
+    return navigate(routes.client.priceList())
     if (user) {
-      navigate(routes.client.subscription())
       return
     }
     setError(null)
diff --git a/src/components/EmailItem/index.tsx b/src/components/EmailItem/index.tsx
new file mode 100644
index 0000000..56447a1
--- /dev/null
+++ b/src/components/EmailItem/index.tsx
@@ -0,0 +1,34 @@
+import { Currency, Locale, Price } from '../PaymentTable'
+import styles from './styles.module.css'
+
+export interface IEmailItem {
+    email: string
+    price: number
+}
+
+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 formatEmail = (email: string): string => {
+    return `${email.slice(0, 4)}****`
+}
+
+function EmailItem({email, price}: IEmailItem): JSX.Element {
+  const _price = new Price(roundToWhole(price), currency, locale)
+
+  return (
+    <span className={styles.container}>
+        {formatEmail(email)} <strong> chose {_price.format()} </strong>
+    </span>
+  )
+}
+
+export default EmailItem
diff --git a/src/components/EmailItem/styles.module.css b/src/components/EmailItem/styles.module.css
new file mode 100644
index 0000000..1e27a3a
--- /dev/null
+++ b/src/components/EmailItem/styles.module.css
@@ -0,0 +1,7 @@
+.container {
+  color: #fff;
+  font-size: 14px;
+  text-align: center;
+  /* display: block;
+    width: 100%; */
+}
diff --git a/src/components/EmailsList/styles.module.css b/src/components/EmailsList/styles.module.css
new file mode 100644
index 0000000..8d2d43b
--- /dev/null
+++ b/src/components/EmailsList/styles.module.css
@@ -0,0 +1,34 @@
+.container {
+  width: 100%;
+  height: 100%;
+  background-color: #adadad;
+  border-radius: 7px;
+  padding: 6px 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #494747;
+}
+
+.emails-container {
+  width: 100%;
+  flex-grow: 3;
+  padding: 8px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  gap: 10px;
+}
+
+.hidden {
+    transition: all 1s ease;
+    margin-top: -26px;
+    opacity: 0;
+    will-change: margin-top, opacity;
+}
diff --git a/src/components/ErrorText/index.tsx b/src/components/ErrorText/index.tsx
index 642406d..375067f 100644
--- a/src/components/ErrorText/index.tsx
+++ b/src/components/ErrorText/index.tsx
@@ -7,7 +7,7 @@ type ErrorTextProps = {
 }
 
 function ErrorText({ message, isShown, size }: ErrorTextProps): JSX.Element {
-  const classNames = ['error-text', isShown ? 'error--shown' : '', size ? `error--${size}` : '']
+  const classNames = ['error-text', isShown ? 'error--shown' : 'error--hide', size ? `error--${size}` : '']
   return (
     <p className={classNames.filter(Boolean).join(' ')}>
       {message}
diff --git a/src/components/ErrorText/styles.css b/src/components/ErrorText/styles.css
index 15fb37a..1452b1f 100644
--- a/src/components/ErrorText/styles.css
+++ b/src/components/ErrorText/styles.css
@@ -14,6 +14,10 @@
   transform: translateY(6px);
 }
 
+.error--hide {
+  display: none;
+}
+
 .error--small {
   font-size: 12px;
 }