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

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

@@ -0,0 +1,442 @@
+<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

@@ -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

@@ -5,17 +5,13 @@
     :add-padding-top="addPaddingTop"
     :backdrop="backdrop"
     class="rc-modal-wrapper"
-    :disable-default-media-query="disableDefaultMediaQuery"
     :full-screen="fullScreen"
     :is-open="isOpen"
     :position="position"
   >
     <ModalContainer
       v-if="isOpen"
-      :disable-default-media-query="disableDefaultMediaQuery"
       :is-loading="isLoading"
-      :max-width="maxWidth"
-      :modal-container-alignment="modalContainerAlignment"
       :overflow="overflowRule"
       @click="onClickModalContainer"
     >
@@ -55,7 +51,6 @@
     position: String,
     addPaddingTop: Boolean,
     fullScreen: Boolean,
-    disableDefaultMediaQuery: Boolean,
   }
   const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
@@ -74,30 +69,22 @@
   overflow: auto;
   padding-top: ${(props) => (props.addPaddingTop ? '80px' : '0')};
 
-  ${(props) =>
-    !props.disableDefaultMediaQuery &&
-    `@media (max-width: 425px) {
+    @media (max-width: 425px) {
       background: white;
-    }`}
+    }
   `
 
-  const modalContainerAttrs = {
-    overflow: String,
-    isLoading: Boolean,
-    disableDefaultMediaQuery: Boolean,
-    maxWidth: String,
-    modalContainerAlignment: Object,
-  }
+  const modalContainerAttrs = { overflow: String, isLoading: Boolean }
   const ModalContainer = styled('div', modalContainerAttrs)`
-    align-self: ${(props) => props.modalContainerAlignment.alignSelf};
-    justify-self: ${(props) => props.modalContainerAlignment.justifySelf};
+    align-self: center;
+    justify-self: center;
     position: relative;
     box-shadow: 0px 4px 4px 3px rgba(0, 0, 0, 0.1);
     border-radius: 4px;
     background: white;
     margin: 0 auto;
     overflow: ${(props) => props.overflow};
-    max-width: ${(props) => props.maxWidth};
+    max-width: 95%;
     max-height: 95%;
     min-width: ${(props) => (props.isLoading ? '400px' : '100px')};
     min-height: ${(props) => (props.isLoading ? '500px' : '100px')};
@@ -123,24 +110,20 @@
       right: 20px;
       top: 20px;
 
-      ${(props) =>
-        !props.disableDefaultMediaQuery &&
-        `@media (max-width: 425px) {
-          right: 14px;
-          top: 12px;
-          background: white;
-          position: fixed;
-          z-index: 99;
-        }`}
+      @media (max-width: 425px) {
+        right: 14px;
+        top: 12px;
+        background: white;
+        position: fixed;
+        z-index: 99;
+      }
     }
 
-    ${(props) =>
-      !props.disableDefaultMediaQuery &&
-      `@media (max-width: 425px) {
-        width: 100%;
-        height: 100%;
-        box-shadow: none;
-      }`}
+    @media (max-width: 425px) {
+      width: 100%;
+      height: 100%;
+      box-shadow: none;
+    }
   `
 
   export default {
@@ -155,27 +138,22 @@
     props: {
       isOpen: {
         required: true,
-        type: Boolean,
         default: false,
       },
       isLoading: {
         required: false,
-        type: Boolean,
         default: false,
       },
       hideClose: {
         required: false,
-        type: Boolean,
         default: false,
       },
       backdrop: {
         required: false,
-        type: String,
         default: 'white',
       },
       position: {
         required: false,
-        type: String,
         default: 'fixed',
       },
       stopPropagation: {
@@ -195,21 +173,6 @@
         type: Boolean,
         default: true,
       },
-      maxWidth: {
-        type: String,
-        default: '95%',
-      },
-      disableDefaultMediaQuery: {
-        type: Boolean,
-        default: false,
-      },
-      modalContainerAlignment: {
-        type: Object,
-        default: () => ({
-          alignSelf: 'center',
-          justifySelf: 'center',
-        }),
-      },
     },
     setup() {
       const modalRef = ref(null)
@@ -242,7 +205,7 @@
         this.$emit('on-close')
       },
       handleKeyDown({ key }) {
-        if (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/index.js

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

@@ -1,8 +1,11 @@
 import App from './App.vue'
 import { createApp } from 'vue'
 import router from './router/dynamicRoutes'
+import EturnityComponentsPlugin from './index.js'
 
 const app = createApp(App)
 
+// Use the plugin to provide theme globally
+app.use(EturnityComponentsPlugin)
 app.use(router)
 app.mount('#app')

package/src/withLibraryTheme.js

@@ -0,0 +1,28 @@
+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

package/dist/main.es.js

@@ -1,7 +0,0 @@
-import App from "./main.es2.js";
-import "./main.es3.js";
-import router from "./main.es4.js";
-import { createApp } from "./main.es5.js";
-const app = createApp(App);
-app.use(router);
-app.mount("#app");