FE fixes (#497)

* VB-451: hide tabs: "Settings", "Messages"

* VB-450: fix localization text

* VB-449: fix price inputs

* VB-447: fix showing date at create auction page, fix localization at datepicker

* VB-447: fix min date of auction ending

Author: voonya

packages/frontend/components/header/burger-menu/profile-dropdown/component.tsx

@@ -47,21 +47,28 @@ export const ProfileDropdown = ({
       cssExtend: styles.option,
     },
     {
-      value: t('common:header.popover.settings'),
-      key: 'Settings',
-      onClick: () => push(`${Routes.PROFILE}${ProfileRoutes.ACCOUNT_SETTINGS}`),
-      cssExtend: styles.option,
-    },
-    {
-      value: t('common:header.popover.messages'),
-      key: 'Messages',
-      onClick: () => push(`${Routes.PROFILE}${ProfileRoutes.MESSAGES}`),
+      value: t('common:header.popover.notifications'),
+      key: 'Notifications',
+      onClick: () => push(`${Routes.PROFILE}${ProfileRoutes.NOTIFICATIONS}`),
       cssExtend: styles.option,
     },
+    // {
+    //   value: t('common:header.popover.settings'),
+    //   key: 'Settings',
+    //   onClick: () => push(`${Routes.PROFILE}${ProfileRoutes.ACCOUNT_SETTINGS}`),
+    //   cssExtend: styles.option,
+    // },
+    // {
+    //   value: t('common:header.popover.messages'),
+    //   key: 'Messages',
+    //   onClick: () => push(`${Routes.PROFILE}${ProfileRoutes.MESSAGES}`),
+    //   cssExtend: styles.option,
+    // },
     {
       value: t('common:header.popover.support'),
       key: 'Support',
-      onClick: () => push(`${Routes.PROFILE}${ProfileRoutes.SUPPORT}`),
+      onClick: () =>
+        (location.href = 'mailto:[email protected]?subject=Support'),
       cssExtend: styles.option,
     },
   ];

packages/frontend/components/header/profile-info/sub-components/popover-content.tsx

@@ -45,15 +45,15 @@ export const PopoverContent = ({ handleClose }: PopoverContentProps) => {
         <Icon icon={IconName.LIST} color={IconColor.YELLOW} />
         <span>{t('common:header.popover.myList')}</span>
       </button>
-      <button
+      {/* <button
         css={styles.popoverContentItem}
         onClick={handleClick}
         path-label={`${Routes.PROFILE}${ProfileRoutes.ACCOUNT_SETTINGS}`}
         data-variant="icon"
       >
         <Icon icon={IconName.SETTINGS} color={IconColor.YELLOW} />
         <span>{t('common:header.popover.settings')}</span>
-      </button>
+      </button> */}
       <button
         css={styles.popoverContentItem}
         onClick={handleClick}
@@ -63,18 +63,20 @@ export const PopoverContent = ({ handleClose }: PopoverContentProps) => {
         <Icon icon={IconName.BELL} color={IconColor.YELLOW} />
         <span>{t('common:header.popover.notifications')}</span>
       </button>
-      <button
+      {/* <button
         css={styles.popoverContentItem}
         onClick={handleClick}
         path-label={`${Routes.PROFILE}${ProfileRoutes.MESSAGES}`}
         data-variant="icon"
       >
         <Icon icon={IconName.MESSAGE} color={IconColor.YELLOW} />
         <span>{t('common:header.popover.messages')}</span>
-      </button>
+    </button> */}
       <button
         css={styles.popoverContentItem}
-        onClick={handleClick}
+        onClick={() =>
+          (location.href = 'mailto:[email protected]?subject=Support')
+        }
         path-label={`${Routes.PROFILE}${ProfileRoutes.SUPPORT}`}
         data-variant="icon"
       >

packages/frontend/components/primitives/input/date-input.tsx

@@ -8,7 +8,7 @@ import * as styles from './styles';
 
 import 'react-datepicker/dist/react-datepicker.css';
 
-export const SECONDS_IN_ONE_DAY = 86400000; // +1 day
+export const MILISECONDS_IN_ONE_DAY = 1000 * 60 * 60 * 24; // +1 day
 
 const InputDate = ({
   value,
@@ -17,6 +17,7 @@ const InputDate = ({
   id,
   label,
   showTimeInput,
+  labelRequiredMark,
   ...props
 }: InputDateProps) => {
   const { locale } = useRouter();
@@ -30,7 +31,7 @@ const InputDate = ({
       month: (n) => months[n],
     },
     formatLong: {
-      date: () => 'mm/dd/yyyy',
+      date: () => 'dd/mm/yyyy',
     },
   };
 
@@ -39,19 +40,22 @@ const InputDate = ({
       {label && (
         <label data-variant={variant} css={styles.label} htmlFor={id}>
           {label}
+          {labelRequiredMark && <span>*</span>}
         </label>
       )}
       <div css={[styles.inputValueWrapper, styles.datePickerWrapper]}>
         <DatePicker
           onFocus={(e) => e.target.blur()}
           selected={new Date(value)}
           css={styles.input}
-          placeholderText={showTimeInput ? 'mm/dd/yyyy hh:mm' : 'mm/dd/yyyy'}
+          placeholderText={'-/-/- -:-'}
           id={id}
           showTimeInput={showTimeInput}
           locale={customLocale as any}
-          minDate={new Date(new Date().getTime() + SECONDS_IN_ONE_DAY)}
+          dateFormat={showTimeInput ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'}
+          minDate={new Date(new Date().getTime() + MILISECONDS_IN_ONE_DAY)}
           calendarStartDay={locale === 'ua' ? 1 : 0}
+          timeInputLabel={t('components.datePicker.time')}
           {...props}
         />
         <div css={styles.iconWrapper}>

packages/frontend/components/primitives/input/types.ts

@@ -33,4 +33,6 @@ export interface InputProps
 export interface InputDateProps
   extends ReactDatePickerProps,
     BaseInputProps,
-    InputStylingProps {}
+    InputStylingProps {
+  labelRequiredMark?: boolean;
+}

packages/frontend/components/profile/user-account-layout/account-links-data.ts

@@ -12,21 +12,21 @@ export const getLinksData = (userId: string): LinkData[] => [
     label: 'account:myList',
     path: `${Routes.PROFILE}${ProfileRoutes.LIST}`,
   },
-  {
-    iconPath: IconName.SETTINGS,
-    label: 'account:settings',
-    path: `${Routes.PROFILE}${ProfileRoutes.ACCOUNT_SETTINGS}`,
-  },
+  // {
+  //   iconPath: IconName.SETTINGS,
+  //   label: 'account:settings',
+  //   path: `${Routes.PROFILE}${ProfileRoutes.ACCOUNT_SETTINGS}`,
+  // },
   {
     iconPath: IconName.BELL,
     label: 'account:notifications',
     path: `${Routes.PROFILE}${ProfileRoutes.NOTIFICATIONS}`,
   },
-  {
-    iconPath: IconName.MESSAGE,
-    label: 'account:messages',
-    path: `${Routes.PROFILE}${ProfileRoutes.MESSAGES}`,
-  },
+  // {
+  //   iconPath: IconName.MESSAGE,
+  //   label: 'account:messages',
+  //   path: `${Routes.PROFILE}${ProfileRoutes.MESSAGES}`,
+  // },
   {
     iconPath: IconName.SUPPORT,
     label: 'account:support',

packages/frontend/components/profile/user-account-layout/component.tsx

@@ -24,6 +24,19 @@ export const AccountLayout: FC<AccountPageProps> = ({ children }) => {
     dispatch(showMakePostModal());
   };
 
+  const getClickHandler = (label: string) => {
+    if (label === 'account:signOut') {
+      return () => dispatch(logoutUser());
+    }
+
+    if (label === 'account:support') {
+      return () =>
+        (location.href = 'mailto:[email protected]?subject=Support');
+    }
+
+    return null;
+  };
+
   return (
     <Layout>
       <Container>
@@ -65,11 +78,7 @@ export const AccountLayout: FC<AccountPageProps> = ({ children }) => {
                       label={tLabel}
                       location={location}
                       path={path}
-                      onClick={
-                        label === 'account:signOut'
-                          ? () => dispatch(logoutUser())
-                          : null
-                      }
+                      onClick={getClickHandler(label)}
                     />
                   );
                 })}

packages/frontend/components/save-post/auction-form.tsx

@@ -174,10 +174,9 @@ export default function ProductForm({ edit }: { edit: boolean }) {
           <div css={styles.inputRow}>
             <Input
               error={errors.recommendedPrice?.message}
-              required
               labelRequiredMark
               id="post-price"
-              type="text"
+              type="number"
               name="price"
               variant="primary"
               label={t('create-post:label.recommendedPrice')}
@@ -203,10 +202,9 @@ export default function ProductForm({ edit }: { edit: boolean }) {
           <div css={styles.inputRow}>
             <Input
               error={errors.minimalBid?.message}
-              required
               labelRequiredMark
               id="post-price"
-              type="text"
+              type="number"
               name="price"
               variant="primary"
               label={t('create-post:label.minimalBid')}
@@ -221,6 +219,7 @@ export default function ProductForm({ edit }: { edit: boolean }) {
           name="endDate"
           render={({ field }) => (
             <InputDate
+              labelRequiredMark
               required
               variant="primary"
               label={t('create-post:label.endDate')}
@@ -230,6 +229,7 @@ export default function ProductForm({ edit }: { edit: boolean }) {
               value={endDate}
               showTimeInput
               onChange={(date) => {
+                console.log(date);
                 setEndDate(date);
                 field.onChange(date);
               }}

packages/frontend/components/save-post/form-utils.ts

@@ -9,7 +9,7 @@ export const initialProductFormState: IPostForms = {
   condition: '',
   title: '',
   description: '',
-  price: 0,
+  price: null,
   currency: 'UAH',
   country: '',
   city: '',
@@ -25,8 +25,8 @@ export const initialAuctionFormState: ICreateAuction = {
   condition: '',
   title: '',
   description: '',
-  recommendedPrice: 0,
-  minimalBid: 0,
+  recommendedPrice: null,
+  minimalBid: null,
   minimalBidCurrency: 'UAH',
   recommendedPriceCurrency: 'UAH',
   currency: 'UAH',

packages/frontend/components/save-post/product-form.tsx

@@ -166,10 +166,10 @@ export default function ProductForm({ edit }: { edit: boolean }) {
           <div css={styles.inputRow}>
             <Input
               error={errors.price?.message}
-              required
+              labelRequiredMark
               tooltip={t('create-post:tooltip.price')}
               id="post-price"
-              type="text"
+              type="number"
               name="price"
               variant="primary"
               label={t('create-post:label.price')}

packages/frontend/public/locales/en/common.json

@@ -113,6 +113,9 @@
     },
     "badge": {
       "removeLabel": "Remove filter {{param}}"
+    },
+    "datePicker": {
+      "time": "Time"
     }
   },
   "notifications": {
@@ -234,4 +237,4 @@
     "seconds": "s",
     "text": "Send reset link"
   }
-}
+}

packages/frontend/public/locales/en/create-post.json

@@ -15,7 +15,7 @@
     "deleteImage": "Delete image"
   },
   "caption": {
-    "uploadPhotos": "You can add to 30 pics"
+    "uploadPhotos": "You can add from 2 up to 30 pics"
   },
   "tooltip": {
     "price": "Make sure that you enter the correct price in digits!",
@@ -90,7 +90,7 @@
       "empty": "Description cannot be empty"
     },
     "price": {
-      "base": "Wrong price format",
+      "base": "Price cannot be empty",
       "empty": "Price cannot be empty"
     },
     "country": {

packages/frontend/public/locales/ua/common.json

@@ -113,6 +113,9 @@
     },
     "badge": {
       "removeLabel": "Видалити фільтр {{param}}"
+    },
+    "datePicker": {
+      "time": "Час"
     }
   },
   "verify": {
@@ -219,4 +222,4 @@
     "seconds": "с",
     "text": "Отримати посилання"
   }
-}
+}

packages/frontend/public/locales/ua/create-post.json

@@ -15,7 +15,7 @@
     "deleteImage": "Видалити зображення"
   },
   "caption": {
-    "uploadPhotos": "Ви можете додати до 30 фотографій"
+    "uploadPhotos": "Ви можете додати від 2 до 30 фотографій"
   },
   "tooltip": {
     "price": "Переконайтеся, що ви ввели ціну цифрами!",
@@ -89,7 +89,7 @@
       "pattern": "Неправильний формат телефону"
     },
     "price": {
-      "base": "Неправильний формат ціни",
+      "base": "Поле з ціною не може бути порожнім",
       "empty": "Поле з ціною не може бути порожнім"
     },
     "country": {
@@ -102,7 +102,7 @@
       "empty": "Стан не може бути порожнім"
     },
     "date": {
-      "base": "Введіть дату після сьогоднішньої"
+      "base": "Введіть дату на день більше сьогоднішньої"
     }
   },
   "sellerSelect": {

packages/frontend/validation-schemas/post/create-auction.ts

@@ -1,5 +1,5 @@
 import { ValidationRanges } from '@vse-bude/shared';
-import { SECONDS_IN_ONE_DAY } from '@components/primitives/input/date-input';
+import { MILISECONDS_IN_ONE_DAY } from '@components/primitives/input/date-input';
 import Joi from 'joi';
 import type { TFunction } from 'next-i18next';
 
@@ -80,7 +80,7 @@ export const createAuctionSchema = (t: TFunction) =>
       .required()
       .messages({
         'number.base': t('create-post:validation.price.base'),
-        'number.empty': t('create-post:validation.price.empty'),
+        'number.required': t('create-post:validation.price.empty'),
       }),
     minimalBid: Joi.number()
       .min(1)
@@ -90,7 +90,7 @@ export const createAuctionSchema = (t: TFunction) =>
         'number.empty': t('create-post:validation.price.empty'),
       }),
     endDate: Joi.date()
-      .min(Date.now() + SECONDS_IN_ONE_DAY)
+      .min(Date.now() + MILISECONDS_IN_ONE_DAY)
       .required()
       .messages({
         'date.min': t('create-post:validation.date.base'),