@eturnity/eturnity_reusable_components 8.40.8-EPDM-1744.0 → 8.40.8-EPDM-17464.0

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

@@ -1,442 +0,0 @@
-<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;
-    max-width: 550px;
-  `
-
-  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

@@ -1,14 +0,0 @@
-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/index.js

@@ -1,28 +0,0 @@
-import { ThemeProvider } from 'vue3-styled-components'
-import { theme, withLibraryTheme } from '@/withLibraryTheme.js'
-
-// Re-export the theme wrapper for any custom usage
-export { withLibraryTheme }
-
-// Vue plugin to install theme globally
-export const EturnityComponentsPlugin = {
-  install(app, options = {}) {
-    // Allow consumers to override the theme if needed
-    const finalTheme = options.theme || theme
-
-    // Provide theme globally to all components
-    app.provide('eturnityTheme', finalTheme)
-
-    // Make theme available via global properties as well
-    app.config.globalProperties.$eturnityTheme = finalTheme
-  },
-}
-
-// Export the theme for direct use
-export { theme }
-
-// Export ThemeProvider for consumers who want to use it directly
-export { ThemeProvider }
-
-// Default export for convenience
-export default EturnityComponentsPlugin

package/src/withLibraryTheme.js

@@ -1,28 +0,0 @@
-import { h, defineComponent } from 'vue'
-import { ThemeProvider } from 'vue3-styled-components'
-import theme from '@/assets/theme.js'
-
-/**
- * Centralized theme wrapper for all library components
- * This ensures all components from this library automatically use the library's theme
- * without requiring the consuming application to provide it
- */
-export function withLibraryTheme(component, componentName = 'Component') {
-  return defineComponent({
-    name: `Eturnity${componentName}`,
-    inheritAttrs: true,
-    setup(props, { attrs, slots }) {
-      return () =>
-        h(
-          ThemeProvider,
-          { theme },
-          {
-            default: () => h(component, { ...props, ...attrs }, slots),
-          }
-        )
-    },
-  })
-}
-
-export { theme }
-export default withLibraryTheme