@eturnity/eturnity_reusable_components 8.49.3-EPDM-13987.2 → 8.49.3-EPDM-1744.3

package/src/components/modals/cookieConsent/CookieConsent.vue

@@ -0,0 +1,443 @@
+<template>
+  <ModalComponent :hide-close="true" :is-open="isOpen" @on-close="closeModal">
+    <ModalContainer>
+      <TitleContainer>
+        <IconComponent name="cookie" size="16px" />
+        <TitleText>{{ titleText }}</TitleText>
+      </TitleContainer>
+      <ContentText v-html="contentText" />
+      <ToggleContainer>
+        <ToggleComponent
+          v-for="option in toggleOptions"
+          :key="option.choice"
+          :disabled="option.isRequired"
+          :is-checked="isToggleChecked(option.choice)"
+          :label="option.label"
+          :toggle-margin="toggleMargin"
+          @on-toggle-change="(value) => onToggleChange(option.choice, value)"
+        />
+      </ToggleContainer>
+      <ButtonsContainer>
+        <MainButton
+          v-for="button in buttonOptions"
+          :key="button.choice"
+          :text="button.text"
+          type="tertiary"
+          @click="handleButtonClick(button.choice)"
+        />
+      </ButtonsContainer>
+    </ModalContainer>
+  </ModalComponent>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import ModalComponent from '../modal'
+  import IconComponent from '../../icon'
+  import ToggleComponent from '../../inputs/toggle'
+  import MainButton from '../../buttons/mainButton'
+
+  const ModalContainer = styled.div`
+    padding: 24px;
+    min-width: 412px;
+    max-width: 452px;
+  `
+
+  const TitleContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 24px;
+  `
+
+  const TitleText = styled.div`
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 140%;
+    color: ${(props) => props.theme.semanticColors.teal[800]};
+  `
+
+  const ContentText = styled.div`
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 150%;
+    color: ${(props) => props.theme.semanticColors.grey[800]};
+    margin-bottom: 16px;
+
+    a {
+      color: ${(props) => props.theme.semanticColors.purple[500]};
+      text-decoration: none;
+
+      &:visited {
+        color: ${(props) => props.theme.semanticColors.purple[500]};
+      }
+    }
+  `
+
+  const ToggleContainer = styled.div`
+    margin-bottom: 24px;
+    display: inline-flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+  `
+
+  const ButtonsContainer = styled.div`
+    display: inline-flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  `
+
+  export default {
+    name: 'CookieConsent',
+    components: {
+      ModalComponent,
+      ModalContainer,
+      IconComponent,
+      TitleContainer,
+      TitleText,
+      ContentText,
+      ToggleComponent,
+      ToggleContainer,
+      MainButton,
+      ButtonsContainer,
+    },
+    props: {
+      isOpen: {
+        type: Boolean,
+        default: false,
+      },
+      titleText: {
+        type: String,
+        default: 'Cookie Consent',
+      },
+      contentText: {
+        type: String,
+        default: 'We use cookies to enhance site navigation',
+      },
+      toggleMargin: {
+        type: String,
+        default: null,
+        required: false,
+      },
+      toggleOptions: {
+        type: Array,
+        default: () => [],
+        required: true,
+      },
+      buttonOptions: {
+        type: Array,
+        default: () => [],
+        required: true,
+      },
+    },
+    emits: ['on-close'],
+    data() {
+      return {
+        cookieState: {},
+      }
+    },
+    watch: {
+      isOpen(newValue) {
+        if (newValue) {
+          // Reload cookie state when modal is opened
+          this.loadCookieState()
+        }
+      },
+    },
+    created() {
+      this.loadCookieState()
+      this.checkUrlParams()
+    },
+    methods: {
+      getUrlParams() {
+        const params = new URLSearchParams(window.location.search)
+        const result = {}
+        for (const [key, value] of params) {
+          result[key] = value
+        }
+        return result
+      },
+      checkUrlParams() {
+        const urlParams = this.getUrlParams()
+
+        // If cookies_accepted=true, trigger accept_all
+        if (urlParams.cookies_accepted === 'true') {
+          this.handleButtonClick('accept_all')
+          return
+        }
+
+        // Only process cookie changes if cookieType=advanced
+        if (urlParams.cookieType !== 'advanced') {
+          return
+        }
+
+        // Check if cookies_popup=false and cookies_accepted=false
+        if (
+          urlParams.cookies_popup === 'false' &&
+          urlParams.cookies_accepted === 'false'
+        ) {
+          const cookieValue = this.getCookieValue('cookieConsent')
+          if (!cookieValue) {
+            return
+          }
+
+          try {
+            const cookieData = JSON.parse(cookieValue)
+            let hasChanges = false
+
+            // Set marketing and statistics to false
+            if (cookieData.categories) {
+              if (cookieData.categories.marketing !== false) {
+                cookieData.categories.marketing = false
+                hasChanges = true
+              }
+              if (cookieData.categories.statistics !== false) {
+                cookieData.categories.statistics = false
+                hasChanges = true
+              }
+            }
+
+            // If any changes were made, update the cookie and state
+            if (hasChanges) {
+              cookieData.timestamp = new Date().toISOString()
+              this.setCookieConsent(cookieData)
+              this.cookieState = { ...cookieData.categories }
+            }
+          } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error checking URL params:', error)
+          }
+          return
+        }
+
+        // Only proceed with individual param checks if cookies_accepted=true
+        if (urlParams.cookies_accepted !== 'true') {
+          return
+        }
+
+        const cookieValue = this.getCookieValue('cookieConsent')
+        if (!cookieValue) {
+          return
+        }
+
+        try {
+          const cookieData = JSON.parse(cookieValue)
+          let hasChanges = false
+
+          // Check for cookies_marketing param
+          if (urlParams.cookies_marketing !== undefined) {
+            const marketingValue = urlParams.cookies_marketing === 'true'
+            if (
+              cookieData.categories &&
+              cookieData.categories.marketing !== marketingValue
+            ) {
+              cookieData.categories.marketing = marketingValue
+              hasChanges = true
+            }
+          }
+
+          // Check for cookies_statistics param
+          if (urlParams.cookies_statistics !== undefined) {
+            const statisticsValue = urlParams.cookies_statistics === 'true'
+            if (
+              cookieData.categories &&
+              cookieData.categories.statistics !== statisticsValue
+            ) {
+              cookieData.categories.statistics = statisticsValue
+              hasChanges = true
+            }
+          }
+
+          // If any changes were made, update the cookie and state
+          if (hasChanges) {
+            cookieData.timestamp = new Date().toISOString()
+            this.setCookieConsent(cookieData)
+            this.cookieState = { ...cookieData.categories }
+          }
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error('Error checking URL params:', error)
+        }
+      },
+      loadCookieState() {
+        const cookieValue = this.getCookieValue('cookieConsent')
+        if (cookieValue) {
+          try {
+            const cookieData = JSON.parse(cookieValue)
+            if (cookieData.categories) {
+              this.cookieState = { ...cookieData.categories }
+            }
+          } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error loading cookie state:', error)
+          }
+        } else {
+          // Initialize cookieState with default values from toggleOptions
+          const initialState = {}
+          this.toggleOptions.forEach((option) => {
+            initialState[option.choice] = option.isRequired ? true : false
+          })
+          this.cookieState = initialState
+        }
+      },
+      closeModal() {
+        this.$emit('on-close')
+      },
+      getCookieValue(cookieName) {
+        const name = cookieName + '='
+        const decodedCookie = decodeURIComponent(document.cookie)
+        const cookieArray = decodedCookie.split(';')
+        for (let i = 0; i < cookieArray.length; i++) {
+          let cookie = cookieArray[i].trim()
+          if (cookie.indexOf(name) === 0) {
+            return cookie.substring(name.length, cookie.length)
+          }
+        }
+        return null
+      },
+      setCookieConsent(cookieData) {
+        const cookieString = JSON.stringify(cookieData)
+        const expiryDate = new Date()
+        expiryDate.setFullYear(expiryDate.getFullYear() + 1) // Cookie expires in 1 year
+        document.cookie = `cookieConsent=${encodeURIComponent(
+          cookieString
+        )}; expires=${expiryDate.toUTCString()}; path=/`
+      },
+      initializeCookie() {
+        const existingCookie = this.getCookieValue('cookieConsent')
+
+        // If cookie doesn't exist, create it
+        if (!existingCookie) {
+          const categories = {}
+          this.toggleOptions.forEach((option) => {
+            // Set required options to true, others to false
+            categories[option.choice] = option.isRequired ? true : false
+          })
+
+          const cookieData = {
+            timestamp: new Date().toISOString(),
+            consent_given: true,
+            categories,
+          }
+
+          this.setCookieConsent(cookieData)
+          // Load the state into reactive data
+          this.cookieState = { ...categories }
+        }
+      },
+      isToggleChecked(choice) {
+        // Check if the option is required - if so, always return true
+        const option = this.toggleOptions.find((opt) => opt.choice === choice)
+        if (option && option.isRequired) {
+          return true
+        }
+
+        // If we have the choice in our reactive state, return it
+        if (Object.prototype.hasOwnProperty.call(this.cookieState, choice)) {
+          return this.cookieState[choice]
+        }
+
+        // Fallback: return false for non-required options with no state
+        return false
+      },
+      onToggleChange(choice, value) {
+        // Check if this is a required option - if so, don't allow changes
+        const option = this.toggleOptions.find((opt) => opt.choice === choice)
+        if (option && option.isRequired) {
+          return
+        }
+
+        const cookieValue = this.getCookieValue('cookieConsent')
+
+        if (cookieValue) {
+          try {
+            const cookieData = JSON.parse(cookieValue)
+
+            // Set the category value
+            if (cookieData.categories) {
+              cookieData.categories[choice] = value
+
+              // Update timestamp
+              cookieData.timestamp = new Date().toISOString()
+
+              // Save updated cookie
+              this.setCookieConsent(cookieData)
+
+              // Update reactive state to trigger re-render
+              this.cookieState = { ...cookieData.categories }
+            }
+          } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error updating cookieConsent cookie:', error)
+          }
+        } else {
+          // If cookie doesn't exist yet, just update the reactive state
+          this.cookieState = { ...this.cookieState, [choice]: value }
+        }
+      },
+      handleButtonClick(choice) {
+        // reject_all, accept_all, save_selected
+        const cookieValue = this.getCookieValue('cookieConsent')
+        let cookieData = { categories: {} }
+
+        if (cookieValue) {
+          try {
+            cookieData = JSON.parse(cookieValue)
+          } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error parsing cookieConsent:', error)
+          }
+        }
+
+        // Initialize categories from toggleOptions if they don't exist
+        if (!cookieData.categories) {
+          cookieData.categories = {}
+        }
+        this.toggleOptions.forEach((option) => {
+          if (
+            !Object.prototype.hasOwnProperty.call(
+              cookieData.categories,
+              option.choice
+            )
+          ) {
+            cookieData.categories[option.choice] = option.isRequired
+              ? true
+              : false
+          }
+        })
+
+        if (choice === 'reject_all') {
+          cookieData.timestamp = new Date().toISOString()
+          cookieData.consent_given = true
+          cookieData.categories = {
+            ...cookieData.categories,
+            marketing: false,
+            statistics: false,
+          }
+          this.setCookieConsent(cookieData)
+        } else if (choice === 'accept_all') {
+          cookieData.timestamp = new Date().toISOString()
+          cookieData.consent_given = true
+          cookieData.categories = {
+            ...cookieData.categories,
+            marketing: true,
+            statistics: true,
+          }
+          this.setCookieConsent(cookieData)
+        } else if (choice === 'save_selected') {
+          cookieData.timestamp = new Date().toISOString()
+          cookieData.consent_given = true
+          cookieData.categories = this.cookieState
+          this.setCookieConsent(cookieData)
+        }
+
+        // Set allowCookies cookie to true
+        const expiryDate = new Date()
+        expiryDate.setFullYear(expiryDate.getFullYear() + 1) // Cookie expires in 1 year
+        document.cookie = `allowCookies=true; expires=${expiryDate.toUTCString()}; path=/`
+        this.$emit('on-close')
+      },
+    },
+  }
+</script>

package/src/components/modals/cookieConsent/index.js

@@ -0,0 +1,14 @@
+import { h } from 'vue'
+import { ThemeProvider } from 'vue3-styled-components'
+import theme from '../../../assets/theme.js'
+import CookieConsentComponent from './CookieConsent.vue'
+
+export default {
+  name: 'EturnityCookieConsent',
+  setup(props, { attrs, slots }) {
+    return () =>
+      h(ThemeProvider, { theme }, () =>
+        h(CookieConsentComponent, { ...props, ...attrs }, slots)
+      )
+  },
+}

package/src/components/modals/modal/index.vue

@@ -15,7 +15,7 @@
       :overflow="overflowRule"
       @click="onClickModalContainer"
     >
-      <Spinner v-if="isLoading" :limited-to-modal="true" size="large" />
+      <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
       <ContentContainer v-if="!isLoading">
         <slot></slot>
       </ContentContainer>
@@ -173,10 +173,6 @@
         type: Boolean,
         default: true,
       },
-      closeOnEscape: {
-        type: Boolean,
-        default: true,
-      },
     },
     setup() {
       const modalRef = ref(null)
@@ -209,7 +205,7 @@
         this.$emit('on-close')
       },
       handleKeyDown({ key }) {
-        if (this.closeOnEscape && key === 'Escape') {
+        if (key === 'Escape' && !this.hideClose) {
           this.onCloseModal()
         }
       },

package/src/components/tabsHeader/TabsHeader.spec.js

@@ -35,7 +35,7 @@ describe('TabsHeader', () => {
         ...props,
       },
       global: {
-        mocks: {
+        provide: {
           theme,
         },
       },

package/src/components/threeDots/index.vue

@@ -45,15 +45,10 @@
             {{ child.name }}
           </OptionChild>
         </ChildrenContainer>
-        <OptionsContainer
-          v-if="!isLoading"
-          :color-theme="colorTheme"
-          :text-wrap="textWrap"
-        >
+        <OptionsContainer v-if="!isLoading" :text-wrap="textWrap">
           <OptionItem
             v-for="(item, index) in options"
             :key="item.value"
-            :color-theme="colorTheme"
             :data-id="item.dataId"
             :is-disabled="item.disabled"
             tabindex="0"
@@ -159,9 +154,7 @@
     }
   `
 
-  const ButtonContainer = styled('div', {
-    iconColor: String,
-  })`
+  const ButtonContainer = styled('div', { iconColor: String })`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -203,19 +196,14 @@
     background: #fff;
   `
 
-  const OptionsContainerAttrs = { textWrap: Boolean, colorTheme: String }
+  const OptionsContainerAttrs = { textWrap: Boolean }
   const OptionsContainer = styled('div', OptionsContainerAttrs)`
-    border: 1px solid
-      ${(props) =>
-        props.colorTheme == 'dark'
-          ? props.theme.semanticColors.teal[500]
-          : props.theme.colors.grey3};
+    border: 1px solid ${(props) => props.theme.colors.grey3};
     display: grid;
     grid-template-columns: 1fr;
     ${(props) => (props.textWrap ? 'width: 220px' : 'width: max-content')};
     border-radius: 4px;
-    background-color: ${({ colorTheme }) =>
-      colorTheme == 'dark' ? theme.colors.black : '#fff'};
+    background-color: #fff;
     max-height: 220px;
     overflow: auto;
     height: max-content;
@@ -223,7 +211,7 @@
       props.textWrap ? 'white-space: normal' : 'white-space: nowrap'};
   `
 
-  const optionAttrs = { isDisabled: Boolean, colorTheme: String }
+  const optionAttrs = { isDisabled: Boolean }
   const OptionItem = styled('div', optionAttrs)`
     padding: 12px;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -231,19 +219,13 @@
     position: relative;
     ${(props) =>
       props.isDisabled
-        ? `background-color:  ${(colorTheme) =>
-            colorTheme == 'dark'
-              ? theme.semanticColors.teal[700]
-              : props.theme.colors.grey5}!important`
+        ? `background-color: ${props.theme.colors.grey5}!important`
         : ''};
     ${(props) =>
       props.isDisabled ? `color: ${props.theme.colors.grey2}` : ''};
 
     &:hover {
-      background-color: ${(props) =>
-        props.colorTheme == 'dark'
-          ? theme.semanticColors.teal[700]
-          : '#ebeef4'};
+      background-color: #ebeef4;
     }
 
     &:focus-visible {
@@ -251,17 +233,14 @@
       background-color: #ebeef4;
     }
   `
-  const OptionChild = styled('div', { colorTheme: String })`
+  const OptionChild = styled.div`
     padding: 12px;
     cursor: pointer;
     font-size: 13px;
     position: relative;
 
     &:hover {
-      background-color: ${(props) =>
-        props.colorTheme == 'dark'
-          ? theme.semanticColors.teal[600]
-          : '#ebeef4'};
+      background-color: #ebeef4;
     }
 
     &:focus-visible {
@@ -321,25 +300,14 @@
     props: {
       options: {
         required: true,
-        type: Array,
       },
       isLoading: {
         required: false,
         default: false,
-        type: Boolean,
       },
       textWrap: {
         required: false,
         default: true,
-        type: Boolean,
-      },
-      colorTheme: {
-        type: String,
-        default: 'light',
-      },
-      dropdownPosition: {
-        type: String,
-        default: 'horizontal',
       },
       iconColor: {
         type: String,
@@ -391,42 +359,20 @@
 
         const positionArray = this.determineElementQuarter(button, rectButton)
         contextMenu.style.transform = ''
-        if (this.dropdownPosition == 'vertical') {
-          // Position horizontally (left/right/center)
-          if (positionArray.includes('left')) {
-            contextMenu.style.left =
-              rectButton.left - rectRelativeParent.left + 'px'
-          } else {
-            contextMenu.style.left =
-              rectButton.right - rectRelativeParent.left + 'px'
-            contextMenu.style.transform = 'translateX(-100%)'
-          }
-          // Position vertically (above/below)
-          if (positionArray.includes('top')) {
-            contextMenu.style.top =
-              rectButton.bottom - rectRelativeParent.top + 5 + 'px'
-          } else {
-            contextMenu.style.top =
-              rectButton.top - rectRelativeParent.top - 5 + 'px'
-            contextMenu.style.transform += ' translateY(-100%)'
-          }
+        if (positionArray.includes('left')) {
+          contextMenu.style.left =
+            rectButton.right - rectRelativeParent.left + 5 + 'px'
         } else {
-          if (positionArray.includes('left')) {
-            contextMenu.style.left =
-              rectButton.right - rectRelativeParent.left + 5 + 'px'
-          } else {
-            contextMenu.style.left =
-              rectButton.left - rectRelativeParent.left - 5 + 'px'
-            contextMenu.style.transform = 'translateX(-100%)'
-          }
-          if (positionArray.includes('top')) {
-            contextMenu.style.top =
-              rectButton.top - rectRelativeParent.top + 'px'
-          } else {
-            contextMenu.style.top =
-              rectButton.bottom - rectRelativeParent.top + 'px'
-            contextMenu.style.transform += ' translateY(-100%)'
-          }
+          contextMenu.style.left =
+            rectButton.left - rectRelativeParent.left - 5 + 'px'
+          contextMenu.style.transform = 'translateX(-100%)'
+        }
+        if (positionArray.includes('top')) {
+          contextMenu.style.top = rectButton.top - rectRelativeParent.top + 'px'
+        } else {
+          contextMenu.style.top =
+            rectButton.bottom - rectRelativeParent.top + 'px'
+          contextMenu.style.transform += ' translateY(-100%)'
         }
       },
       findRelativeParent(element) {