@bytebrand/fe-ui-core 4.2.241 → 4.2.243

package/source/components/_common/Button/Button.tsx

@@ -15,6 +15,7 @@ export interface IButtonProps {
   color?: variantColor;
   children?: any;
   variant?: variantType;
+  getRef?: (ref: HTMLButtonElement) => void;
 
   disabled?: boolean;
   loading?: boolean;
@@ -25,7 +26,7 @@ export interface IButtonProps {
   onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-const Button: React.FC<IButtonProps> = ({ className, color, onClick, onMouseEnter, onMouseLeave, variant, loading, disabled, children  }: IButtonProps) => {
+const Button: React.FC<IButtonProps> = ({ getRef, className, color, onClick, onMouseEnter, onMouseLeave, variant, loading, disabled, children  }: IButtonProps) => {
   const onHandlerClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
@@ -52,6 +53,7 @@ const Button: React.FC<IButtonProps> = ({ className, color, onClick, onMouseEnte
     onClick: onHandlerClick,
     onMouseEnter: onHandlerMouseEnter,
     onMouseLeave: onHandlerMouseLeave,
+    ref:getRef,
     disabled: disabled || loading
   };
 
@@ -69,7 +71,7 @@ Button.defaultProps = {
   buttonType: 'button',
 
   onClick: () => { },
-
+  getRef: () => { },
   onMouseEnter: () => { },
   onMouseLeave: () => { }
 };

package/source/components/_common/IconSVG/IconSVGConfig.tsx

@@ -236,6 +236,7 @@ import Easy from './SVG/slider/Easy';
 import Safe from './SVG/slider/Safe';
 import ZoomIn from './SVG/slider/ZoomIn';
 import ZoomOut from './SVG/slider/ZoomOut';
+import YoutubeButton from './SVG/slider/YoutubeButton'
 
 // social
 import SharingInterface from './SVG/social/SharingInterface';
@@ -547,6 +548,7 @@ const components: IComponentsProp = {
   safe: Safe,
   zoomIn: ZoomIn,
   zoomOut: ZoomOut,
+  youtubeButton:YoutubeButton,
 
   // social
   sharingInterface: SharingInterface,

package/source/components/_common/IconSVG/SVG/slider/YoutubeButton.tsx

@@ -0,0 +1,26 @@
+/* tslint:disable */
+import * as React from 'react';
+
+const SvgYoutubeButton = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg" 
+    width="146" 
+    height="103" 
+    viewBox="0 0 146 103" 
+    fill="none"
+    {...props}
+  >
+    <g clipPath="url(#clip0_13856_24182)">
+      <path d="M142.741 16.6087C141.067 10.3215 137.398 4.99979 131.11 3.32604C119.716 0.278958 72.9583 0 72.9583 0C72.9583 0 26.2006 0.278958 14.8063 3.32604C8.51896 4.99979 4.87104 10.3215 3.17583 16.6087C0.12875 28.0031 0 51.5 0 51.5C0 51.5 0.12875 74.9969 3.17583 86.3912C4.84958 92.6785 8.51896 98.0002 14.8063 99.674C26.2006 102.721 72.9583 103 72.9583 103C72.9583 103 119.716 102.721 131.11 99.674C137.398 98.0002 141.067 92.6785 142.741 86.3912C145.788 74.9969 145.917 51.5 145.917 51.5C145.917 51.5 145.788 28.0031 142.741 16.6087Z" fill="#FF0000" />
+      <path d="M96.5625 51.5003L57.9375 30.042V72.9587" fill="white" />
+    </g>
+    <defs>
+      <clipPath id="clip0_13856_24182">
+        <rect width="145.917" height="103" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default SvgYoutubeButton;
+/* tslint:enable */

package/source/components/_common/MaterialAutocomplete/MaterialAutocomplete.styled.tsx

@@ -21,7 +21,7 @@ export const Theme = createTheme({
           },
           ['&.Mui-focused + [data-popper-placement*="bottom"] .MuiOutlinedInput-notchedOutline']: {
             ...(ownerState.name === 'mobileSearch' && { // tslint:disable-line
-              borderTop: isMobileOnly ? '2px solid #1976d2' : 0
+              borderTop: isMobileOnly ? '2px solid #005CCB' : 0
             })
           },
           ['&.Mui-focused .MuiInputLabel-root']: {
@@ -38,9 +38,9 @@ export const Theme = createTheme({
           ['&.Mui-focused + [data-popper-placement*="top"] > .MuiPaper-root']: {
             borderBottomLeftRadius: 0,
             borderBottomRightRadius: 0,
-            borderLeft: '2px solid #1976d2',
-            borderRight: '2px solid #1976d2',
-            borderTop: '2px solid #1976d2',
+            borderLeft: '2px solid #005CCB',
+            borderRight: '2px solid #005CCB',
+            borderTop: '2px solid #005CCB',
             ...(ownerState.error && { // tslint:disable-line
               borderColor: '#d32f2f'
             })
@@ -48,15 +48,15 @@ export const Theme = createTheme({
           ['&.Mui-focused + [data-popper-placement*="bottom"] > .MuiPaper-root']: {
             borderTopLeftRadius: 0,
             borderTopRightRadius: 0,
-            borderLeft: '2px solid #1976d2',
-            borderRight: '2px solid #1976d2',
-            borderBottom: '2px solid #1976d2',
+            borderLeft: '2px solid #005CCB',
+            borderRight: '2px solid #005CCB',
+            borderBottom: '2px solid #005CCB',
             ...(ownerState.error && { // tslint:disable-line
               borderColor: '#d32f2f'
             }),
             marginTop: '-3px',
             ...(ownerState.name === 'mobileSearch' && { // tslint:disable-line
-              borderTop: isMobileOnly ? '2px solid #1976d2' : 0,
+              borderTop: isMobileOnly ? '2px solid #005CCB' : 0,
               marginTop: 0,
               borderTopRightRadius: 4,
               borderTopLeftRadius: 4

package/source/components/_common/MaterialSelect/MaterialSelect.styled.tsx

@@ -37,8 +37,8 @@ export const Theme = createTheme({
           borderTopLeftRadius: 0,
           borderTopRightRadius: 0,
           transformOrigin: '0 0 !important',
-          boxShadow: 'inset 2px 0px 0px 0px #1976d2, inset -2px 0px 0px 0px #1976d2',
-          borderBottom: '2px solid #1976d2',
+          boxShadow: 'inset 2px 0px 0px 0px #005CCB, inset -2px 0px 0px 0px #005CCB',
+          borderBottom: '2px solid #005CCB',
           ['& > .MuiList-root']: {
             paddingRight: '0 !important',
             width: '100% !important'
@@ -48,12 +48,12 @@ export const Theme = createTheme({
           },
           ['::-webkit-scrollbar-track']: {
             background: '#fff',
-            borderRight: '2px solid #1976d2',
+            borderRight: '2px solid #005CCB',
             boxShadow: 'inset -4px 0 0 0 #fff'
           },
           ['::-webkit-scrollbar-thumb']: {
             backgroundColor: '#e8e8e8',
-            borderRight: '2px solid #1976d2',
+            borderRight: '2px solid #005CCB',
             boxShadow: 'inset -4px 0 0 0 #fff'
           },
           ['::-webkit-scrollbar-thumb:hover']: {

package/source/components/_common/OfferRequestButtonWrapper/OfferRequestButtonWrapper.tsx

@@ -23,13 +23,18 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
   const dealerId = _get(car, 'metaData.ownerId') || null;
   const carId = _get(car, '_id', '');
   const onAutoDeIdClick = () => {
-    btnEl.current.onClick();
+    btnEl.current?.click();
   };
 
   const controlsContainerClassName = classnames(
     styles.controlsContainer,
     controlsClassContainer
   );
+
+  const getRef = (ref: HTMLButtonElement): void => {
+    btnEl.current = ref;
+  };
+ 
   return (
     <>
       <div className={controlsContainerClassName}>
@@ -41,8 +46,9 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
             _: void,
             isLoading: boolean,
             isSale: boolean,
-            isAlternative: boolean
-            ) => {
+            isAlternative: boolean,
+            isSuccess: boolean
+          ) => {
             const { metaData } = car;
             const isAlternativeType = !!metaData && !!metaData.type;
             const offerButtonClassName = classnames(
@@ -52,10 +58,12 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
               { [styles.isAlternativeButton]: isAlternative || isSale || isAlternativeType }
             );
 
+
             const getRequestButtonTitle = () => {
               if (isSale) return t('sidebar.requestOfferSale');
               // tslint:disable-next-line:no-else-after-return
               else if (isAlternativeType) return t('sidebar.importRequest');
+              else if (isSuccess) return t('CheckoutPage:onlineCheckoutModal.toMyOrder');
               else if (hasCheckout) return t('vehicleProps:title.toCheckoutCar');
               else if (isOfferRequested) return t('CheckoutPage:onlineCheckoutModal.redirectBtn');
               else return t('sidebar.requestOffer');
@@ -63,10 +71,10 @@ const OfferRequestBtnWrapper: React.FunctionComponent<IOfferRequestButtonWrapper
 
             return (
               <StyledButton
-                refs={btnEl}
                 className={offerButtonClassName}
                 onClick={onClick}
                 loading={isLoading}
+                getRef={getRef}
               >
                 {isOfferRequested
                   ? null

package/source/components/_common/withStats/withStats.styl

@@ -148,3 +148,6 @@ $indent = 10px
 
 .new
   text-transform: uppercase
+
+.imagesCount
+  margin-left: 0 !important

package/source/components/_common/withStats/withStats.tsx

@@ -71,7 +71,7 @@ const withStats = (WrappedComponent: any) => ({
     const delimiters = { xs: '|', sm: '|', md: 'von' };
 
     return (
-      <div className={styles.section}>
+      <div className={classnames(styles.section, styles.imagesCount)}>
         {statsSize === 'md' ? <IconSVG name='common_camera' customDimensions className={styles.cameraIcon} /> : null}
         {!!imagesCount && <span>{`${activeSlide + 1} ${delimiters[statsSize]} ${imagesCount}`}</span>}
       </div>
@@ -115,20 +115,23 @@ const withStats = (WrappedComponent: any) => ({
     const favoritesIconClassName = classnames(styles.statsStarIcon, { [styles.accented]: isFavoured });
 
     return (
-      <div className={styles.section}>
-        {!!totalCarImpCount ? <div className={styles.statsViewsCount}>
-          <IconSVG name='common_SliderEye' customDimensions className={styles.statsEyeIcon} />
-          <span>
-            {totalCarImpCount}
-          </span>
-        </div> : null}
-        {!!totalFavCount ? <div className={favoritesClassName} onClick={onFavoriteClick}>
-          <IconSVG name='star' customDimensions className={favoritesIconClassName} />
-          <span>
-            {totalFavCount}
-          </span>
-        </div> : null}
-      </div>
+      <>
+        {(!!totalCarImpCount || !!totalFavCount) && <div className={styles.section}>
+            {!!totalCarImpCount ? <div className={styles.statsViewsCount}>
+              <IconSVG name='common_SliderEye' customDimensions className={styles.statsEyeIcon} />
+              <span>
+                {totalCarImpCount}
+              </span>
+            </div> : null}
+            {!!totalFavCount ? <div className={favoritesClassName} onClick={onFavoriteClick}>
+              <IconSVG name='star' customDimensions className={favoritesIconClassName} />
+              <span>
+                {totalFavCount}
+              </span>
+            </div> : null}
+          </div>
+        }
+      </>
     );
   };
 

package/source/components/containers/SearchPage/FiltersContainer/FiltersContainer.styl

@@ -57,7 +57,9 @@
 .vehicleId
   padding: 11px
   background-color: #fff
-
+  border-bottom: 1px solid #e8e8e8;
+  padding-bottom: 19px;
+  
 .vehicleIdLabel
   font-size: 14px
   font-weight: 700

package/source/components/containers/SearchPage/FiltersContainer/FiltersContainer.tsx

@@ -34,7 +34,7 @@ interface IFiltersContainerProps extends IRouteComponentProps<PathParamsType> {
   aggregation: {};
   setActiveSorting: (newActiveSorting: string) => void;
   setLastSearchString: (filters: IFilters, query: string) => void;
-  search: (filters: any, page?: number, getStats?: boolean) => void;
+  search: (filters: any, page?: number, getStats?: boolean, vehicleID?: string|null) => void;
   resetFiltersToDefault: () => void;
   clearSearchState: (clearSorting?: boolean) => void;
   addMmsGroup: () => void;
@@ -55,7 +55,7 @@ interface IFiltersContainerProps extends IRouteComponentProps<PathParamsType> {
   t?: (phrase: string) => string;
   isDealerPage?: boolean;
   isAlternative?: boolean;
-  isReferenceSearch?: boolean;
+  vehicleID?: string;
   successTransition?: boolean;
   isErrorAlternativeField: boolean;
   Link?: any;
@@ -68,11 +68,11 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
   }
 
   componentDidUpdate(prevProps: IFiltersContainerProps) {
-    const { location, filters, resetFiltersToDefault, clearSearchState, search, activeSorting, setActiveSorting, isReferenceSearch } = this.props;
+    const { location, filters, resetFiltersToDefault, clearSearchState, search, activeSorting, setActiveSorting, vehicleID } = this.props;
+    console.log('vehicleID', vehicleID);
     if (
         (prevProps.location.search !== location.search) && 
-        !_startsWith(location.search, '?pageNumber') && 
-        !isReferenceSearch)
+        !_startsWith(location.search, '?pageNumber'))
       {
       const queryFromFilters = this.getQueryFromFilters();
       const prevQueryFromFilters = ['pageNumber', 'activeSort'].reduce((url, param) => url.replace(new RegExp(`(^${param}=\\w*&|&${param}=\\w*)`), ''), prevProps.location.search.slice(1));
@@ -93,7 +93,7 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
       }
 
       clearSearchState(!activeSort);
-      search(filters, Number(pageNumber) || 1, true);
+      search(filters, Number(pageNumber) || 1, true, vehicleID);
     }
 
     this.updateFinancingSearchConfig();
@@ -314,7 +314,7 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
     if (isHistogram) {
       const histogramData = histograms[filterField].length ? histograms[filterField] : RANGE_FILTERS[filter].options;
       const actualValues = {
-        from: histogramData[0].from,
+        from: filters[filter].value.from ? filters[filter].value.from : histogramData[0].from,
         to: histogramData[histogramData.length - 1].to
       };
 

package/source/framework/types/types.ts

@@ -32,6 +32,7 @@ export interface IImage {
   isSimpleTemp: boolean;
   isInProcessing: boolean;
   isTemp: boolean;
+  videoUrl:string;          // youtube link that can be used in src in youtube video,
 }
 
 export interface IPrice {
@@ -251,6 +252,7 @@ export interface IVehicleDetailedSidebarProps {
   isAlternative?: boolean;
   onCurrentSalesPriceChange: (price: number) => void;
   className?: string;
+  isFetching?: boolean;
 }
 
 interface IOfferRequestButtonWrapper {

package/source/framework/utils/CommonUtils.ts

@@ -547,6 +547,7 @@ export function setUtmParameters() {
   const domain = parsedUrl.hostname.split('.').slice(-2).join('.');
 
   document.cookie = `marketing=${JSON.stringify(marketing)};expires=${expiresDate};domain=.${domain};path=/`;
+  
 }
 
 export const updateCookieList = (handleSentryInit: () => void) => {

package/source/framework/utils/DateUtils.ts

@@ -91,3 +91,11 @@ export const getYears = (minYear = 1980, maxYear = moment().year(), reverse = fa
 export const createDateAsUTC = (date: Date): Date => new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()));
 
 // end for checkout datepicker
+
+export const fromUTCToDateString = (UTCDate: Date) => {
+  const date = new Date(UTCDate);
+  const day = date.getUTCDate().toString().padStart(2, '0');
+  const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
+  const year = date.getUTCFullYear();
+  return `${day}.${month}.${year}`;
+}