feat: add price list page

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)

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

src/components/EmailItem/styles.module.css

@@ -0,0 +1,7 @@
+.container {
+  color: #fff;
+  font-size: 14px;
+  text-align: center;
+  /* display: block;
+    width: 100%; */
+}

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;
+}

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}

src/components/ErrorText/styles.css

@@ -14,6 +14,10 @@
   transform: translateY(6px);
 }
 
+.error--hide {
+  display: none;
+}
+
 .error--small {
   font-size: 12px;
 }