ordering-ui-admin-external 1.20.0 → 1.20.1

package/_modules/components/Shared/CitySelector/index.js

@@ -34,19 +34,25 @@ var CitySelectorUI = function CitySelectorUI(props) {
     handleChangeCity = props.handleChangeCity,
     position = props.position,
     optionInnerMaxHeight = props.optionInnerMaxHeight;
+  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
     cityOptions = _useState2[0],
     setCityOptions = _useState2[1];
-  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
-    _useLanguage2 = _slicedToArray(_useLanguage, 2),
-    t = _useLanguage2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
   var placeholder = /*#__PURE__*/_react.default.createElement(_styles.PlaceholderTitle, {
     isDefault: isDefault
   }, t('SELECT_CITY', 'Select City'));
   (0, _react.useEffect)(function () {
     if (citiesList !== null && citiesList !== void 0 && citiesList.loading) return;
-    var _cityOptions = citiesList === null || citiesList === void 0 ? void 0 : citiesList.cities.map(function (city) {
+    var _cityOptions = citiesList === null || citiesList === void 0 ? void 0 : citiesList.cities.filter(function (option) {
+      return option === null || option === void 0 ? void 0 : option.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
+    }).map(function (city) {
       return {
         value: city.id,
         content: /*#__PURE__*/_react.default.createElement(_styles.Option, {
@@ -59,7 +65,7 @@ var CitySelectorUI = function CitySelectorUI(props) {
       };
     });
     setCityOptions(_cityOptions);
-  }, [citiesList, isDefault]);
+  }, [citiesList, isDefault, searchValue]);
   (0, _react.useEffect)(function () {
     if (!isAddMode) return;
     if (cityOptions.length === 1) {
@@ -87,6 +93,13 @@ var CitySelectorUI = function CitySelectorUI(props) {
     options: cityOptions,
     onChange: function onChange(city) {
       return handleChangeCity(city);
+    },
+    isShowSearchBar: true,
+    searchBarIsCustomLayout: true,
+    searchBarIsNotLazyLoad: true,
+    searchValue: searchValue,
+    handleChangeSearch: function handleChangeSearch(val) {
+      return setSearchValue(val);
     }
   })));
 };

package/_modules/styles/MultiSelect/index.js

@@ -10,6 +10,7 @@ var _EnChevronDown = _interopRequireDefault(require("@meronex/icons/en/EnChevron
 var _reactBootstrapIcons = require("react-bootstrap-icons");
 var _MdClose = _interopRequireDefault(require("@meronex/icons/md/MdClose"));
 var _Buttons = require("../Buttons");
+var _Shared = require("../../components/Shared");
 var _Selects = require("../Selects");
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,7 +31,13 @@ var MultiSelect = function MultiSelect(props) {
     options = props.options,
     onChange = props.onChange,
     defaultValue = props.defaultValue,
-    className = props.className;
+    className = props.className,
+    isShowSearchBar = props.isShowSearchBar,
+    searchBarIsNotLazyLoad = props.searchBarIsNotLazyLoad,
+    searchBarPlaceholder = props.searchBarPlaceholder,
+    searchBarIsCustomLayout = props.searchBarIsCustomLayout,
+    searchValue = props.searchValue,
+    handleChangeSearch = props.handleChangeSearch;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -59,14 +66,18 @@ var MultiSelect = function MultiSelect(props) {
     }
   };
   (0, _react.useEffect)(function () {
+    if (isShowSearchBar && searchValue) return;
     var _defaultOption = options === null || options === void 0 ? void 0 : options.filter(function (option) {
       return defaultValue.includes(option.value);
     });
     setSelectedOptions(_defaultOption);
     setValues(defaultValue);
-  }, [defaultValue, options]);
+  }, [defaultValue, options, searchValue]);
   (0, _react.useEffect)(function () {
-    if (!open) return;
+    if (!open) {
+      handleChangeSearch && handleChangeSearch('');
+      return;
+    }
     document.addEventListener('click', closeSelect);
     return function () {
       return document.removeEventListener('click', closeSelect);
@@ -119,7 +130,15 @@ var MultiSelect = function MultiSelect(props) {
     isAbsolute: true,
     position: "right",
     ref: dropdownReference
-  }, /*#__PURE__*/_react.default.createElement(_Selects.OptionsInner, {
+  }, isShowSearchBar && /*#__PURE__*/_react.default.createElement(_Selects.SearchBarWrapper, {
+    className: "search-bar-container"
+  }, /*#__PURE__*/_react.default.createElement(_Shared.SearchBar, {
+    lazyLoad: !searchBarIsNotLazyLoad,
+    isCustomLayout: searchBarIsCustomLayout,
+    search: searchValue,
+    onSearch: handleChangeSearch,
+    placeholder: searchBarPlaceholder || ''
+  })), /*#__PURE__*/_react.default.createElement(_Selects.OptionsInner, {
     optionInnerMargin: props.optionInnerMargin,
     optionInnerMaxHeight: props.optionInnerMaxHeight
   }, options.map(function (option, i) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.20.0",
+  "version": "1.20.1",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "1.20.1",
+    "ordering-components-admin-external": "1.20.2",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

package/src/components/Orders/BusinessesSelector/index.js

@@ -22,6 +22,7 @@ export const BusinessesSelector = (props) => {
 
   const [, t] = useLanguage()
   const [businessTypes, setBusinessTypes] = useState([])
+  const [searchValue, setSearchValue] = useState('')
 
   const Placeholder = <PlaceholderTitle>{t('SELECT_BUSINESS', 'Select business')}</PlaceholderTitle>
   const businessesLoading = [{ value: 'default', content: <Option>{t('BUSINESSES_LOADING', 'Businesses loading')}...</Option> }]
@@ -29,29 +30,31 @@ export const BusinessesSelector = (props) => {
   useEffect(() => {
     const _businessesOptionList = []
     if (!businessesList.loading) {
-      const _businessesOption = businessesList.businesses.map((business) => {
-        return {
-          value: business.id,
-          content: (
-            <Option>
-              <WrapperBusinessImage>
-                {business.logo && <BusinessImage bgimage={business.logo} />}
-              </WrapperBusinessImage>
-              <OptionContent>
-                <OptionName>
-                  {business.name}
-                </OptionName>
-                <OptionCategory>
-                  {business?.alcohol && t('ALCOHOL', 'Alcohol')}
-                  {business?.food && t('FOOD', 'Food')}
-                  {business?.groceries && t('GROCERIES', 'Groceries')}
-                  {business?.laundry && t('LAUNDRY', 'Laundry')}
-                </OptionCategory>
-              </OptionContent>
-            </Option>
-          )
-        }
-      })
+      const _businessesOption = businessesList.businesses
+        .filter(option => option?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+        .map((business) => {
+          return {
+            value: business.id,
+            content: (
+              <Option>
+                <WrapperBusinessImage>
+                  {business.logo && <BusinessImage bgimage={business.logo} />}
+                </WrapperBusinessImage>
+                <OptionContent>
+                  <OptionName>
+                    {business.name}
+                  </OptionName>
+                  <OptionCategory>
+                    {business?.alcohol && t('ALCOHOL', 'Alcohol')}
+                    {business?.food && t('FOOD', 'Food')}
+                    {business?.groceries && t('GROCERIES', 'Groceries')}
+                    {business?.laundry && t('LAUNDRY', 'Laundry')}
+                  </OptionCategory>
+                </OptionContent>
+              </Option>
+            )
+          }
+        })
 
       for (const option of _businessesOption) {
         _businessesOptionList.push(option)
@@ -59,7 +62,7 @@ export const BusinessesSelector = (props) => {
     }
 
     setBusinessTypes(_businessesOptionList)
-  }, [businessesList])
+  }, [businessesList, searchValue])
 
   return (
     <>
@@ -72,6 +75,11 @@ export const BusinessesSelector = (props) => {
           optionInnerMaxHeight='150px'
           optionBottomBorder
           onChange={(business) => handleChangeBusinesses(business)}
+          isShowSearchBar
+          searchBarIsCustomLayout
+          searchBarIsNotLazyLoad
+          searchValue={searchValue}
+          handleChangeSearch={(val) => setSearchValue(val)}
         />
       ) : (
         <MultiSelect
@@ -80,6 +88,11 @@ export const BusinessesSelector = (props) => {
           optionInnerMargin='10px'
           optionInnerMaxHeight='150px'
           optionBottomBorder
+          isShowSearchBar
+          searchBarIsCustomLayout
+          searchBarIsNotLazyLoad
+          searchValue={searchValue}
+          handleChangeSearch={(val) => setSearchValue(val)}
         />
       )}
     </>

package/src/components/Orders/CountryFilter/index.js

@@ -13,32 +13,35 @@ const CountryFilterUI = (props) => {
 
   const [, t] = useLanguage()
 
+  const [searchValue, setSearchValue] = useState('')
+  const [countryTypes, setCountryTypes] = useState([])
+
   const placeholder = (
     <PlaceholderTitle>
       {t('SELECT_A_COUNTRY', 'Select a country')}
     </PlaceholderTitle>
   )
 
-  const [countryTypes, setCountryTypes] = useState([])
-
   useEffect(() => {
     const _countryList = []
     if (!countriesState.loading) {
-      const _groupsOption = countriesState.countries.map((country) => {
-        return {
-          value: country.code,
-          content: (
-            <Option>{country.name}</Option>
-          )
-        }
-      })
+      const _groupsOption = countriesState.countries
+        .filter(option => option?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+        .map((country) => {
+          return {
+            value: country.code,
+            content: (
+              <Option>{country.name}</Option>
+            )
+          }
+        })
 
       for (const option of _groupsOption) {
         _countryList.push(option)
       }
     }
     setCountryTypes(_countryList)
-  }, [countriesState])
+  }, [countriesState, searchValue])
 
   return (
     <>
@@ -49,6 +52,11 @@ const CountryFilterUI = (props) => {
           options={countryTypes}
           onChange={(code) => handleChangeCountryCode(code)}
           optionInnerMaxHeight='200px'
+          isShowSearchBar
+          searchBarIsCustomLayout
+          searchBarIsNotLazyLoad
+          searchValue={searchValue}
+          handleChangeSearch={(val) => setSearchValue(val)}
         />
       ) : (
         <SkeletonWrapper>

package/src/components/Orders/CurrencyFilter/index.js

@@ -11,6 +11,7 @@ export const CurrencyFilter = (props) => {
   } = props
 
   const [, t] = useLanguage()
+  const [searchValue, setSearchValue] = useState('')
 
   const placeholder = (
     <PlaceholderTitle>
@@ -22,20 +23,22 @@ export const CurrencyFilter = (props) => {
 
   useEffect(() => {
     const _countryList = []
-    const _groupsOption = currencyList.map((country) => {
-      return {
-        value: country.value,
-        content: (
-          <Option>{country.text}</Option>
-        )
-      }
-    })
+    const _groupsOption = currencyList
+      .filter(option => option?.text.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+      .map((country) => {
+        return {
+          value: country.value,
+          content: (
+            <Option>{country.text}</Option>
+          )
+        }
+      })
 
     for (const option of _groupsOption) {
       _countryList.push(option)
     }
     setCountryTypes(_countryList)
-  }, [currencyList])
+  }, [currencyList, searchValue])
 
   return (
     <MultiSelect
@@ -44,6 +47,11 @@ export const CurrencyFilter = (props) => {
       options={countryTypes}
       onChange={(code) => handleChangeCurrency(code)}
       optionInnerMaxHeight='200px'
+      isShowSearchBar
+      searchBarIsCustomLayout
+      searchBarIsNotLazyLoad
+      searchValue={searchValue}
+      handleChangeSearch={(val) => setSearchValue(val)}
     />
   )
 }

package/src/components/Orders/DeliveryTypeSelector/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { MultiSelect } from '../../../styles/MultiSelect'
 
@@ -15,13 +15,31 @@ export const DeliveryTypeSelector = (props) => {
 
   const [, t] = useLanguage()
 
-  const deliveryTypes = [
-    { value: 1, content: <Option>{t('DELIVERY', 'Delivery')}</Option> },
-    { value: 2, content: <Option>{t('PICKUP', 'Pickup')}</Option> },
-    { value: 3, content: <Option>{t('EAT_IN', 'Eat in')}</Option> },
-    { value: 4, content: <Option>{t('CURBSIDE', 'Curbside')}</Option> },
-    { value: 5, content: <Option>{t('DRIVE_THRU', 'Drive thru')}</Option> }
+  const [searchValue, setSearchValue] = useState('')
+  const [deliveryTypes, setDeliveryTypes] = useState([])
+
+  const deliveryTypeList = [
+    { value: 1, name: t('DELIVERY', 'Delivery') },
+    { value: 2, name: t('PICKUP', 'Pickup') },
+    { value: 3, name: t('EAT_IN', 'Eat in') },
+    { value: 4, name: t('CURBSIDE', 'Curbside') },
+    { value: 5, name: t('DRIVE_THRU', 'Drive thru') }
   ]
+
+  useEffect(() => {
+    const _deliveryTypes = deliveryTypeList
+      .filter(option => option?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+      .map((type) => {
+        return {
+          value: type.value,
+          content: (
+            <Option>{type.name}</Option>
+          )
+        }
+      })
+    setDeliveryTypes(_deliveryTypes)
+  }, [searchValue])
+
   const placeholder = <PlaceholderTitle>{t('SELECT_DELIVERY_TYPE', 'Select delivery type')}</PlaceholderTitle>
 
   return (
@@ -30,6 +48,11 @@ export const DeliveryTypeSelector = (props) => {
       defaultValue={filterValues.deliveryTypes}
       options={deliveryTypes}
       onChange={(deliveryType) => handleChangeDeliveryType(deliveryType)}
+      isShowSearchBar
+      searchBarIsCustomLayout
+      searchBarIsNotLazyLoad
+      searchValue={searchValue}
+      handleChangeSearch={(val) => setSearchValue(val)}
     />
   )
 }

package/src/components/Orders/DriverSelector/index.js

@@ -159,6 +159,11 @@ const DriverSelectorUI = (props) => {
             optionInnerMargin='10px'
             optionInnerMaxHeight='150px'
             onChange={(driver) => handleChangeDriver(driver)}
+            isShowSearchBar
+            searchBarIsCustomLayout
+            searchBarIsNotLazyLoad
+            searchValue={searchValue}
+            handleChangeSearch={(val) => setSearchValue(val)}
           />
         ) : (
           <MultiSelect
@@ -167,6 +172,11 @@ const DriverSelectorUI = (props) => {
             optionInnerMargin='10px'
             optionInnerMaxHeight='150px'
             className='driver-select'
+            isShowSearchBar
+            searchBarIsCustomLayout
+            searchBarIsNotLazyLoad
+            searchValue={searchValue}
+            handleChangeSearch={(val) => setSearchValue(val)}
           />
         )}
       </>

package/src/components/Orders/DriversGroupTypeSelector/index.js

@@ -13,6 +13,8 @@ export const DriversGroupTypeSelector = (props) => {
 
   const [, t] = useLanguage()
 
+  const [searchValue, setSearchValue] = useState('')
+
   const placeholder = (
     <PlaceholderTitle>
       {t('DRIVER_GROUP', 'Driver group')}
@@ -24,21 +26,23 @@ export const DriversGroupTypeSelector = (props) => {
   useEffect(() => {
     const _groupList = []
     if (!driverGroupList.loading) {
-      const _groupsOption = driverGroupList.groups.map((group) => {
-        return {
-          value: group.id,
-          content: (
-            <Option>{group.id}. {group.name}</Option>
-          )
-        }
-      })
+      const _groupsOption = driverGroupList.groups
+        .filter(option => option?.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
+        .map((group) => {
+          return {
+            value: group.id,
+            content: (
+              <Option>{group.id}. {group.name}</Option>
+            )
+          }
+        })
 
       for (const option of _groupsOption) {
         _groupList.push(option)
       }
     }
     setGroupTypes(_groupList)
-  }, [driverGroupList])
+  }, [driverGroupList, searchValue])
 
   return (
     <>
@@ -48,12 +52,22 @@ export const DriversGroupTypeSelector = (props) => {
           defaultValue={filterValues.groupTypes}
           options={groupTypes}
           onChange={(groupType) => handleChangeGroup(groupType)}
+          isShowSearchBar
+          searchBarIsCustomLayout
+          searchBarIsNotLazyLoad
+          searchValue={searchValue}
+          handleChangeSearch={(val) => setSearchValue(val)}
         />
       ) : (
         <MultiSelect
           defaultValue='default'
           options={groupTypesLoading}
           optionBottomBorder
+          isShowSearchBar
+          searchBarIsCustomLayout
+          searchBarIsNotLazyLoad
+          searchValue={searchValue}
+          handleChangeSearch={(val) => setSearchValue(val)}
         />
       )}
     </>

package/src/components/Orders/OrdersContentHeader/index.js

@@ -58,7 +58,8 @@ export const OrdersContentHeader = (props) => {
     } else {
       _filterApplied = filterValues?.groupTypes?.length || filterValues.businessIds.length > 0 || filterValues.cityIds.length > 0 ||
         filterValues.deliveryEndDatetime !== null || filterValues.deliveryFromDatetime !== null || filterValues.deliveryTypes.length > 0 ||
-        filterValues.driverIds.length > 0 || filterValues.paymethodIds.length > 0 || filterValues.statuses.length > 0 || filterValues?.metafield?.length > 0
+        filterValues.driverIds.length > 0 || filterValues.paymethodIds.length > 0 || filterValues.statuses.length > 0 || filterValues?.metafield?.length > 0 ||
+        filterValues?.externalId
     }
     setFilterApplied(_filterApplied)
   }, [filterValues])

package/src/components/Orders/OrdersFilterGroup/index.js

@@ -50,7 +50,8 @@ const OrdersFilterGroupUI = (props) => {
     handleChangeCurrency,
     handleChangeMetaFieldValue,
     handleAddMetaField,
-    handleDeleteMetafield
+    handleDeleteMetafield,
+    handleChangeExternalId
   } = props
 
   const [, t] = useLanguage()
@@ -112,9 +113,12 @@ const OrdersFilterGroupUI = (props) => {
             value={filterValues?.orderId || ''}
             onChange={(e) => handleChangeOrderId(e)}
           />
-          <CurrencyFilter
-            filterValues={filterValues}
-            handleChangeCurrency={handleChangeCurrency}
+          <Input
+            type='text'
+            placeholder={t('EXTERNAL_ID', 'External Id')}
+            autoComplete='off'
+            value={filterValues?.externalId || ''}
+            onChange={handleChangeExternalId}
           />
         </WrapperRow>
         <WrapperRow>
@@ -172,6 +176,12 @@ const OrdersFilterGroupUI = (props) => {
             handleChangePaymethodType={handleChangePaymethodType}
           />
         </WrapperRow>
+        <WrapperRow>
+          <CurrencyFilter
+            filterValues={filterValues}
+            handleChangeCurrency={handleChangeCurrency}
+          />
+        </WrapperRow>
         {filterValues?.metafield.map(item => (
           <WrapperRow key={item.id}>
             <Input

package/src/components/Orders/OrdersTable/index.js

@@ -114,6 +114,10 @@ export const OrdersTable = (props) => {
     {
       value: 'total',
       content: t('EXPORT_TOTAL', 'Total')
+    },
+    {
+      value: 'externalId',
+      content: t('EXTERNAL_ID', 'External id')
     }
   ]
 
@@ -228,6 +232,7 @@ export const OrdersTable = (props) => {
   }
 
   const handleChangeAllowColumns = (type) => {
+    console.log(type, 'type', allowColumns)
     const _column = allowColumns[type]
     setAllowColumns({
       ...allowColumns,
@@ -368,6 +373,27 @@ export const OrdersTable = (props) => {
                             </React.Fragment>
                           )
                         }
+                        if (column === 'externalId') {
+                          return (
+                            <DragTh
+                              key={`dragTh-${i}`}
+                              onDragOver={e => handleDragOver?.(e, column)}
+                              onDrop={e => handleDrop(e, column)}
+                              onDragEnd={e => handleDragEnd(e)}
+                              colSpan={allowColumns[column]?.colSpan ?? 1}
+                              className={allowColumns[column]?.className}
+                              selectedDragOver={column === dragOverd}
+                            >
+                              <div draggable onDragStart={e => handleDragStart?.(e, column)}>
+                                <img
+                                  src={theme.images.icons?.sixDots}
+                                  alt='six dots'
+                                />
+                                <span>{allowColumns[column]?.title}</span>
+                              </div>
+                            </DragTh>
+                          )
+                        }
                         if (column === 'total' || (column !== 'total' && column === [...array].pop())) {
                           return (
                             <React.Fragment key={i}>
@@ -450,6 +476,15 @@ export const OrdersTable = (props) => {
                       </div>
                     </OrderNumberContainer>
                   </td>
+                  {allowColumns?.externalId?.visable && (
+                    <td className='externalId'>
+                      <StatusInfo>
+                        <div className='info'>
+                          <p className='bold'><Skeleton width={100} /></p>
+                        </div>
+                      </StatusInfo>
+                    </td>
+                  )}
                   {allowColumns?.cartGroupId?.visable && (
                     <td className='statusInfo'>
                       <StatusInfo>
@@ -558,6 +593,7 @@ export const OrdersTable = (props) => {
                 className={parseInt(orderDetailId) === order.id ? 'active' : ''}
                 onClick={(e) => handleClickOrder(order, e)}
                 data-tour={i === 0 ? 'tour_start' : ''}
+                data-status={getStatusClassName(getDelayMinutes(order))}
               >
                 <tr>
                   {Object.keys(allowColumns).filter(col => allowColumns[col]?.visable)
@@ -572,6 +608,15 @@ export const OrdersTable = (props) => {
                           </td>
                         )
                       }
+                      if (column === 'externalId' && !isSelectedOrders) {
+                        return (
+                          <td className='externalId' key={`externalId${i}-${index}`}>
+                            <StatusInfo>
+                              <p className='bold'>{order?.external_id}</p>
+                            </StatusInfo>
+                          </td>
+                        )
+                      }
                       if (column === 'orderNumber') {
                         return (
                           <td

package/src/components/Orders/OrdersTable/styles.js

@@ -102,6 +102,20 @@ export const OrderTbody = styled.tbody`
   border-bottom: 1px solid ${props => props.theme.colors.borderColor};
   cursor: pointer;
 
+  /* &[data-status="delayed"] {
+    background-color: ${props => props.theme.colors.danger100};
+    td {
+      border-top: 1px solid ${props => props.theme.colors.danger} !important;
+      border-bottom: 1px solid ${props => props.theme.colors.danger} !important;
+    }
+  }
+  &[data-status="at_risk"] {
+    background-color: ${props => props.theme.colors.warning100};
+    td {
+      border-top: 1px solid ${props => props.theme.colors.warning} !important;
+      border-bottom: 1px solid ${props => props.theme.colors.warning} !important;
+    }
+  } */
   &:hover {
     background-color: ${props => props.theme.colors.lightPrimary};
   }