Update currency and price formats

aelassas · Apr 16, 2024 · 75a78cd · 75a78cd
1 parent 28b0834
commit 75a78cd
Show file tree

Hide file tree

Showing 26 changed files with 170 additions and 99 deletions.
diff --git a/backend/src/common/helper.ts b/backend/src/common/helper.ts
@@ -310,33 +310,37 @@ export const getDaysShort = (days: number) => `${days} ${strings.PRICE_DAYS_PART
  * Get cancellation label.
  *
  * @param {number} cancellation
- * @param {boolean} fr
+ * @param {string} language
  * @returns {string}
  */
-export const getCancellation = (cancellation: number, fr: boolean) => {
+export const getCancellation = (cancellation: number, language: string) => {
+  const fr = movininHelper.isFrench(language)
+
   if (cancellation === -1) {
     return `${strings.CANCELLATION}${fr ? ' : ' : ': '}${strings.UNAVAILABLE}`
   } if (cancellation === 0) {
     return `${strings.CANCELLATION}${fr ? ' : ' : ': '}${strings.INCLUDED}${fr ? 'e' : ''}`
   }
-  return `${strings.CANCELLATION}${fr ? ' : ' : ': '}${movininHelper.formatNumber(cancellation)} ${commonStrings.CURRENCY}`
+  return `${strings.CANCELLATION}${fr ? ' : ' : ': '}${movininHelper.formatPrice(cancellation, commonStrings.CURRENCY, language)}`
 }
 
 /**
  * Get cancellation option label.
  *
  * @param {number} cancellation
- * @param {boolean} fr
+ * @param {string} language
  * @param {boolean} hidePlus
  * @returns {string}
  */
-export const getCancellationOption = (cancellation: number, fr: boolean, hidePlus: boolean) => {
+export const getCancellationOption = (cancellation: number, language: string, hidePlus: boolean) => {
+  const fr = movininHelper.isFrench(language)
+
   if (cancellation === -1) {
     return strings.UNAVAILABLE
   } if (cancellation === 0) {
     return `${strings.INCLUDED}${fr ? 'e' : ''}`
   }
-  return `${hidePlus ? '' : '+ '}${cancellation} ${commonStrings.CURRENCY}`
+  return `${hidePlus ? '' : '+ '}${movininHelper.formatPrice(cancellation, commonStrings.CURRENCY, language)}`
 }
 
 /**
@@ -433,7 +437,8 @@ export const rentalTermUnit = (term: movininTypes.RentalTerm): string => {
  * Get price label.
  *
  * @param {movininTypes.Property} property
+ * @param {string} language
  * @returns {string}
  */
-export const priceLabel = (property: movininTypes.Property): string =>
-  `${movininHelper.formatNumber(property.price)} ${commonStrings.CURRENCY}/${rentalTermUnit(property.rentalTerm)}`
+export const priceLabel = (property: movininTypes.Property, language: string): string =>
+  `${movininHelper.formatPrice(property.price, commonStrings.CURRENCY, language)}/${rentalTermUnit(property.rentalTerm)}`
diff --git a/backend/src/components/BookingList.tsx b/backend/src/components/BookingList.tsx
@@ -243,7 +243,7 @@ const BookingList = ({
         headerName: strings.PRICE,
         flex: 1,
         renderCell: ({ value }: GridRenderCellParams<movininTypes.Booking, string>) => <span className="bp">{value}</span>,
-        valueGetter: (value: number) => `${movininHelper.formatNumber(value)} ${commonStrings.CURRENCY}`,
+        valueGetter: (value: number) => movininHelper.formatPrice(value, commonStrings.CURRENCY, language as string),
       },
       {
         field: 'status',
@@ -550,7 +550,7 @@ const BookingList = ({
                           <div className="extra">
                             <CheckIcon className="extra-icon" />
                             <span className="extra-title">{csStrings.CANCELLATION}</span>
-                            <span className="extra-text">{helper.getCancellationOption((booking.property as movininTypes.Property).cancellation, _fr, true)}</span>
+                            <span className="extra-text">{helper.getCancellationOption((booking.property as movininTypes.Property).cancellation, language as string, true)}</span>
                           </div>
                         )}
 
@@ -560,7 +560,7 @@ const BookingList = ({
 
                   <div className="booking-detail" style={{ height: bookingDetailHeight }}>
                     <span className="booking-detail-title">{strings.COST}</span>
-                    <div className="booking-detail-value booking-price">{`${movininHelper.formatNumber(booking.price)} ${commonStrings.CURRENCY}`}</div>
+                    <div className="booking-detail-value booking-price">{movininHelper.formatPrice(booking.price as number, commonStrings.CURRENCY, language as string)}</div>
                   </div>
 
                   <div className="bs-buttons">

diff --git a/backend/src/components/PropertyInfo.tsx b/backend/src/components/PropertyInfo.tsx
@@ -36,6 +36,7 @@ interface PropertyInfoProps {
   booking?: movininTypes.Booking
   description?: boolean
   className?: string
+  language: string
 }
 
 const PropertyInfo = ({
@@ -44,6 +45,7 @@ const PropertyInfo = ({
   booking,
   description,
   className,
+  language,
 }: PropertyInfoProps) => {
   const fr = movininHelper.fr(user)
   const edit = helper.admin(user) || (user?._id === property.agency._id)
@@ -63,7 +65,7 @@ const PropertyInfo = ({
         : <InfoIcon className="extra-info" />
   }
 
-  const size = `${property.size} ${env.SIZE_UNIT}`
+  const size = `${movininHelper.formatNumber(property.size as number, language)} ${env.SIZE_UNIT}`
 
   return (
     (property && user
@@ -159,10 +161,10 @@ const PropertyInfo = ({
               )
             }
             <li>
-              <Tooltip title={booking ? '' : property.cancellation > -1 ? strings.CANCELLATION_TOOLTIP : helper.getCancellation(property.cancellation, fr)} placement="left">
+              <Tooltip title={booking ? '' : property.cancellation > -1 ? strings.CANCELLATION_TOOLTIP : helper.getCancellation(property.cancellation, language)} placement="left">
                 <div className="property-info-list-item">
                   {getExtraIcon('cancellation', property.cancellation)}
-                  <span className="property-info-list-text">{helper.getCancellation(property.cancellation, fr)}</span>
+                  <span className="property-info-list-text">{helper.getCancellation(property.cancellation, language)}</span>
                 </div>
               </Tooltip>
             </li>

diff --git a/backend/src/components/PropertyList.tsx b/backend/src/components/PropertyList.tsx
@@ -315,14 +315,15 @@ const PropertyList = ({
                       user={user}
                       booking={booking}
                       className="property-info"
+                      language={language}
                       description
                     />
                   </div>
 
                   <div className="right-panel">
                     {!hidePrice && (
                       <div className="price">
-                        {helper.priceLabel(property)}
+                        {helper.priceLabel(property, language)}
                       </div>
                     )}
 

diff --git a/backend/src/lang/common.ts b/backend/src/lang/common.ts
@@ -30,7 +30,7 @@ const strings = new LocalizedStrings({
     SAVE: 'Sauvegarder',
     CANCEL: 'Annuler',
     RESET_PASSWORD: 'Changer le mot de passe',
-    CURRENCY: '€',
+    CURRENCY: '$',
     DELETE_AVATAR_CONFIRM: 'Êtes-vous sûr de vouloir supprimer la photo ?',
     DELETE_IMAGE: "Supprimer l'image",
     UPLOAD_IMAGE: 'Charger une image',
@@ -103,7 +103,7 @@ const strings = new LocalizedStrings({
     SAVE: 'Save',
     CANCEL: 'Cancel',
     RESET_PASSWORD: 'Change Password',
-    CURRENCY: '€',
+    CURRENCY: '$',
     DELETE_AVATAR_CONFIRM: 'Are you sure you want to delete the picture?',
     UPLOAD_IMAGE: 'Upload image',
     DELETE_IMAGE: 'Delete image',

diff --git a/backend/src/pages/Property.tsx b/backend/src/pages/Property.tsx
@@ -40,9 +40,10 @@ const Property = () => {
   const [images, setImages] = useState<string[]>([])
   const [currentIndex, setCurrentIndex] = useState(0)
   const [openImageDialog, setOpenImageDialog] = useState(false)
-
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false)
   const [openInfoDialog, setOpenInfoDialog] = useState(false)
+  const [language, setLanguage] = useState(env.DEFAULT_LANGUAGE)
+
   const edit = helper.admin(user) || (user?._id === property?.agency._id)
 
   useEffect(() => {
@@ -61,6 +62,7 @@ const Property = () => {
     if (_user && _user.verified) {
       setLoading(true)
       setUser(_user)
+      setLanguage(_user.language as string)
 
       const params = new URLSearchParams(window.location.search)
       if (params.has('p')) {
@@ -136,11 +138,12 @@ const Property = () => {
                 <div className="right-panel">
                   <div className="right-panel-header">
                     <div className="name"><h2>{property.name}</h2></div>
-                    <div className="price">{helper.priceLabel(property)}</div>
+                    <div className="price">{helper.priceLabel(property, language)}</div>
                   </div>
                   <PropertyInfo
                     property={property}
                     user={user}
+                    language={language}
                   />
                 </div>
               </div>

diff --git a/backend/src/pages/PropertyBookings.tsx b/backend/src/pages/PropertyBookings.tsx
@@ -44,6 +44,7 @@ const PropertyBookings = () => {
   const [agencies, setAgencies] = useState<string[]>([])
   const [offset, setOffset] = useState(0)
   const [openInfoDialog, setOpenInfoDialog] = useState(false)
+  const [language, setLanguage] = useState(env.DEFAULT_LANGUAGE)
 
   const statuses = helper.getBookingStatuses().map((status) => status.value)
 
@@ -76,10 +77,12 @@ const PropertyBookings = () => {
 
   const onLoad = async (_user?: movininTypes.User) => {
     setLoading(true)
-    setUser(_user)
 
     const params = new URLSearchParams(window.location.search)
     if (_user && _user.verified && params.has('p')) {
+      setUser(_user)
+      setLanguage(_user?.language as string)
+
       const id = params.get('p')
       if (id && id !== '') {
         try {
@@ -139,11 +142,12 @@ const PropertyBookings = () => {
               </div>
               <div className="name"><h2>{property.name}</h2></div>
               <div className="price">
-                {helper.priceLabel(property)}
+                {helper.priceLabel(property, language)}
               </div>
               <PropertyInfo
                 property={property}
                 user={user}
+                language={language}
                 description
               />
             </section>
@@ -201,20 +205,20 @@ const PropertyBookings = () => {
               </Button>
               <Button
                 onClick={async () => {
-                try {
-                  setOpenDeleteDialog(false)
-
-                  const status = await PropertyService.deleteProperty(property._id)
-
-                  if (status === 200) {
-                    navigate('/properties')
-                  } else {
-                    helper.error()
+                  try {
+                    setOpenDeleteDialog(false)
+
+                    const status = await PropertyService.deleteProperty(property._id)
+
+                    if (status === 200) {
+                      navigate('/properties')
+                    } else {
+                      helper.error()
+                    }
+                  } catch (err) {
+                    helper.error(err)
                   }
-                } catch (err) {
-                  helper.error(err)
-                }
-              }}
+                }}
                 variant="contained"
                 color="error"
               >

diff --git a/backend/src/pages/UpdateBooking.tsx b/backend/src/pages/UpdateBooking.tsx
@@ -61,6 +61,7 @@ const UpdateBooking = () => {
   const [status, setStatus] = useState<movininTypes.BookingStatus>()
   const [cancellation, setCancellation] = useState(false)
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false)
+  const [language, setLanguage] = useState(env.DEFAULT_LANGUAGE)
 
   const handleAgencyChange = (values: movininTypes.Option[]) => {
     setAgency(values.length > 0 ? values[0] : undefined)
@@ -209,8 +210,9 @@ const UpdateBooking = () => {
 
   const onLoad = async (_user?: movininTypes.User) => {
     if (_user) {
-      setUser(_user)
       setLoading(true)
+      setUser(_user)
+      setLanguage(_user.language as string)
 
       const params = new URLSearchParams(window.location.search)
       if (params.has('b')) {
@@ -437,8 +439,8 @@ const UpdateBooking = () => {
             <div className="col-2-header">
               <div className="price">
                 <span className="price-days">{helper.getDays(days)}</span>
-                <span className="price-main">{`${movininHelper.formatNumber(price ?? 0)} ${commonStrings.CURRENCY}`}</span>
-                <span className="price-day">{`${csStrings.PRICE_PER_DAY} ${Math.floor((price ?? 0) / days)} ${commonStrings.CURRENCY}`}</span>
+                <span className="price-main">{`${movininHelper.formatPrice(price as number, commonStrings.CURRENCY, language)}`}</span>
+                <span className="price-day">{`${csStrings.PRICE_PER_DAY} ${movininHelper.formatPrice(Math.floor((price as number) / days), commonStrings.CURRENCY, language)}`}</span>
               </div>
             </div>
             <PropertyList

diff --git a/frontend/src/common/helper.ts b/frontend/src/common/helper.ts
@@ -235,33 +235,37 @@ export const getDaysShort = (days: number) => `${days} ${strings.PRICE_DAYS_PART
  * Get cancellation label.
  *
  * @param {number} cancellation
- * @param {boolean} fr
+ * @param {string} language
  * @returns {string}
  */
-export const getCancellation = (cancellation: number, fr: boolean) => {
+export const getCancellation = (cancellation: number, language: string) => {
+  const fr = movininHelper.isFrench(language)
+
   if (cancellation === -1) {
     return `${strings.CANCELLATION}${fr ? ' : ' : ': '}${strings.UNAVAILABLE}`
   } if (cancellation === 0) {
     return `${strings.CANCELLATION}${fr ? ' : ' : ': '}${strings.INCLUDED}${fr ? 'e' : ''}`
   }
-  return `${strings.CANCELLATION}${fr ? ' : ' : ': '}${movininHelper.formatNumber(cancellation)} ${commonStrings.CURRENCY}`
+  return `${strings.CANCELLATION}${fr ? ' : ' : ': '}${movininHelper.formatPrice(cancellation, commonStrings.CURRENCY, language)}`
 }
 
 /**
  * Get cancellation option label.
  *
  * @param {number} cancellation
- * @param {boolean} fr
+ * @param {string} language
  * @param {?boolean} [hidePlus]
  * @returns {string}
  */
-export const getCancellationOption = (cancellation: number, fr: boolean, hidePlus?: boolean) => {
+export const getCancellationOption = (cancellation: number, language: string, hidePlus?: boolean) => {
+  const fr = movininHelper.isFrench(language)
+
   if (cancellation === -1) {
     return strings.UNAVAILABLE
   } if (cancellation === 0) {
     return `${strings.INCLUDED}${fr ? 'e' : ''}`
   }
-  return `${hidePlus ? '' : '+ '}${cancellation} ${commonStrings.CURRENCY}`
+  return `${hidePlus ? '' : '+ '}${movininHelper.formatPrice(cancellation, commonStrings.CURRENCY, language)}`
 }
 
 /**
@@ -358,7 +362,8 @@ export const rentalTermUnit = (term: movininTypes.RentalTerm): string => {
  * Get price label.
  *
  * @param {movininTypes.Property} property
+ * @param {string} language
  * @returns {string}
  */
-export const priceLabel = (property: movininTypes.Property): string =>
-  `${movininHelper.formatNumber(property.price)} ${commonStrings.CURRENCY}/${rentalTermUnit(property.rentalTerm)}`
+export const priceLabel = (property: movininTypes.Property, language: string): string =>
+  `${movininHelper.formatPrice(property.price, commonStrings.CURRENCY, language)}/${rentalTermUnit(property.rentalTerm)}`
diff --git a/frontend/src/components/BookingList.tsx b/frontend/src/components/BookingList.tsx
@@ -229,7 +229,7 @@ const BookingList = ({
         headerName: strings.PRICE,
         flex: 1,
         renderCell: ({ value }: GridRenderCellParams<movininTypes.Booking, string>) => <span className="bp">{value}</span>,
-        valueGetter: (value: number) => `${movininHelper.formatNumber(value)} ${commonStrings.CURRENCY}`,
+        valueGetter: (value: number) => movininHelper.formatPrice(value, commonStrings.CURRENCY, language as string),
       },
       {
         field: 'status',
@@ -459,7 +459,7 @@ const BookingList = ({
                           <div className="extra">
                             <CheckIcon className="extra-icon" />
                             <span className="extra-title">{csStrings.CANCELLATION}</span>
-                            <span className="extra-text">{helper.getCancellationOption((booking.property as movininTypes.Property).cancellation, _fr, true)}</span>
+                            <span className="extra-text">{helper.getCancellationOption((booking.property as movininTypes.Property).cancellation, language as string, true)}</span>
                           </div>
                         )}
 
@@ -469,7 +469,7 @@ const BookingList = ({
 
                   <div className="booking-detail" style={{ height: bookingDetailHeight }}>
                     <span className="booking-detail-title">{strings.COST}</span>
-                    <div className="booking-detail-value booking-price">{`${movininHelper.formatNumber(booking.price)} ${commonStrings.CURRENCY}`}</div>
+                    <div className="booking-detail-value booking-price">{movininHelper.formatPrice(booking.price as number, commonStrings.CURRENCY, language as string)}</div>
                   </div>
 
                   <div className="bs-buttons">