@bytebrand/fe-ui-core 4.2.235 → 4.2.237

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.235",
+  "version": "4.2.237",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.styl

@@ -108,3 +108,40 @@
   display: block;
   border: none;
 
+.noYoutubeWrapper
+  margin: 82px auto 0;
+  width: 487px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  +media-phone-only()
+    margin: 40px auto 0;
+    width: 297px;
+
+  svg
+    +media-phone-only()
+      width: 79px;
+      height: 56px;
+
+  .youtubeCookiesText
+    font-size: 28px;
+    font-weight: 400;
+    line-height: 36px; 
+    margin:62px 0px 54px;
+    display: block;
+    text-align: center;
+    +media-phone-only()
+      margin: 36px auto 39px;
+      font-size:17px;
+      line-height: 21px
+
+  .btn  
+    height: 38px!important
+    +media-phone-only()
+      height: 30px!important
+      font-size:13px;
+
+  .btn:first-child
+    margin-right:22px!important
+    +media-phone-only()
+      margin-right:5px!important

package/source/components/VehicleDetailedSlider/VehicleDetailedSlider.tsx

@@ -13,6 +13,10 @@ import withMagnifyGlassImage from '../_common/MagnifyGlass/MagnifyGlass';
 import { IImage, IPrice, SliderType } from '../../framework/types/types';
 import { PLACEHOLDER_IMAGE_SMALL_URL } from '../../framework/constants/common';
 import { VehicleDetailedSliderTranslate } from '../../locales/data';
+import SvgYoutubeButton from '../_common/IconSVG/SVG/slider/YoutubeButton';
+import Button from '../_common/Button/Button';
+import { updateCookieList } from '../../framework/utils/CommonUtils';
+
 
 
 import styles from './VehicleDetailedSlider.styl';
@@ -20,26 +24,27 @@ import styles from './VehicleDetailedSlider.styl';
 interface IProps {
   t: (phrase: string, config?: any) => string;
   price: IPrice;
-  photos: IImage [];
-  exteriorPhotos: IImage [];
+  photos: IImage[];
+  exteriorPhotos: IImage[];
   interiorPhoto: IImage;
   mainImageUrl: string;
   mainImageBlur: boolean;
   statsData: any;
   isFavorite: boolean;
   showNewLabel: boolean;
-  activeTab:number;
+  activeTab: number;
   make: string;
   model: string;
   subModel: string;
   powerKW: number;
   powerPS: number;
-  financingConfig:any;
-  youtubeId:string;
+  financingConfig: any;
+  youtubeId: string;
   showModal?: (id: string, props?: any) => void;
   hideModal: (id: string) => void;
   onCarFavorite: (event: MouseEvent<HTMLElement>) => void;
-  showDownPayment:boolean;
+  showDownPayment: boolean;
+  handleSentryInit?: () => void;
 }
 
 interface IState {
@@ -48,7 +53,8 @@ interface IState {
   smallLoaded: boolean;
   largeLoaded1: boolean;
   largeLoaded01: boolean;
-  videoSrc:string;
+  videoSrc: string;
+  showYoutube: boolean;
 }
 
 const MagnifyGlassImage = withMagnifyGlassImage(Image);
@@ -65,30 +71,33 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
   };
 
   private slider: any;
-  
+
   private imagesCache: string[] = [];
 
   constructor(props: IProps) {
-
     super(props);
+    const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
+    const youtubeConfig = !cookieConfig?.marketing?.includes('youtube');
     this.state = {
       activeSlide: 0,
       largeLoaded: false,
       smallLoaded: false,
       largeLoaded1: false,
       largeLoaded01: false,
-      videoSrc:''
-
+      videoSrc: '',
+      showYoutube: youtubeConfig
     };
   }
 
   handleSetFirstSlide = () => {
     this.slider.slickGoTo(0);
-
   };
 
 
-  componentDidUpdate(prevProps: IProps) {
+  componentDidUpdate(prevProps: IProps, prevState: IState) {
+    const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
+    const showYoutube = !cookieConfig?.marketing?.includes('youtube');
+    console.log('showYoutube', showYoutube);
     if (prevProps.photos.length !== this.props.photos.length && this.props.photos.length === 0) {
       this.setState(() => ({
         largeLoaded: false,
@@ -97,10 +106,15 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
         largeLoaded01: false
       }));
     }
+    if (showYoutube !== prevState.showYoutube) {
+      this.setState(() => ({
+        showYoutube: showYoutube
+      }));
+    }
   }
 
   handleOpenSliderModal = (sliderType: SliderType) => {
-    const { t = (phrase: string) => _get(VehicleDetailedSliderTranslate(statsData), phrase, phrase), photos, exteriorPhotos, interiorPhoto, showModal, hideModal, statsData } = this.props;
+    const { t = (phrase: string) => _get(VehicleDetailedSliderTranslate(statsData), phrase, phrase), photos, exteriorPhotos, interiorPhoto, showModal, hideModal, statsData, handleSentryInit } = this.props;
     const { activeSlide } = this.state;
 
     showModal('VEHICLE_DETAILED_SLIDER_MODAL', {
@@ -116,21 +130,22 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
       onClose: (index: number) => {
         this.slider.slickGoTo(index, true);
         hideModal('VEHICLE_DETAILED_SLIDER_MODAL');
-      }
+      },
+      handleSentryInit: handleSentryInit
     });
   };
 
   handleSlideChange = (_currentSlide: any, nextSlide: number) => {
     const { photos } = this.props;
     if (photos[nextSlide].videoUrl) {
-      this.setState({ videoSrc: `https://www.youtube-nocookie.com/embed/${photos[nextSlide].videoUrl}` })
+      this.setState({ videoSrc: `https://www.youtube.com/embed/${photos[nextSlide].videoUrl}` })
     } else {
       this.setState({ videoSrc: null })
     }
   }
 
   getImages = () => {
-    const { photos, mainImageUrl, mainImageBlur } = this.props;
+    const { photos, mainImageUrl, mainImageBlur, t, handleSentryInit } = this.props;
     const { activeSlide, largeLoaded, smallLoaded, largeLoaded1, largeLoaded01 } = this.state;
 
     const imageProps = {
@@ -164,13 +179,25 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
         isMouseDown = false;
         isDragging = false;
       };
-      
+
+      const updateCookies = () => {
+        const cookieConfig = localStorage.getItem('cookieConfig');
+        const conf = JSON.parse(cookieConfig);
+        const indexToRemove = conf.marketing.indexOf('youtube');
+        if (indexToRemove !== -1) {
+          conf.marketing.splice(indexToRemove, 1);
+        }
+        const showYoutube = !conf?.marketing?.includes('youtube');
+        this.setState({ showYoutube: showYoutube })
+        localStorage.setItem('cookieConfig', JSON.stringify(conf));
+        updateCookieList(handleSentryInit);
+      }
+
 
       const imagesCount = photos.length;
       const currentSlide = activeSlide;
       const prevSlide = (activeSlide - 1 % imagesCount + imagesCount) % imagesCount;
       const nextSlide = (activeSlide + 1 % imagesCount + imagesCount) % imagesCount;
-
       return photos.map((item: IImage, index: number) => {
         const showImage = index === currentSlide || index === prevSlide || index === nextSlide || this.imagesCache[index] !== undefined;
         const imageUrlSmall = _get(item, 'imageUrlSmall', null);
@@ -179,14 +206,13 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
         this.imagesCache[currentSlide] = imageUrlLarge;
         this.imagesCache[prevSlide] = imageUrlLarge;
         this.imagesCache[nextSlide] = imageUrlLarge;
-
         return (
           <div
             className={styles.photo}
             key={imageUrlLarge}
             onMouseDown={handleMouseDown}
             onMouseMove={handleMouseMove}
-            onMouseUp={handleMouseUp}
+            onMouseUp={this.state.showYoutube ? handleMouseUp : null}
           >
             {showImage && !item.videoUrl && (
               <MagnifyGlassImage
@@ -196,7 +222,7 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
                 {...imageProps}
               />
             )}
-             {showImage && item.videoUrl && (
+            {showImage && item.videoUrl && this.state.showYoutube && (
               <iframe
                 width='100%'
                 height='441'
@@ -205,56 +231,68 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
                 className={styles.frame}
               ></iframe>
             )}
+            {showImage && item.videoUrl && !this.state.showYoutube && (
+              <div className={styles.noYoutubeWrapper}>
+                <SvgYoutubeButton></SvgYoutubeButton>
+                <span className={styles.youtubeCookiesText}>{t('youtube.acceptCookiesText')}</span>
+                <div>
+                  <Button variant='text' className={styles.btn} onClick={() => window.open('https://www.youtube.com/howyoutubeworks/our-commitments/protecting-user-data/', '_blank')}>
+                    {t('youtube.dataProtection')}
+                  </Button>
+                  <Button color='primary' className={styles.btn} onClick={updateCookies}>{t('youtube.allow')}</Button>
+                </div>
+              </div>
+            )}
           </div>
         );
       });
     }
     if (mainImageUrl) {
-      const imagesCount = Array.isArray(photos) && photos.length > 0 ? photos.length  : 0;
+      const imagesCount = Array.isArray(photos) && photos.length > 0 ? photos.length : 0;
       const prevSlide = (activeSlide - 1 % imagesCount + imagesCount) % imagesCount;
       const nextSlide = (activeSlide + 1 % imagesCount + imagesCount) % imagesCount;
       return (
-          // preload cached photos from props
-
-          <div className={classnames(styles.photo, { [styles.blurred]: (mainImageBlur && mainImageUrl !== PLACEHOLDER_IMAGE_SMALL_URL) })} key={mainImageUrl}>
-            {(!largeLoaded || !smallLoaded || !largeLoaded1 || !largeLoaded01) && <Image src={mainImageUrl} {...imageProps} /> }
-
-            { Array.isArray(photos) && photos.length > 0 &&  <Image
-              style={ { display: 'none' } }
-              src={ photos[activeSlide]?.imageUrlSmall }
-              onLoad={ () => this.setState({ smallLoaded: true }) }
-              {...imageProps}
-              />
-            }
-            { Array.isArray(photos) && photos.length > 0  && <Image
-              style={ { display: 'none' } }
-              src={ photos[activeSlide]?.imageUrlLarge }
-              onLoad={ () => this.setState({ largeLoaded: true }) }
-              {...imageProps}
-              />
-            }
-
-            { Array.isArray(photos) && photos.length > 0  && <Image
-              style={ { display: 'none' } }
-              src={ photos[nextSlide]?.imageUrlLarge }
-              onLoad={ () => this.setState({ largeLoaded1: true }) }
-              {...imageProps}
-              />
-            }
-            { Array.isArray(photos) && photos.length > 0  && <Image
-              style={ { display: 'none' } }
-              src={ photos[prevSlide]?.imageUrlLarge }
-              onLoad={ () => this.setState({ largeLoaded01: true }) }
-              {...imageProps}
-              />
-            }
-          </div>
+        // preload cached photos from props
+
+        <div className={classnames(styles.photo, { [styles.blurred]: (mainImageBlur && mainImageUrl !== PLACEHOLDER_IMAGE_SMALL_URL) })} key={mainImageUrl}>
+          {(!largeLoaded || !smallLoaded || !largeLoaded1 || !largeLoaded01) && <Image src={mainImageUrl} {...imageProps} />}
+
+          {Array.isArray(photos) && photos.length > 0 && <Image
+            style={{ display: 'none' }}
+            src={photos[activeSlide]?.imageUrlSmall}
+            onLoad={() => this.setState({ smallLoaded: true })}
+            {...imageProps}
+          />
+          }
+          {Array.isArray(photos) && photos.length > 0 && <Image
+            style={{ display: 'none' }}
+            src={photos[activeSlide]?.imageUrlLarge}
+            onLoad={() => this.setState({ largeLoaded: true })}
+            {...imageProps}
+          />
+          }
+
+          {Array.isArray(photos) && photos.length > 0 && <Image
+            style={{ display: 'none' }}
+            src={photos[nextSlide]?.imageUrlLarge}
+            onLoad={() => this.setState({ largeLoaded1: true })}
+            {...imageProps}
+          />
+          }
+          {Array.isArray(photos) && photos.length > 0 && <Image
+            style={{ display: 'none' }}
+            src={photos[prevSlide]?.imageUrlLarge}
+            onLoad={() => this.setState({ largeLoaded01: true })}
+            {...imageProps}
+          />
+          }
+        </div>
       );
 
     }
 
     return (
-      <div className={styles.noPhoto}/>
+      <div className={styles.noPhoto} />
     );
   };
 
@@ -320,16 +358,16 @@ class VehicleDetailedSlider extends Component<IProps, IState> {
     return (
       <div className={styles.sliderWrap}>
         {isMobileOnly &&
-          <Title {...{ t, make, model, subModel, powerKW, powerPS, onCarFavorite, isFavorite }}/>
+          <Title {...{ t, make, model, subModel, powerKW, powerPS, onCarFavorite, isFavorite }} />
         }
         <div className={styles.slider}>
-          {!photos[activeSlide]?.videoUrl && <PriceData {...priceProps}/>}
+          {!photos[activeSlide]?.videoUrl && <PriceData {...priceProps} />}
           <Slider ref={slider => (this.slider = slider)} {...sliderProps}>
             {this.getImages()}
           </Slider>
           {!photos[activeSlide]?.videoUrl ? (
-             isMobileOnly ? <MobileStats {...statsProps} /> : <Stats {...statsProps} />
-            ) : null}
+            isMobileOnly ? <MobileStats {...statsProps} /> : <Stats {...statsProps} />
+          ) : null}
         </div>
       </div>
     );

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/Modal/modals/PreviewCookieModal/PreviewCookieModal.tsx

@@ -20,7 +20,7 @@ const PreviewCookieModal = ({ toggleModal, setModal, handleSentryInit } : IPrevi
 
   const onDisableAll = () => {
     localStorage.setItem('cookieConfig', JSON.stringify({
-      'marketing':['cf','cip','cnac','car','test_cookie','IDE'],
+      'marketing':['cf','cip','cnac','car','test_cookie','IDE', 'bid'],
       'analytics':['sentry','callback','locale','uid','PugT','demdex','cto_bundle','tuuid','tuuid_lu','c','CMID','CMPS','CMPRO','uuid2','um','umeh','KRTBCOOKIE_97','IDSYNC','dpm','_kuid_','visitor-id','data-c-ts','data-c','CMTS','mv_tokens','A3','mv_tokens_eu-v1','am_tokens','am_tokens_eu-v1','iteo','_fbp','_clck','_clsk','_uetsid','_uetvid','analytics_storage','ad_storage','functionality_storage','personalization_storage','security_storage','hotjar']
     }));
     updateCookieList(handleSentryInit);

package/source/framework/constants/common.ts

@@ -30,7 +30,8 @@ export const COOKIE_SCHEMA_LINKS = {
   Microsoft: 'https://privacy.microsoft.com/de-de/privacystatement',
   Matomo: 'https://matomo.org/privacy-policy/',
   Trustpilot: 'https://de.legal.trustpilot.com/for-reviewers/end-user-privacy-terms',
-  Awin: 'https://www.awin.com/de/datenschutzerklarung'
+  Awin: 'https://www.awin.com/de/datenschutzerklarung',
+  Youtube:'https://www.youtube.com/howyoutubeworks/our-commitments/protecting-user-data/'
 }
 
 export const COOKIE_SCHEMA = {
@@ -94,12 +95,15 @@ export const COOKIE_SCHEMA = {
       'cnac',
       'car'
     ],
+    Awin: [
+      'bid'
+    ],
     Google: [
       'test_cookie',
       'IDE',
     ],
-    Awin: [
-      'bid'
+    Youtube: [
+      'youtube'
     ]
   }
 };

package/source/framework/utils/CommonUtils.ts

@@ -547,10 +547,11 @@ 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) => {
-  const cookieConfig = JSON.parse(localStorage.getItem('cookieConfig')) || {};
+  const cookieConfig = JSON.parse(localStorage.getItem('marketing')) || {};
   let isSentryGranted = true; // Sentry
   let disabledCookies: any[] = [];
   const parsedUrl = new URL(window.location.href);