Update car range labels and implement helper functions for consistent…

… display
aelassas · Jan 23, 2025 · f8c4603 · f8c4603
1 parent 8dc1159
commit f8c4603
Show file tree

Hide file tree

Showing 15 changed files with 140 additions and 37 deletions.
diff --git a/backend/src/assets/css/car-range-filter.css b/backend/src/assets/css/car-range-filter.css
@@ -12,7 +12,7 @@ div.range-filter div.filter-elements div.filter-element span {
   cursor: pointer;
   font-size: 12px;
   font-weight: 400;
-  text-transform: uppercase;
+  /* text-transform: uppercase; */
 }
 
 div.range-filter div.filter-actions {

diff --git a/backend/src/common/helper.ts b/backend/src/common/helper.ts
@@ -790,3 +790,28 @@ export const downloadURI = (uri: string, name: string = '') => {
   link.click()
   link.remove()
 }
+
+/**
+ * Get car range label.
+ *
+ * @param {string} range
+ * @returns {string}
+ */
+export const getCarRange = (range: bookcarsTypes.CarRange) => {
+  switch (range) {
+    case bookcarsTypes.CarRange.Mini:
+      return strings.CAR_RANGE_MINI
+
+    case bookcarsTypes.CarRange.Midi:
+      return strings.CAR_RANGE_MIDI
+
+    case bookcarsTypes.CarRange.Maxi:
+      return strings.CAR_RANGE_MAXI
+
+    case bookcarsTypes.CarRange.Scooter:
+      return strings.CAR_RANGE_SCOOTER
+
+    default:
+      return ''
+  }
+}
diff --git a/backend/src/components/CarRangeFilter.tsx b/backend/src/components/CarRangeFilter.tsx
@@ -3,6 +3,7 @@ import * as bookcarsTypes from ':bookcars-types'
 import * as bookcarsHelper from ':bookcars-helper'
 import { strings as commonStrings } from '@/lang/common'
 import { strings } from '@/lang/car-range-filter'
+import * as helper from '@/common/helper'
 import Accordion from './Accordion'
 
 import '@/assets/css/car-range-filter.css'
@@ -219,7 +220,7 @@ const CarRangeFilter = ({
             role="button"
             tabIndex={0}
           >
-            {strings.MINI}
+            {helper.getCarRange(bookcarsTypes.CarRange.Mini)}
           </span>
         </div>
         <div className="filter-element">
@@ -229,7 +230,7 @@ const CarRangeFilter = ({
             role="button"
             tabIndex={0}
           >
-            {strings.MIDI}
+            {helper.getCarRange(bookcarsTypes.CarRange.Midi)}
           </span>
         </div>
         <div className="filter-element">
@@ -239,7 +240,7 @@ const CarRangeFilter = ({
             role="button"
             tabIndex={0}
           >
-            {strings.MAXI}
+            {helper.getCarRange(bookcarsTypes.CarRange.Maxi)}
           </span>
         </div>
         <div className="filter-element">
@@ -249,7 +250,7 @@ const CarRangeFilter = ({
             role="button"
             tabIndex={0}
           >
-            {strings.SCOOTER}
+            {helper.getCarRange(bookcarsTypes.CarRange.Scooter)}
           </span>
         </div>
       </div>

diff --git a/backend/src/components/CarRangeList.tsx b/backend/src/components/CarRangeList.tsx
@@ -6,6 +6,7 @@ import {
   SelectChangeEvent
 } from '@mui/material'
 import * as bookcarsTypes from ':bookcars-types'
+import * as helper from '@/common/helper'
 
 interface CarRangeListProps {
   value?: string
@@ -29,7 +30,6 @@ const CarRangeList = ({
   }, [carRangeValue])
 
   const handleChange = (e: SelectChangeEvent<string>) => {
-    console.log(e.target.value)
     const _value = e.target.value || ''
     setValue(_value)
 
@@ -42,10 +42,10 @@ const CarRangeList = ({
     <div>
       <InputLabel className={required ? 'required' : ''}>{label}</InputLabel>
       <Select label={label} value={value} onChange={handleChange} variant={variant || 'standard'} required={required} fullWidth>
-        <MenuItem value={bookcarsTypes.CarRange.Mini}>MINI</MenuItem>
-        <MenuItem value={bookcarsTypes.CarRange.Midi}>MIDI</MenuItem>
-        <MenuItem value={bookcarsTypes.CarRange.Maxi}>MAXI</MenuItem>
-        <MenuItem value={bookcarsTypes.CarRange.Scooter}>SCOOTER</MenuItem>
+        <MenuItem value={bookcarsTypes.CarRange.Mini}>{helper.getCarRange(bookcarsTypes.CarRange.Mini)}</MenuItem>
+        <MenuItem value={bookcarsTypes.CarRange.Midi}>{helper.getCarRange(bookcarsTypes.CarRange.Midi)}</MenuItem>
+        <MenuItem value={bookcarsTypes.CarRange.Maxi}>{helper.getCarRange(bookcarsTypes.CarRange.Maxi)}</MenuItem>
+        <MenuItem value={bookcarsTypes.CarRange.Scooter}>{helper.getCarRange(bookcarsTypes.CarRange.Scooter)}</MenuItem>
       </Select>
     </div>
   )

diff --git a/backend/src/lang/cars.ts b/backend/src/lang/cars.ts
@@ -87,6 +87,10 @@ const strings = new LocalizedStrings({
     CO2: 'Effet CO2',
     COMING_SOON: 'Bientôt Disponible',
     FULLY_BOOKED: 'Déjà réservée',
+    CAR_RANGE_MINI: 'Voiture',
+    CAR_RANGE_MIDI: 'SUV',
+    CAR_RANGE_MAXI: 'Fourgon',
+    CAR_RANGE_SCOOTER: 'Scooter',
   },
   en: {
     NEW_CAR: 'New car',
@@ -168,6 +172,10 @@ const strings = new LocalizedStrings({
     CO2: 'CO2 effect',
     COMING_SOON: 'Coming Soon',
     FULLY_BOOKED: 'Fully Booked',
+    CAR_RANGE_MINI: 'Car',
+    CAR_RANGE_MIDI: 'SUV',
+    CAR_RANGE_MAXI: 'Van',
+    CAR_RANGE_SCOOTER: 'Scooter',
   },
   es: {
     NEW_CAR: 'Nuevo coche',
@@ -248,6 +256,10 @@ const strings = new LocalizedStrings({
     CO2: 'Efecto CO2',
     COMING_SOON: 'Próximamente',
     FULLY_BOOKED: 'Ya Reservado',
+    CAR_RANGE_MINI: 'Auto',
+    CAR_RANGE_MIDI: 'Todoterreno',
+    CAR_RANGE_MAXI: 'furgoneta',
+    CAR_RANGE_SCOOTER: 'Scooter',
   },
 })
 

diff --git a/frontend/src/assets/css/car-range-filter.css b/frontend/src/assets/css/car-range-filter.css
@@ -12,7 +12,7 @@ div.range-filter div.filter-elements div.filter-element span {
   cursor: pointer;
   font-size: 12px;
   font-weight: 400;
-  text-transform: uppercase;
+  /* text-transform: uppercase; */
 }
 
 div.range-filter div.filter-actions {

diff --git a/frontend/src/common/helper.ts b/frontend/src/common/helper.ts
@@ -670,3 +670,28 @@ export const verifyReCaptcha = async (token: string): Promise<boolean> => {
     return false
   }
 }
+
+/**
+ * Get car range label.
+ *
+ * @param {string} range
+ * @returns {string}
+ */
+export const getCarRange = (range: bookcarsTypes.CarRange) => {
+  switch (range) {
+    case bookcarsTypes.CarRange.Mini:
+      return strings.CAR_RANGE_MINI
+
+    case bookcarsTypes.CarRange.Midi:
+      return strings.CAR_RANGE_MIDI
+
+    case bookcarsTypes.CarRange.Maxi:
+      return strings.CAR_RANGE_MAXI
+
+    case bookcarsTypes.CarRange.Scooter:
+      return strings.CAR_RANGE_SCOOTER
+
+    default:
+      return ''
+  }
+}
diff --git a/frontend/src/components/CarRangeFilter.tsx b/frontend/src/components/CarRangeFilter.tsx
@@ -3,6 +3,7 @@ import * as bookcarsTypes from ':bookcars-types'
 import * as bookcarsHelper from ':bookcars-helper'
 import { strings as commonStrings } from '@/lang/common'
 import { strings } from '@/lang/car-range-filter'
+import * as helper from '@/common/helper'
 import Accordion from './Accordion'
 
 import '@/assets/css/car-range-filter.css'
@@ -219,7 +220,7 @@ const CarRangeFilter = ({
             role="button"
             tabIndex={0}
           >
-            {strings.MINI}
+            {helper.getCarRange(bookcarsTypes.CarRange.Mini)}
           </span>
         </div>
         <div className="filter-element">
@@ -229,7 +230,7 @@ const CarRangeFilter = ({
             role="button"
             tabIndex={0}
           >
-            {strings.MIDI}
+            {helper.getCarRange(bookcarsTypes.CarRange.Midi)}
           </span>
         </div>
         <div className="filter-element">
@@ -239,7 +240,7 @@ const CarRangeFilter = ({
             role="button"
             tabIndex={0}
           >
-            {strings.MAXI}
+            {helper.getCarRange(bookcarsTypes.CarRange.Maxi)}
           </span>
         </div>
         <div className="filter-element">
@@ -249,7 +250,7 @@ const CarRangeFilter = ({
             role="button"
             tabIndex={0}
           >
-            {strings.SCOOTER}
+            {helper.getCarRange(bookcarsTypes.CarRange.Scooter)}
           </span>
         </div>
       </div>

diff --git a/frontend/src/lang/cars.ts b/frontend/src/lang/cars.ts
@@ -92,6 +92,10 @@ const strings = new LocalizedStrings({
     DETAILS: 'Détails',
     FULLY_BOOKED: 'Déjà Réservée',
     COMING_SOON: 'Bientôt Disponible',
+    CAR_RANGE_MINI: 'Voiture',
+    CAR_RANGE_MIDI: 'SUV',
+    CAR_RANGE_MAXI: 'Fourgon',
+    CAR_RANGE_SCOOTER: 'Scooter',
   },
   en: {
     NEW_CAR: 'New car',
@@ -175,6 +179,10 @@ const strings = new LocalizedStrings({
     DETAILS: 'Details',
     FULLY_BOOKED: 'Fully Booked',
     COMING_SOON: 'Coming Soon',
+    CAR_RANGE_MINI: 'Car',
+    CAR_RANGE_MIDI: 'SUV',
+    CAR_RANGE_MAXI: 'Van',
+    CAR_RANGE_SCOOTER: 'Scooter',
   },
   es: {
     NEW_CAR: 'Coche nuevo',
@@ -258,6 +266,10 @@ const strings = new LocalizedStrings({
     DETAILS: 'Detalles',
     FULLY_BOOKED: 'Ya Reservado',
     COMING_SOON: 'Próximamente',
+    CAR_RANGE_MINI: 'Auto',
+    CAR_RANGE_MIDI: 'Todoterreno',
+    CAR_RANGE_MAXI: 'furgoneta',
+    CAR_RANGE_SCOOTER: 'Scooter',
   }
 })
 

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -25,6 +25,7 @@ import * as bookcarsTypes from ':bookcars-types'
 import * as bookcarsHelper from ':bookcars-helper'
 import env from '@/config/env.config'
 import { strings as commonStrings } from '@/lang/common'
+import { strings as carsStrings } from '@/lang/cars'
 import { strings } from '@/lang/home'
 import * as UserService from '@/services/UserService'
 import * as SupplierService from '@/services/SupplierService'
@@ -64,8 +65,8 @@ const Home = () => {
   const [miniPricePday, setMiniPricePday] = useState(40)
   const [midiPricePhr, setMidiPricePhr] = useState(3.5)
   const [midiPricePday, setMidiPricePday] = useState(50)
-  const [maxiPricePhr, setMaxiPricePhr] = useState(3.5)
-  const [maxiPricePday, setMaxiPricePday] = useState(50)
+  const [maxiPricePhr, setMaxiPricePhr] = useState(4.5)
+  const [maxiPricePday, setMaxiPricePday] = useState(80)
 
   useEffect(() => {
     const init = async () => {
@@ -345,7 +346,7 @@ const Home = () => {
                   )}
                   label={strings.MINI}
                 /> */}
-                <span>{strings.MINI}</span>
+                <span>{carsStrings.CAR_RANGE_MINI}</span>
                 <ul>
                   <li>
                     <span className="price">{bookcarsHelper.formatPrice(miniPricePhr, commonStrings.CURRENCY, language)}</span>
@@ -394,7 +395,7 @@ const Home = () => {
                   )}
                   label={strings.MIDI}
                 /> */}
-                <span>{strings.MIDI}</span>
+                <span>{carsStrings.CAR_RANGE_MIDI}</span>
                 <ul>
                   <li>
                     <span className="price">{bookcarsHelper.formatPrice(midiPricePhr, commonStrings.CURRENCY, language)}</span>
@@ -442,7 +443,7 @@ const Home = () => {
                   )}
                   label={strings.MAXI}
                 /> */}
-                <span>{strings.MAXI}</span>
+                <span>{carsStrings.CAR_RANGE_MAXI}</span>
                 <ul>
                   <li>
                     <span className="price">{bookcarsHelper.formatPrice(maxiPricePhr, commonStrings.CURRENCY, language)}</span>
@@ -488,7 +489,7 @@ const Home = () => {
         <div className="home-map">
           <Map
             title={strings.MAP_TITLE}
-            position={new L.LatLng(34.0268755, 1.6528399999999976)}
+            position={new L.LatLng(-37.840935, 144.946457)}
             initialZoom={5}
             locations={locations}
             onSelelectPickUpLocation={async (locationId) => {

diff --git a/mobile/common/helper.ts b/mobile/common/helper.ts
@@ -775,3 +775,28 @@ export const getDepositFilterValue = async (language: string, value: DepositFilt
       return `Less than ${isCurrencyRTL ? currency : ''}${depositFilterValue}${!isCurrencyRTL ? (` ${currency}`) : ''}`
   }
 }
+
+/**
+ * Get fuel policy label.
+ *
+ * @param {string} range
+ * @returns {string}
+ */
+export const getCarRange = (range: bookcarsTypes.CarRange) => {
+  switch (range) {
+    case bookcarsTypes.CarRange.Mini:
+      return i18n.t('CAR_RANGE_MINI')
+
+    case bookcarsTypes.CarRange.Midi:
+      return i18n.t('CAR_RANGE_MIDI')
+
+    case bookcarsTypes.CarRange.Maxi:
+      return i18n.t('CAR_RANGE_MAXI')
+
+    case bookcarsTypes.CarRange.Scooter:
+      return i18n.t('CAR_RANGE_SCOOTER')
+
+    default:
+      return ''
+  }
+}
diff --git a/mobile/components/CarRangeFilter.tsx b/mobile/components/CarRangeFilter.tsx
@@ -3,6 +3,7 @@ import { StyleSheet, View } from 'react-native'
 import * as bookcarsTypes from ':bookcars-types'
 import * as bookcarsHelper from ':bookcars-helper'
 
+import * as helper from '@/common/helper'
 import i18n from '@/lang/i18n'
 import Accordion from './Accordion'
 import Link from './Link'
@@ -131,10 +132,10 @@ const CarRangeFilter = ({
       <View style={{ ...styles.container, ...style }}>
         <Accordion style={styles.accordion} title={i18n.t('CAR_RANGE')}>
           <View style={styles.contentContainer}>
-            <Switch style={styles.component} textStyle={styles.text} value={mini} label={i18n.t('CAR_RANGE_MINI')} onValueChange={onValueChangeMini} />
-            <Switch style={styles.component} textStyle={styles.text} value={midi} label={i18n.t('CAR_RANGE_MIDI')} onValueChange={onValueChangeMidi} />
-            <Switch style={styles.component} textStyle={styles.text} value={maxi} label={i18n.t('CAR_RANGE_MAXI')} onValueChange={onValueChangeMaxi} />
-            <Switch style={styles.component} textStyle={styles.text} value={scooter} label={i18n.t('CAR_RANGE_SCOOTER')} onValueChange={onValueChangeScooter} />
+            <Switch style={styles.component} textStyle={styles.text} value={mini} label={helper.getCarRange(bookcarsTypes.CarRange.Mini)} onValueChange={onValueChangeMini} />
+            <Switch style={styles.component} textStyle={styles.text} value={midi} label={helper.getCarRange(bookcarsTypes.CarRange.Midi)} onValueChange={onValueChangeMidi} />
+            <Switch style={styles.component} textStyle={styles.text} value={maxi} label={helper.getCarRange(bookcarsTypes.CarRange.Maxi)} onValueChange={onValueChangeMaxi} />
+            <Switch style={styles.component} textStyle={styles.text} value={scooter} label={helper.getCarRange(bookcarsTypes.CarRange.Scooter)} onValueChange={onValueChangeScooter} />
           </View>
           <Link
             style={styles.link}

diff --git a/mobile/lang/en.ts b/mobile/lang/en.ts
@@ -205,10 +205,10 @@ export const en = {
   LOGIN_ERROR: 'Authentication failed.',
   OR: 'or',
   CAR_RANGE: 'Range',
-  CAR_RANGE_MINI: 'MINI',
-  CAR_RANGE_MIDI: 'MIDI',
-  CAR_RANGE_MAXI: 'MAXI',
-  CAR_RANGE_SCOOTER: 'SCOOTER',
+  CAR_RANGE_MINI: 'Car',
+  CAR_RANGE_MIDI: 'SUV',
+  CAR_RANGE_MAXI: 'Van',
+  CAR_RANGE_SCOOTER: 'Scooter',
   CAR_MULTIMEDIA: 'Multimedia',
   CAR_MULTIMEDIA_TOUCHSCREEN: 'Touchscreen',
   CAR_MULTIMEDIA_BLUETOOTH: 'Bluetooth',

diff --git a/mobile/lang/es.ts b/mobile/lang/es.ts
@@ -205,10 +205,10 @@ export const es = {
   LOGIN_ERROR: 'Autenticación fallida.',
   OR: 'o',
   CAR_RANGE: 'Gama',
-  CAR_RANGE_MINI: 'MINI',
-  CAR_RANGE_MIDI: 'MIDI',
-  CAR_RANGE_MAXI: 'MAXI',
-  CAR_RANGE_SCOOTER: 'SCOOTER',
+  CAR_RANGE_MINI: 'Auto',
+  CAR_RANGE_MIDI: 'Todoterreno',
+  CAR_RANGE_MAXI: 'furgoneta',
+  CAR_RANGE_SCOOTER: 'Scooter',
   CAR_MULTIMEDIA: 'Multimedia',
   CAR_MULTIMEDIA_TOUCHSCREEN: 'Pantalla táctil',
   CAR_MULTIMEDIA_BLUETOOTH: 'Bluetooth',