tabexseriescomponents 0.0.354 → 0.0.356

package/dist/index.cjs.js

@@ -12862,6 +12862,13 @@ var Filter$1 = function Filter(props) {
   var routingcountext = props.actions.routingcountext;
   var StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
   var ikimagecredcontext = props.actions.ikimagecredcontext;
+  var _useState = React.useState({
+      min: 0,
+      max: 10000
+    }),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    pricevalue = _useState2[0],
+    setpricevalue = _useState2[1];
   var fetchTabexCountriesQueryContext = props.actions.fetchTabexCountriesQueryContext;
   var FetchQueriesEngineContext = props.actions.FetchQueriesEngineContext;
   var setFetchQueriesEngineContext = props.actions.setFetchQueriesEngineContext;
@@ -12869,40 +12876,40 @@ var Filter$1 = function Filter(props) {
   var fetchTabexStatesQueryContext = props.actions.fetchTabexStatesQueryContext;
   var FetchTabexStatesPayloadobjContext = props.actions.FetchTabexStatesPayloadobjContext;
   var setFetchTabexStatesPayloadobjContext = props.actions.setFetchTabexStatesPayloadobjContext;
-  var _useState = React.useState(''),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
-    sectionproperties = _useState2[0],
-    setsectionproperties = _useState2[1];
-  var _useState3 = React.useState(_toConsumableArray__default["default"](authdetailsContext.instinfo.instfilters)),
+  var _useState3 = React.useState(''),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    instfilters = _useState4[0],
-    setinstfilters = _useState4[1];
-  var _useState5 = React.useState([]),
+    sectionproperties = _useState4[0],
+    setsectionproperties = _useState4[1];
+  var _useState5 = React.useState(_toConsumableArray__default["default"](authdetailsContext.instinfo.instfilters)),
     _useState6 = _slicedToArray__default["default"](_useState5, 2),
-    collectionstobevisible = _useState6[0],
-    setcollectionstobevisible = _useState6[1];
-  var _useState7 = React.useState(_toConsumableArray__default["default"](authdetailsContext.instinfo.instcollections)),
+    instfilters = _useState6[0],
+    setinstfilters = _useState6[1];
+  var _useState7 = React.useState([]),
     _useState8 = _slicedToArray__default["default"](_useState7, 2),
-    instcollections = _useState8[0],
-    setinstcollections = _useState8[1];
-  var _useState9 = React.useState(_toConsumableArray__default["default"](authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i = authdetailsContext.instinfo) === null || _authdetailsContext$i === void 0 ? void 0 : _authdetailsContext$i.instcategories)),
+    collectionstobevisible = _useState8[0],
+    setcollectionstobevisible = _useState8[1];
+  var _useState9 = React.useState(_toConsumableArray__default["default"](authdetailsContext.instinfo.instcollections)),
     _useState10 = _slicedToArray__default["default"](_useState9, 2),
-    instcategories = _useState10[0],
-    setinstcategories = _useState10[1];
+    instcollections = _useState10[0],
+    setinstcollections = _useState10[1];
+  var _useState11 = React.useState(_toConsumableArray__default["default"](authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i = authdetailsContext.instinfo) === null || _authdetailsContext$i === void 0 ? void 0 : _authdetailsContext$i.instcategories)),
+    _useState12 = _slicedToArray__default["default"](_useState11, 2),
+    instcategories = _useState12[0],
+    setinstcategories = _useState12[1];
   // const [sortby, setSortby] = useState('Sort by');
-  var _useState11 = React.useState({
+  var _useState13 = React.useState({
       min: 0,
       max: 5
     }),
-    _useState12 = _slicedToArray__default["default"](_useState11, 2),
-    raterangevalue = _useState12[0],
-    setraterangevalue = _useState12[1];
+    _useState14 = _slicedToArray__default["default"](_useState13, 2),
+    raterangevalue = _useState14[0],
+    setraterangevalue = _useState14[1];
   var timeoutRef = React__default["default"].useRef(null);
-  var _useState13 = React.useState(''),
-    _useState14 = _slicedToArray__default["default"](_useState13, 2);
-    _useState14[0];
-    var setsortbycontext = _useState14[1];
-  var _useState15 = React.useState([{
+  var _useState15 = React.useState(''),
+    _useState16 = _slicedToArray__default["default"](_useState15, 2);
+    _useState16[0];
+    var setsortbycontext = _useState16[1];
+  var _useState17 = React.useState([{
       payloadvalue: 'sortprice',
       name: lang.price,
       filterarray: [{
@@ -12927,9 +12934,9 @@ var Filter$1 = function Filter(props) {
         isfilterselected: false
       }]
     }]),
-    _useState16 = _slicedToArray__default["default"](_useState15, 2),
-    otherfilters = _useState16[0];
-    _useState16[1];
+    _useState18 = _slicedToArray__default["default"](_useState17, 2),
+    otherfilters = _useState18[0];
+    _useState18[1];
   React.useEffect(function () {
     filterupdater();
   }, []);
@@ -13377,6 +13384,310 @@ var Filter$1 = function Filter(props) {
       className: "mt-3 mb-3"
     })));
   };
+  var DynamicFilter = function DynamicFilter() {
+    var _ref, _ref3, _ref4, _ref5, _ref6, _ref7;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "row m-0 w-100"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "col-lg-12 p-0 mb-3"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: ' row m-0 p-0 mb-2 pl-md-3 pr-md-3 ',
+      style: (_ref = {
+        color: sectionproperties.filtertitle_color
+      }, _defineProperty__default["default"](_ref, "color", sectionproperties.filtertitle_color), _defineProperty__default["default"](_ref, "fontSize", sectionproperties.filtertitle_fontsize + 'px'), _defineProperty__default["default"](_ref, "fontWeight", sectionproperties.filtertitle_fontweight), _defineProperty__default["default"](_ref, "color", sectionproperties.filtertitle_color), _ref)
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "col-lg-10 col-md-10 col-sm-10 p-0"
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      className: langdetect == 'en' ? ' m-0 p-0 ' : ' m-0 p-0 text-right'
+    }, langdetect == 'en' ? 'Car Brand' : 'الماركة'))), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "row mt-0 mb-2 ml-0 mr-0 d-lg-flex pl-md-3 pr-md-3"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: 'col-lg-12 p-0'
+    }, /*#__PURE__*/React__default["default"].createElement(Select$1, {
+      options: [{
+        name: 'Tesla',
+        value: 'Tesla'
+      }, {
+        name: 'VW',
+        value: 'VW'
+      }, {
+        name: 'Mercedes',
+        value: 'Mercedes'
+      }],
+      getOptionLabel: function getOptionLabel(option) {
+        var crname = '';
+        if (langdetect == 'en') {
+          crname = option.name;
+        } else if (langdetect == 'ar') {
+          if (option.name_ar != null) {
+            crname = option.name_ar;
+          } else {
+            crname = option.name;
+          }
+        }
+        return crname;
+      },
+      getOptionValue: function getOptionValue(option) {
+        return option.id;
+      },
+      value: '',
+      onChange: function onChange(option) {},
+      styles: langdetect == 'en' ? selectcustomStyles : selectcustomStylesTranslated,
+      isSearchable: true,
+      placeholder: ''
+    })))), /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "col-lg-12 p-0 mb-3"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: ' row m-0 p-0 mb-2 pl-md-3 pr-md-3 ',
+      style: _defineProperty__default["default"]({
+        color: sectionproperties.filtertitle_color,
+        fontSize: sectionproperties.filtertitle_fontsize + 'px',
+        fontWeight: sectionproperties.filtertitle_fontweight
+      }, "color", sectionproperties.filtertitle_color)
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "col-lg-10 col-md-10 col-sm-10 p-0"
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      className: langdetect == 'en' ? ' m-0 p-0 ' : ' m-0 p-0 text-right'
+    }, langdetect == 'en' ? 'Car Model' : 'النوع'))), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "row mt-0 mb-2 ml-0 mr-0 d-lg-flex pl-md-3 pr-md-3"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: 'col-lg-12 p-0'
+    }, /*#__PURE__*/React__default["default"].createElement(Select$1, {
+      options: [{
+        name: 'ID.4',
+        value: 'ID.4'
+      }, {
+        name: 'ID.6',
+        value: 'ID.6'
+      }],
+      getOptionLabel: function getOptionLabel(option) {
+        var crname = '';
+        if (langdetect == 'en') {
+          crname = option.name;
+        } else if (langdetect == 'ar') {
+          if (option.name_ar != null) {
+            crname = option.name_ar;
+          } else {
+            crname = option.name;
+          }
+        }
+        return crname;
+      },
+      getOptionValue: function getOptionValue(option) {
+        return option.id;
+      },
+      value: '',
+      onChange: function onChange(option) {},
+      styles: langdetect == 'en' ? selectcustomStyles : selectcustomStylesTranslated,
+      isSearchable: true,
+      placeholder: ''
+    })))), /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "col-lg-12 p-0 mb-3"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: ' row m-0 p-0 mb-2 pl-md-3 pr-md-3 ',
+      style: (_ref3 = {
+        color: sectionproperties.filtertitle_color
+      }, _defineProperty__default["default"](_ref3, "color", sectionproperties.filtertitle_color), _defineProperty__default["default"](_ref3, "fontSize", sectionproperties.filtertitle_fontsize + 'px'), _defineProperty__default["default"](_ref3, "fontWeight", sectionproperties.filtertitle_fontweight), _defineProperty__default["default"](_ref3, "color", sectionproperties.filtertitle_color), _ref3)
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "col-lg-10 col-md-10 col-sm-10 p-0"
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      className: langdetect == 'en' ? ' m-0 p-0 ' : ' m-0 p-0 text-right'
+    }, " ", langdetect == 'en' ? 'Kilometers (From)' : 'كيلومترات (من)'))), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "row mt-0 mb-2 ml-0 mr-0 d-lg-flex pl-md-3 pr-md-3"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: 'col-lg-12 p-0'
+    }, /*#__PURE__*/React__default["default"].createElement(Select$1, {
+      options: [{
+        name: '10000',
+        value: '10000'
+      }, {
+        name: '20000',
+        value: '20000'
+      }],
+      getOptionLabel: function getOptionLabel(option) {
+        var crname = '';
+        if (langdetect == 'en') {
+          crname = option.name;
+        } else if (langdetect == 'ar') {
+          if (option.name_ar != null) {
+            crname = option.name_ar;
+          } else {
+            crname = option.name;
+          }
+        }
+        return crname;
+      },
+      getOptionValue: function getOptionValue(option) {
+        return option.id;
+      },
+      value: '',
+      onChange: function onChange(option) {},
+      styles: langdetect == 'en' ? selectcustomStyles : selectcustomStylesTranslated,
+      isSearchable: true,
+      placeholder: ''
+    })))), /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "col-lg-12 p-0 mb-3"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: ' row m-0 p-0 mb-2 pl-md-3 pr-md-3 ',
+      style: (_ref4 = {
+        color: sectionproperties.filtertitle_color
+      }, _defineProperty__default["default"](_ref4, "color", sectionproperties.filtertitle_color), _defineProperty__default["default"](_ref4, "fontSize", sectionproperties.filtertitle_fontsize + 'px'), _defineProperty__default["default"](_ref4, "fontWeight", sectionproperties.filtertitle_fontweight), _defineProperty__default["default"](_ref4, "color", sectionproperties.filtertitle_color), _ref4)
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "col-lg-10 col-md-10 col-sm-10 p-0"
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      className: langdetect == 'en' ? ' m-0 p-0 ' : ' m-0 p-0 text-right'
+    }, langdetect == 'en' ? 'Kilometers (To)' : 'كيلومترات (الى)'))), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "row mt-0 mb-2 ml-0 mr-0 d-lg-flex pl-md-3 pr-md-3"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: 'col-lg-12 p-0'
+    }, /*#__PURE__*/React__default["default"].createElement(Select$1, {
+      options: [{
+        name: '10000',
+        value: '10000'
+      }, {
+        name: '20000',
+        value: '20000'
+      }],
+      getOptionLabel: function getOptionLabel(option) {
+        var crname = '';
+        if (langdetect == 'en') {
+          crname = option.name;
+        } else if (langdetect == 'ar') {
+          if (option.name_ar != null) {
+            crname = option.name_ar;
+          } else {
+            crname = option.name;
+          }
+        }
+        return crname;
+      },
+      getOptionValue: function getOptionValue(option) {
+        return option.id;
+      },
+      value: '',
+      onChange: function onChange(option) {},
+      styles: langdetect == 'en' ? selectcustomStyles : selectcustomStylesTranslated,
+      isSearchable: true,
+      placeholder: ''
+    })))), /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "col-lg-12 p-0 mb-3"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: ' row m-0 p-0 mb-2 pl-md-3 pr-md-3 ',
+      style: (_ref5 = {
+        color: sectionproperties.filtertitle_color
+      }, _defineProperty__default["default"](_ref5, "color", sectionproperties.filtertitle_color), _defineProperty__default["default"](_ref5, "fontSize", sectionproperties.filtertitle_fontsize + 'px'), _defineProperty__default["default"](_ref5, "fontWeight", sectionproperties.filtertitle_fontweight), _defineProperty__default["default"](_ref5, "color", sectionproperties.filtertitle_color), _ref5)
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "col-lg-10 col-md-10 col-sm-10 p-0"
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      className: langdetect == 'en' ? ' m-0 p-0 ' : ' m-0 p-0 text-right'
+    }, langdetect == 'en' ? 'Year of built (From)' : 'سنة الصنع (من)'))), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "row mt-0 mb-2 ml-0 mr-0 d-lg-flex pl-md-3 pr-md-3"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: 'col-lg-12 p-0'
+    }, /*#__PURE__*/React__default["default"].createElement(Select$1, {
+      options: [{
+        name: '2020',
+        value: '2020'
+      }, {
+        name: '2021',
+        value: '2021'
+      }],
+      getOptionLabel: function getOptionLabel(option) {
+        var crname = '';
+        if (langdetect == 'en') {
+          crname = option.name;
+        } else if (langdetect == 'ar') {
+          if (option.name_ar != null) {
+            crname = option.name_ar;
+          } else {
+            crname = option.name;
+          }
+        }
+        return crname;
+      },
+      getOptionValue: function getOptionValue(option) {
+        return option.id;
+      },
+      value: '',
+      onChange: function onChange(option) {},
+      styles: langdetect == 'en' ? selectcustomStyles : selectcustomStylesTranslated,
+      isSearchable: true,
+      placeholder: ''
+    })))), /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "col-lg-12 p-0 mb-3"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: ' row m-0 p-0 mb-2 pl-md-3 pr-md-3 ',
+      style: (_ref6 = {
+        color: sectionproperties.filtertitle_color
+      }, _defineProperty__default["default"](_ref6, "color", sectionproperties.filtertitle_color), _defineProperty__default["default"](_ref6, "fontSize", sectionproperties.filtertitle_fontsize + 'px'), _defineProperty__default["default"](_ref6, "fontWeight", sectionproperties.filtertitle_fontweight), _defineProperty__default["default"](_ref6, "color", sectionproperties.filtertitle_color), _ref6)
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "col-lg-10 col-md-10 col-sm-10 p-0"
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      className: langdetect == 'en' ? ' m-0 p-0 ' : ' m-0 p-0 text-right'
+    }, langdetect == 'en' ? 'Year of built (To)' : 'سنة الصنع (الى)'))), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "row mt-0 mb-2 ml-0 mr-0 d-lg-flex pl-md-3 pr-md-3"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: 'col-lg-12 p-0'
+    }, /*#__PURE__*/React__default["default"].createElement(Select$1, {
+      options: [{
+        name: '2020',
+        value: '2020'
+      }, {
+        name: '2021',
+        value: '2021'
+      }],
+      getOptionLabel: function getOptionLabel(option) {
+        var crname = '';
+        if (langdetect == 'en') {
+          crname = option.name;
+        } else if (langdetect == 'ar') {
+          if (option.name_ar != null) {
+            crname = option.name_ar;
+          } else {
+            crname = option.name;
+          }
+        }
+        return crname;
+      },
+      getOptionValue: function getOptionValue(option) {
+        return option.id;
+      },
+      value: '',
+      onChange: function onChange(option) {},
+      styles: langdetect == 'en' ? selectcustomStyles : selectcustomStylesTranslated,
+      isSearchable: true,
+      placeholder: ''
+    })))), /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "col-lg-12 p-0 mb-3"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: ' row m-0 p-0 mb-4 pl-md-3 pr-md-3 ',
+      style: (_ref7 = {
+        color: sectionproperties.filtertitle_color
+      }, _defineProperty__default["default"](_ref7, "color", sectionproperties.filtertitle_color), _defineProperty__default["default"](_ref7, "fontSize", sectionproperties.filtertitle_fontsize + 'px'), _defineProperty__default["default"](_ref7, "fontWeight", sectionproperties.filtertitle_fontweight), _defineProperty__default["default"](_ref7, "color", sectionproperties.filtertitle_color), _ref7)
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "col-lg-10 col-md-10 col-sm-10 p-0"
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      className: langdetect == 'en' ? ' m-0 p-0 ' : ' m-0 p-0 text-right'
+    }, langdetect == 'en' ? 'Price' : 'السعر'))), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "row mt-0 mb-2 ml-0 mr-0 d-lg-flex pl-md-3 pr-md-3"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: 'col-lg-12 p-0 px-md-4',
+      style: {
+        direction: 'ltr'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(InputRange__default["default"], {
+      draggableTrack: true,
+      formatLabel: function formatLabel(value) {
+        return "".concat(value);
+      },
+      maxValue: parseInt(sectionproperties.filterpricemaxvalue),
+      minValue: parseInt(sectionproperties.filterpriceminvalue),
+      value: pricevalue,
+      onChange: function onChange(value) {
+        setpricevalue(_objectSpread$26({}, value));
+      }
+    })))));
+  };
   var InstFilters = function InstFilters() {
     return /*#__PURE__*/React__default["default"].createElement(reactAccessibleAccordion.Accordion, {
       allowMultipleExpanded: true,
@@ -13696,10 +14007,10 @@ var Filter$1 = function Filter(props) {
       isSearchable: true
     })))));
   };
-  var _useState17 = React.useState(false),
-    _useState18 = _slicedToArray__default["default"](_useState17, 2),
-    checked = _useState18[0],
-    setChecked = _useState18[1];
+  var _useState19 = React.useState(false),
+    _useState20 = _slicedToArray__default["default"](_useState19, 2),
+    checked = _useState20[0],
+    setChecked = _useState20[1];
   // const queryParameters = new URLSearchParams(window.location.search);
   // useEffect(() => {
   //     // setsortbycontext('Sort By');
@@ -14030,7 +14341,9 @@ var Filter$1 = function Filter(props) {
     "class": "row m-0 w-100"
   }, CategoriesFilter()), sectionproperties.filterType == 'Collections' && sectionproperties.showcategoriesfilter == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "row m-0 w-100"
-  }, CollectionsFilter()), sectionproperties.showvariantsfilter == 'Show' && InstFilters()))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, CollectionsFilter()), sectionproperties.showdynamicfilter == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "row m-0 w-100"
+  }, DynamicFilter()), sectionproperties.showvariantsfilter == 'Show' && InstFilters()))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-lg-12"
   }, /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Offcanvas, {
     show: props === null || props === void 0 ? void 0 : props.openFilterSlider,
@@ -14167,7 +14480,9 @@ var Filter$1 = function Filter(props) {
     "class": "row m-0 w-100"
   }, CategoriesFilter()), sectionproperties.filterType == 'Collections' && sectionproperties.showcategoriesfilter == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "row m-0 w-100"
-  }, CollectionsFilter()), sectionproperties.showvariantsfilter == 'Show' && InstFilters())))))));
+  }, CollectionsFilter()), sectionproperties.showdynamicfilter == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "row m-0 w-100"
+  }, DynamicFilter()), sectionproperties.showvariantsfilter == 'Show' && InstFilters())))))));
 };
 
 function ownKeys$25(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -47780,7 +48095,7 @@ var BackgroundImageWithTopContent = function BackgroundImageWithTopContent(props
       maxWidth: '500px'
     }
   }, langdetect == 'en' ? sectionproperties.descriptionContentEn : sectionproperties.descriptionContentAr)), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": 'col-lg-10 col-md-12 col-sm-12 allcentered mt-3',
+    "class": 'col-lg-11 col-md-12 col-sm-12 allcentered mt-3',
     style: {
       backgroundColor: sectionproperties.reservation_bgcolor,
       borderRadius: sectionproperties.reservation_borderradius + 'px',
@@ -47796,13 +48111,13 @@ var BackgroundImageWithTopContent = function BackgroundImageWithTopContent(props
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "row m-0 w-100 d-flex align-items-center justify-content-start"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-2 col-md-12 d-flex flex-column align-items-center justify-content-start mb-md-3"
+    "class": "col-lg-3 col-md-12 d-flex flex-column align-items-center justify-content-start mb-3"
   }, /*#__PURE__*/React__default["default"].createElement("label", {
     className: "".concat(sectionstyles.input_label_name) + ' mb-3 w-100 ',
     style: {
       textAlign: langdetect == 'en' ? 'left' : 'right'
     }
-  }, langdetect == 'en' ? 'Brand' : 'الماركة'), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, langdetect == 'en' ? 'Car Brand' : 'الماركة'), /*#__PURE__*/React__default["default"].createElement("div", {
     "class": 'col-lg-12 p-0'
   }, /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
     options: [{
@@ -47818,13 +48133,32 @@ var BackgroundImageWithTopContent = function BackgroundImageWithTopContent(props
     styles: langdetect == 'en' ? defaultstyles : defaultstylestranslated,
     placeholder: ''
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-2 col-md-12 d-flex flex-column align-items-center justify-content-start mb-md-3"
+    "class": "col-lg-3 col-md-12 d-flex flex-column align-items-center justify-content-start mb-3"
   }, /*#__PURE__*/React__default["default"].createElement("label", {
     className: "".concat(sectionstyles.input_label_name) + ' mb-3 w-100 ',
     style: {
       textAlign: langdetect == 'en' ? 'left' : 'right'
     }
-  }, langdetect == 'en' ? 'KM' : 'KM'), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, langdetect == 'en' ? 'Car Model' : 'النوع'), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": 'col-lg-12 p-0'
+  }, /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
+    options: [{
+      label: 'ID.4',
+      value: 1
+    }, {
+      label: 'ID.6',
+      value: 0
+    }],
+    styles: langdetect == 'en' ? defaultstyles : defaultstylestranslated,
+    placeholder: ''
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-3 col-md-12 d-flex flex-column align-items-center justify-content-start mb-3"
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "".concat(sectionstyles.input_label_name) + ' mb-3 w-100 ',
+    style: {
+      textAlign: langdetect == 'en' ? 'left' : 'right'
+    }
+  }, langdetect == 'en' ? 'Kilometers (From)' : 'كيلومترات (من)'), /*#__PURE__*/React__default["default"].createElement("div", {
     "class": 'col-lg-12 p-0'
   }, /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
     options: [{
@@ -47840,13 +48174,35 @@ var BackgroundImageWithTopContent = function BackgroundImageWithTopContent(props
     styles: langdetect == 'en' ? defaultstyles : defaultstylestranslated,
     placeholder: ''
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-2 col-md-12 d-flex flex-column align-items-center justify-content-start mb-md-3"
+    "class": "col-lg-3 col-md-12 d-flex flex-column align-items-center justify-content-start mb-3"
   }, /*#__PURE__*/React__default["default"].createElement("label", {
     className: "".concat(sectionstyles.input_label_name) + ' mb-3 w-100 ',
     style: {
       textAlign: langdetect == 'en' ? 'left' : 'right'
     }
-  }, langdetect == 'en' ? 'Model Year' : 'السنة'), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, langdetect == 'en' ? 'Kilometers (To)' : 'كيلومترات (الى)'), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": 'col-lg-12 p-0'
+  }, /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
+    options: [{
+      label: '100000',
+      value: 1
+    }, {
+      label: '50000',
+      value: 0
+    }, {
+      label: '30000',
+      value: 0
+    }],
+    styles: langdetect == 'en' ? defaultstyles : defaultstylestranslated,
+    placeholder: ''
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-3 col-md-12 d-flex flex-column align-items-center justify-content-start mb-3"
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "".concat(sectionstyles.input_label_name) + ' mb-3 w-100 ',
+    style: {
+      textAlign: langdetect == 'en' ? 'left' : 'right'
+    }
+  }, langdetect == 'en' ? 'Year of built (From)' : 'سنة الصنع (من)'), /*#__PURE__*/React__default["default"].createElement("div", {
     "class": 'col-lg-12 p-0'
   }, /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
     options: [{
@@ -47862,7 +48218,29 @@ var BackgroundImageWithTopContent = function BackgroundImageWithTopContent(props
     styles: langdetect == 'en' ? defaultstyles : defaultstylestranslated,
     placeholder: ''
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(langdetect == 'en' ? 'text-left' : 'text-right') + ' col-lg-3 col-md-12 col-sm-12 mb-md-3 '
+    "class": "col-lg-3 col-md-12 d-flex flex-column align-items-center justify-content-start mb-3"
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "".concat(sectionstyles.input_label_name) + ' mb-3 w-100 ',
+    style: {
+      textAlign: langdetect == 'en' ? 'left' : 'right'
+    }
+  }, langdetect == 'en' ? 'Year of built (To)' : 'سنة الصنع (الى)'), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": 'col-lg-12 p-0'
+  }, /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
+    options: [{
+      label: '2023',
+      value: 1
+    }, {
+      label: '2022',
+      value: 0
+    }, {
+      label: '2021',
+      value: 0
+    }],
+    styles: langdetect == 'en' ? defaultstyles : defaultstylestranslated,
+    placeholder: ''
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(langdetect == 'en' ? 'text-left' : 'text-right') + ' col-lg-3 col-md-12 col-sm-12 mb-3 '
   }, /*#__PURE__*/React__default["default"].createElement("label", {
     className: "".concat(sectionstyles.input_label_name) + ' mb-3 w-100',
     style: {
@@ -47885,9 +48263,11 @@ var BackgroundImageWithTopContent = function BackgroundImageWithTopContent(props
       setpricevalue(_objectSpread$17({}, value));
     }
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-1"
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-2 col-md-12 d-flex align-items-center justify-content-end"
+    "class": "col-lg-2 col-md-12 text-end",
+    style: {
+      marginLeft: langdetect == 'en' ? 'auto' : '',
+      marginRight: langdetect == 'ar' ? 'auto' : ''
+    }
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     "class": sectionstyles.btnstyles + ' allcentered ',
     onClick: function onClick() {