hr-design-system-handlebars 1.114.49 → 1.114.50

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.114.50 (Mon Jan 06 2025)
+
+#### 🐛 Bug Fix
+
+- Dpe 3328 c [#1199](https://github.com/mumprod/hr-design-system-handlebars/pull/1199) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
+
+#### Authors: 1
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+
+---
+
 # v1.114.49 (Thu Dec 19 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3711,7 +3711,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1734599250735;
+  counter-reset: cnt1736163494047;
 }
 html { scroll-behavior: smooth; }
 .placeholder-text-xs::-webkit-input-placeholder {
@@ -4126,7 +4126,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1734599250735 1;
+  counter-increment: cnt1736163494047 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4144,7 +4144,7 @@ html { scroll-behavior: smooth; }
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1734599250735);
+  content: counter(cnt1736163494047);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/alpine.js

@@ -21,6 +21,7 @@ AsyncAlpine.init(Alpine)
     .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
     .data('inputHandler', ()=> import('components/forms/js/inputHandler.alpine.js'))
     .data('contactForm', ()=> import('components/forms/js/contactForm.alpine.js'))
+    .data('newsletterForm', ()=> import('components/newsletter/js/newsletterForm.alpine.js'))
     .start()
 
 window.Alpine = Alpine

package/dist/assets/js/components/newsletter/js/newsletterForm.alpine.js

@@ -0,0 +1,194 @@
+import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+
+export default function newsletterForm(formId,trackingInformations) {
+    return {
+        isPosting: false,
+        wasPosted: false,
+        wasPostedWithSuccess: false,
+        wasPostedWithError: false,
+        wasPostedAlreadyRegistered: false,
+        isWebview: window.parent.document.documentElement.classList.contains('webview'),
+        ajaxTimeout: 60 * 1000,
+        form: this.$refs[formId],
+        formWrapper: this.$refs[formId].closest("#formWrapper"),
+        actionUrl: "",
+        formInit(){
+            this.$store.forms.submissionAttempted[formId] = false; 
+            //this.$store.forms.errorMessages = JSON.parse(errorMessages.replace(/"/g,'"'))
+            this.actionUrl = this.form.getAttribute('action')
+            console.log("FORMID: "+formId)
+            console.log("FORM: ", this.form)
+            console.log("ACTION: "+this.actionUrl)
+            console.log("GETATTRIBUTE "+ this.form.getAttribute('action'))
+        },
+        scrollToElementAndCenterWithTimeout(element, timeout){
+            setTimeout(() => {
+                element.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center'
+                 });
+             }, timeout);
+        },
+        submitButtonHandler(event) {
+            this.$store.forms.submissionAttempted[formId] = true;
+            if(this.form.reportValidity()){               
+                this.handleSubmit(event)
+            } else {
+                this.scrollToElementAndCenterWithTimeout(document.activeElement, 50)                
+            }
+        },
+        retryHandler() {
+            this.wasPosted = false;
+            this.wasPostedWithError = false;
+            this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 50)
+            
+        },
+        handleValidationErrors(errors) {
+            console.log('Validation Errors:', errors);
+            this.$store.forms.serverErrorFields[formId] = errors;
+            console.log('Validation Errors in Store:', this.$store.forms.serverErrorFields);
+        },
+        resetValidationErrors() {    
+            this.$store.forms.serverErrorFields[formId] = {}
+        },
+        async postData() {
+            const formData = new FormData(this.form)
+            // use timestamp in seconds because the newsletter tool cannot handle milliseconds
+            formData.set('confirm-data-protection', Math.ceil(Date.now() / 1000))
+    
+            const response = await fetch(this.actionUrl, {
+                method: 'POST',
+                body: formData,
+            })
+            return response
+        },
+        handleSubmit (event) {
+            event.preventDefault();
+        
+            if (!this.isWebview) {    
+                uxAction(trackingInformations); 
+            }
+        
+            if (this.isPosting) return;
+            this.isPosting = true;
+
+            this.postData()
+                .then(async response => {
+                    console.log(await response)
+                    if (!response.ok) {
+                       
+                        throw new Error('Netzwerk- oder Serverfehler')
+                    }
+                    return response
+                })
+                .then(async response => {
+                    switch (response.body) {
+                        case 'OK':
+                            console.log("OK");
+                            this.wasPosted = true;
+                            this.wasPostedWithSuccess = true;
+                            this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                            break
+                        case 'no_valid_newsletters':
+                            console.log("Already registered");
+                            this.wasPosted = true;
+                            this.wasPostedAlreadyRegistered = true;
+                            this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                            break
+                        default:
+                            console.log("default");
+                            this.wasPosted = true;
+                            this.wasPostedWithError = true;
+                            this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                            
+                    }
+                })
+                .catch((error) => {
+                    console.error('Beim Ausführen des Fetch ist ein Fehler aufgetreten.', error)
+                    this.wasPosted = true;
+                    this.wasPostedWithError = true;
+                    this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                })
+        },   
+        handleOldSubmit(event, form ) {
+            event.preventDefault();
+        
+            if (!this.isWebview) {    
+                uxAction(trackingInformations); 
+            }
+        
+            if (this.isPosting) return;
+            this.isPosting = true;
+            
+            console.log('DATA:', new URLSearchParams(new FormData(form)).toString());
+        
+            let ajaxOptions = {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+                },
+                timeout: this.ajaxTimeout,
+                body: new URLSearchParams(new FormData(form)),
+            };
+                
+            fetch(ajaxOptions.url, ajaxOptions)
+                .then(async (response) => {
+                    const data = await response.text();
+                    if (response.ok) {
+                        console.log('Done');
+                        console.log(data);
+                        if (jsonUrl) {
+                            const responseData = JSON.parse(data);
+                            switch (responseData.status) {
+                                case 'VALIDATION_ERROR':
+                                    this.resetValidationErrors();
+                                    this.handleValidationErrors(responseData.errors);
+                                    break;
+                                case 'OK':
+                                    console.log("OK");
+                                    this.wasPosted = true;
+                                    this.wasPostedWithSuccess = true;
+                                    this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                                    
+                                    break;
+                                default:
+                                    console.log("default");
+                                    this.wasPosted = true;
+                                    this.wasPostedWithError = true;
+                                    this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                                    break;
+                            }
+                        } else {
+                            
+                            this.wasPosted = true;
+                            this.wasPostedWithError = true;
+                            this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                        }
+                        if (formId) {
+                            window.location.hash = formId;
+                        } 
+                    } else {
+                        this.wasPosted = true;
+                        this.wasPostedWithError = true;
+                        this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                        throw new Error('Network response was not ok.');
+                        
+                        
+                    }
+                })
+                .catch((error) => {
+                    console.error('Fail:', error);
+                    this.wasPosted = true;
+                    this.wasPostedWithError = true;
+                    this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                })
+                .finally(() => {
+                    console.log('Always');
+                    this.isPosting = false;
+                });
+        },
+        getSubmissionAttempted() {
+            return this.$store.forms.submissionAttempted[formId]
+        }        
+    }
+}

package/dist/views/components/newsletter/components/controls_no_alpine.hbs

@@ -0,0 +1,15 @@
+<div class="flex flex-col-reverse items-center justify-between sm:flex-row gap-y-6">
+    <div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">{{loca "form_text_required"}}</div>
+    <div class="flex items-center justify-end w-full basis-full">
+        <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
+            <span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
+            <span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>
+            <input type="submit" class="pl-2 cursor-pointer" value="{{loca "form_button_submit"}}" @click.prevent=""/>
+        </label>
+
+        {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 
+            <span class="text-base ds-button-label ">{{loca "form_button_reset"}}</span>        
+        {{/components/button/button}}
+
+    </div>
+</div>

package/dist/views/components/newsletter/components/new_newsletter_form.hbs

@@ -1,13 +1,23 @@
-<div class="js-newsletterFormWrapper">
-<form class="c-form o-box -accented -breakout js-form js-load" id="form--{{nextRandom}}" data-hr-new-newsletter-ds='{
-"trackingInformations": {{this.trackingInformations}} }' action="{{configProperty "newsletter.subscription.endpoint"}}" method="post" accept-charset="utf-8">
+<div id="formWrapper" class="mt-4">
+<form class="relative flex flex-col justify-center overflow-hidden group" 
+    id="form{{nextRandom}}" 
+    x-ref="form{{getRandom}}" 
+    ax-load 
+    x-data="newsletterForm('form{{getRandom}}','{{this.trackingInformations}}')" 
+    x-init="formInit()" 
+    x-ignore
+    @submit.prevent
+    action="index.html" 
+    method="post" 
+    accept-charset="utf-8"
+>
 
         {{~> components/forms/components/input
             _type="email"
             _isEmail=true
             _name="email"
             _label="E-Mail"
-            _labelClass="hide"
+            _labelClass=""
             _description=""
             _required=true
             _maxLength="140"
@@ -27,7 +37,7 @@
         }}
   
 
-    {{~> components/forms/components/controls }}
+    {{~> components/forms/components/controls}}
 
 
     {{~> components/forms/components/input
@@ -46,14 +56,29 @@
         _hasLabel=false
     }}
 
-    <script type="text/html" class="js-successMessage">
+    <div class="flex flex-col gap-6 js-successMessage md:gap-10" id="successMessage" x-show="wasPostedWithSuccess"  
+        x-transition:enter="transition ease-out duration-300 delay-75"
+        x-transition:enter-start="opacity-0 transform scale-90"
+        x-transition:enter-end="opacity-100 transform scale-100"
+        x-cloak
+    >
             {{{include "components/newsletter/components/newsletter_success" }}}
-    </script>
-    <script type="text/html" class="js-errorMessage">
+    </div>
+    <div class="flex flex-col gap-6 js-errorMessage md:gap-10" id="errorMessage" x-show="wasPostedWithError"
+        x-transition:enter="transition ease-out duration-300 delay-75"
+        x-transition:enter-start="opacity-0 transform scale-90"
+        x-transition:enter-end="opacity-100 transform scale-100"
+        x-cloak
+    >
             {{{include "components/newsletter/components/newsletter_error" }}}
-    </script>
-    <script type="text/html" class="js-alreadyRegisteredMessage">
+    </div>
+    <div class="flex flex-col gap-6 js-alreadyRegisteredMessage md:gap-10" id="alreadyRegisteredMessage" x-show="wasPostedAlreadyRegistered"
+        x-transition:enter="transition ease-out duration-300 delay-75"
+        x-transition:enter-start="opacity-0 transform scale-90"
+        x-transition:enter-end="opacity-100 transform scale-100"
+        x-cloak
+    >
             {{{include "components/newsletter/components/newsletter_already_registered" }}}
-    </script>
+    </div>
 </form>
 </div>

package/dist/views/components/newsletter/components/newsletter_form.hbs

@@ -1,4 +1,5 @@
-<form class="c-form o-box -accented -breakout js-form" id="form--{{nextRandom}}"
+<div id="formWrapper" class="mt-4">
+<form class="relative flex flex-col justify-center overflow-hidden group js-form" id="form{{nextRandom}}" x-ref="form{{getRandom}}" ax-load="" x-data="" x-init="" @submit.prevent=""
       action="{{configProperty "mailserver.newsletter"}}" method="post" enctype="application/x-www-form-urlencoded"
       accept-charset="utf-8">
 
@@ -7,7 +8,7 @@
             _isEmail="true"
             _name="email"
             _label="E-Mail"
-            _labelClass="hide"
+            _labelClass=""
             _description=""
             _required="true"
             _maxLength="140"
@@ -30,7 +31,7 @@
         }}
 
 
-   {{~> components/forms/components/controls }}
+   {{~> components/forms/components/controls}}
 
    {{~> components/forms/components/input
             _formField=this.formData.INXMAIL_HTTP_REDIRECT
@@ -58,4 +59,5 @@
             _value=this.backlinkUuid
             _hasLabel=false
     }}
-</form>
+</form>
+</div>

package/dist/views/components/newsletter/components/newsletter_result.hbs

@@ -1,4 +1,4 @@
-<div class="c-feedbackBox"></div>
+<div class="c-feedbackBox">
     <h2 class="c-feedbackBox__headline">{{loca _locaKeyTitle}}</h2>
     <p class="c-feedbackBox__button">
         {{#with this.backlink}}

package/dist/views/components/newsletter/newsletter.hbs

@@ -1,5 +1,5 @@
 {{#if this.useNewNewsletter}}
-    <div id="{{this.uuid}}" class="{{_addClass}} ">
+    <div id="{{this.uuid}}" class="relative bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr px-5 sm:px-13 pb-8 pt-6 sm:pt-12 mt-7 sm:mt-12 mb-5 article-full-width sm:article-narrow {{_addClass}}">
         {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
         <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
             {{this.title}}
@@ -9,22 +9,16 @@
             {{{this.description}}}
         </p>
        {{/if}}
-        <div class="mt-4 text-base js-formWrapper font-copy sm:text-lg sm:mt-5 dark:text-text-dark">
-            {{> components/newsletter/components/new_newsletter_form}}
-        </div>
+        {{> components/newsletter/components/new_newsletter_form}}
         {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
     </div>
 {{else}}
-    <div id="{{this.uuid}}" class="{{_addClass}} js-load" data-hr-newsletter-ds='{"url": "{{this.url.nocache}}"}'>
+    <div id="{{this.uuid}}" class="js-load relative bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr px-5 sm:px-13 pb-8 pt-6 sm:pt-12 mt-7 sm:mt-12 mb-5 article-full-width sm:article-narrow {{_addClass}}" data-hr-newsletter-ds='{"url": "{{this.url.nocache}}"}'>
         {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
         <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
             {{this.title}}
         </h3>
-    
-        <div class="js-formWrapper">
-            {{> components/newsletter/components/newsletter_form}}
-        </div>
-       
+        {{> components/newsletter/components/newsletter_form}}
         {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
     </div>
  {{/if}}

package/dist/views_static/components/newsletter/components/controls_no_alpine.hbs

@@ -0,0 +1,15 @@
+<div class="flex flex-col-reverse items-center justify-between sm:flex-row gap-y-6">
+    <div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">{{loca "form_text_required"}}</div>
+    <div class="flex items-center justify-end w-full basis-full">
+        <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
+            <span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
+            <span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>
+            <input type="submit" class="pl-2 cursor-pointer" value="{{loca "form_button_submit"}}" @click.prevent=""/>
+        </label>
+
+        {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 
+            <span class="text-base ds-button-label ">{{loca "form_button_reset"}}</span>        
+        {{/components/button/button}}
+
+    </div>
+</div>

package/dist/views_static/components/newsletter/components/new_newsletter_form.hbs

@@ -1,13 +1,23 @@
-<div class="js-newsletterFormWrapper">
-<form class="c-form o-box -accented -breakout js-form js-load" id="form--{{nextRandom}}" data-hr-new-newsletter-ds='{
-"trackingInformations": {{this.trackingInformations}} }' action="{{configProperty "newsletter.subscription.endpoint"}}" method="post" accept-charset="utf-8">
+<div id="formWrapper" class="mt-4">
+<form class="relative flex flex-col justify-center overflow-hidden group" 
+    id="form{{nextRandom}}" 
+    x-ref="form{{getRandom}}" 
+    ax-load 
+    x-data="newsletterForm('form{{getRandom}}','{{this.trackingInformations}}')" 
+    x-init="formInit()" 
+    x-ignore
+    @submit.prevent
+    action="index.html" 
+    method="post" 
+    accept-charset="utf-8"
+>
 
         {{~> components/forms/components/input
             _type="email"
             _isEmail=true
             _name="email"
             _label="E-Mail"
-            _labelClass="hide"
+            _labelClass=""
             _description=""
             _required=true
             _maxLength="140"
@@ -27,7 +37,7 @@
         }}
   
 
-    {{~> components/forms/components/controls }}
+    {{~> components/forms/components/controls}}
 
 
     {{~> components/forms/components/input
@@ -46,14 +56,29 @@
         _hasLabel=false
     }}
 
-    <script type="text/html" class="js-successMessage">
+    <div class="flex flex-col gap-6 js-successMessage md:gap-10" id="successMessage" x-show="wasPostedWithSuccess"  
+        x-transition:enter="transition ease-out duration-300 delay-75"
+        x-transition:enter-start="opacity-0 transform scale-90"
+        x-transition:enter-end="opacity-100 transform scale-100"
+        x-cloak
+    >
             {{{include "components/newsletter/components/newsletter_success" }}}
-    </script>
-    <script type="text/html" class="js-errorMessage">
+    </div>
+    <div class="flex flex-col gap-6 js-errorMessage md:gap-10" id="errorMessage" x-show="wasPostedWithError"
+        x-transition:enter="transition ease-out duration-300 delay-75"
+        x-transition:enter-start="opacity-0 transform scale-90"
+        x-transition:enter-end="opacity-100 transform scale-100"
+        x-cloak
+    >
             {{{include "components/newsletter/components/newsletter_error" }}}
-    </script>
-    <script type="text/html" class="js-alreadyRegisteredMessage">
+    </div>
+    <div class="flex flex-col gap-6 js-alreadyRegisteredMessage md:gap-10" id="alreadyRegisteredMessage" x-show="wasPostedAlreadyRegistered"
+        x-transition:enter="transition ease-out duration-300 delay-75"
+        x-transition:enter-start="opacity-0 transform scale-90"
+        x-transition:enter-end="opacity-100 transform scale-100"
+        x-cloak
+    >
             {{{include "components/newsletter/components/newsletter_already_registered" }}}
-    </script>
+    </div>
 </form>
 </div>

package/dist/views_static/components/newsletter/components/newsletter_form.hbs

@@ -1,4 +1,5 @@
-<form class="c-form o-box -accented -breakout js-form" id="form--{{nextRandom}}"
+<div id="formWrapper" class="mt-4">
+<form class="relative flex flex-col justify-center overflow-hidden group js-form" id="form{{nextRandom}}" x-ref="form{{getRandom}}" ax-load="" x-data="" x-init="" @submit.prevent=""
       action="{{configProperty "mailserver.newsletter"}}" method="post" enctype="application/x-www-form-urlencoded"
       accept-charset="utf-8">
 
@@ -7,7 +8,7 @@
             _isEmail="true"
             _name="email"
             _label="E-Mail"
-            _labelClass="hide"
+            _labelClass=""
             _description=""
             _required="true"
             _maxLength="140"
@@ -30,7 +31,7 @@
         }}
 
 
-   {{~> components/forms/components/controls }}
+   {{~> components/forms/components/controls}}
 
    {{~> components/forms/components/input
             _formField=this.formData.INXMAIL_HTTP_REDIRECT
@@ -58,4 +59,5 @@
             _value=this.backlinkUuid
             _hasLabel=false
     }}
-</form>
+</form>
+</div>

package/dist/views_static/components/newsletter/components/newsletter_result.hbs

@@ -1,4 +1,4 @@
-<div class="c-feedbackBox"></div>
+<div class="c-feedbackBox">
     <h2 class="c-feedbackBox__headline">{{loca _locaKeyTitle}}</h2>
     <p class="c-feedbackBox__button">
         {{#with this.backlink}}

package/dist/views_static/components/newsletter/newsletter.hbs

@@ -1,5 +1,5 @@
 {{#if this.useNewNewsletter}}
-    <div id="{{this.uuid}}" class="{{_addClass}} ">
+    <div id="{{this.uuid}}" class="relative bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr px-5 sm:px-13 pb-8 pt-6 sm:pt-12 mt-7 sm:mt-12 mb-5 article-full-width sm:article-narrow {{_addClass}}">
         {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
         <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
             {{this.title}}
@@ -9,22 +9,16 @@
             {{{this.description}}}
         </p>
        {{/if}}
-        <div class="mt-4 text-base js-formWrapper font-copy sm:text-lg sm:mt-5 dark:text-text-dark">
-            {{> components/newsletter/components/new_newsletter_form}}
-        </div>
+        {{> components/newsletter/components/new_newsletter_form}}
         {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
     </div>
 {{else}}
-    <div id="{{this.uuid}}" class="{{_addClass}} js-load" data-hr-newsletter-ds='{"url": "{{this.url.nocache}}"}'>
+    <div id="{{this.uuid}}" class="js-load relative bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr px-5 sm:px-13 pb-8 pt-6 sm:pt-12 mt-7 sm:mt-12 mb-5 article-full-width sm:article-narrow {{_addClass}}" data-hr-newsletter-ds='{"url": "{{this.url.nocache}}"}'>
         {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
         <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
             {{this.title}}
         </h3>
-    
-        <div class="js-formWrapper">
-            {{> components/newsletter/components/newsletter_form}}
-        </div>
-       
+        {{> components/newsletter/components/newsletter_form}}
         {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
     </div>
  {{/if}}

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.114.49",
+  "version": "1.114.50",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/js/alpine.js

@@ -21,6 +21,7 @@ AsyncAlpine.init(Alpine)
     .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
     .data('inputHandler', ()=> import('components/forms/js/inputHandler.alpine.js'))
     .data('contactForm', ()=> import('components/forms/js/contactForm.alpine.js'))
+    .data('newsletterForm', ()=> import('components/newsletter/js/newsletterForm.alpine.js'))
     .start()
 
 window.Alpine = Alpine

package/src/stories/views/components/newsletter/components/controls_no_alpine.hbs

@@ -0,0 +1,15 @@
+<div class="flex flex-col-reverse items-center justify-between sm:flex-row gap-y-6">
+    <div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">{{loca "form_text_required"}}</div>
+    <div class="flex items-center justify-end w-full basis-full">
+        <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
+            <span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
+            <span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>
+            <input type="submit" class="pl-2 cursor-pointer" value="{{loca "form_button_submit"}}" @click.prevent=""/>
+        </label>
+
+        {{#> components/button/button _variant="tertiary"_size="lg" _css="order-1 mr-4" _type="reset"}} 
+            <span class="text-base ds-button-label ">{{loca "form_button_reset"}}</span>        
+        {{/components/button/button}}
+
+    </div>
+</div>

package/src/stories/views/components/newsletter/components/new_newsletter_form.hbs

@@ -1,13 +1,23 @@
-<div class="js-newsletterFormWrapper">
-<form class="c-form o-box -accented -breakout js-form js-load" id="form--{{nextRandom}}" data-hr-new-newsletter-ds='{
-"trackingInformations": {{this.trackingInformations}} }' action="{{configProperty "newsletter.subscription.endpoint"}}" method="post" accept-charset="utf-8">
+<div id="formWrapper" class="mt-4">
+<form class="relative flex flex-col justify-center overflow-hidden group" 
+    id="form{{nextRandom}}" 
+    x-ref="form{{getRandom}}" 
+    ax-load 
+    x-data="newsletterForm('form{{getRandom}}','{{this.trackingInformations}}')" 
+    x-init="formInit()" 
+    x-ignore
+    @submit.prevent
+    action="index.html" 
+    method="post" 
+    accept-charset="utf-8"
+>
 
         {{~> components/forms/components/input
             _type="email"
             _isEmail=true
             _name="email"
             _label="E-Mail"
-            _labelClass="hide"
+            _labelClass=""
             _description=""
             _required=true
             _maxLength="140"
@@ -27,7 +37,7 @@
         }}
   
 
-    {{~> components/forms/components/controls }}
+    {{~> components/forms/components/controls}}
 
 
     {{~> components/forms/components/input
@@ -46,14 +56,29 @@
         _hasLabel=false
     }}
 
-    <script type="text/html" class="js-successMessage">
+    <div class="flex flex-col gap-6 js-successMessage md:gap-10" id="successMessage" x-show="wasPostedWithSuccess"  
+        x-transition:enter="transition ease-out duration-300 delay-75"
+        x-transition:enter-start="opacity-0 transform scale-90"
+        x-transition:enter-end="opacity-100 transform scale-100"
+        x-cloak
+    >
             {{{include "components/newsletter/components/newsletter_success" }}}
-    </script>
-    <script type="text/html" class="js-errorMessage">
+    </div>
+    <div class="flex flex-col gap-6 js-errorMessage md:gap-10" id="errorMessage" x-show="wasPostedWithError"
+        x-transition:enter="transition ease-out duration-300 delay-75"
+        x-transition:enter-start="opacity-0 transform scale-90"
+        x-transition:enter-end="opacity-100 transform scale-100"
+        x-cloak
+    >
             {{{include "components/newsletter/components/newsletter_error" }}}
-    </script>
-    <script type="text/html" class="js-alreadyRegisteredMessage">
+    </div>
+    <div class="flex flex-col gap-6 js-alreadyRegisteredMessage md:gap-10" id="alreadyRegisteredMessage" x-show="wasPostedAlreadyRegistered"
+        x-transition:enter="transition ease-out duration-300 delay-75"
+        x-transition:enter-start="opacity-0 transform scale-90"
+        x-transition:enter-end="opacity-100 transform scale-100"
+        x-cloak
+    >
             {{{include "components/newsletter/components/newsletter_already_registered" }}}
-    </script>
+    </div>
 </form>
 </div>

package/src/stories/views/components/newsletter/components/newsletter_form.hbs

@@ -1,4 +1,5 @@
-<form class="c-form o-box -accented -breakout js-form" id="form--{{nextRandom}}"
+<div id="formWrapper" class="mt-4">
+<form class="relative flex flex-col justify-center overflow-hidden group js-form" id="form{{nextRandom}}" x-ref="form{{getRandom}}" ax-load="" x-data="" x-init="" @submit.prevent=""
       action="{{configProperty "mailserver.newsletter"}}" method="post" enctype="application/x-www-form-urlencoded"
       accept-charset="utf-8">
 
@@ -7,7 +8,7 @@
             _isEmail="true"
             _name="email"
             _label="E-Mail"
-            _labelClass="hide"
+            _labelClass=""
             _description=""
             _required="true"
             _maxLength="140"
@@ -30,7 +31,7 @@
         }}
 
 
-   {{~> components/forms/components/controls }}
+   {{~> components/forms/components/controls}}
 
    {{~> components/forms/components/input
             _formField=this.formData.INXMAIL_HTTP_REDIRECT
@@ -58,4 +59,5 @@
             _value=this.backlinkUuid
             _hasLabel=false
     }}
-</form>
+</form>
+</div>

package/src/stories/views/components/newsletter/components/newsletter_result.hbs

@@ -1,4 +1,4 @@
-<div class="c-feedbackBox"></div>
+<div class="c-feedbackBox">
     <h2 class="c-feedbackBox__headline">{{loca _locaKeyTitle}}</h2>
     <p class="c-feedbackBox__button">
         {{#with this.backlink}}

package/src/stories/views/components/newsletter/fixtures/new_newsletter.json

@@ -6,6 +6,10 @@
        {"value":"","label":"Anmelden","title":"Anmelden","name":"Registrierung","isSelected":false},
        {"value":"","label":"Abmelden","title":"Abmelden","name":"Registrierung","isSelected":false}
     ],
+    "successText":{"richText":"Ficken sie sich oder wie sie heißen, sie kriegen den Newsletter"},
+    "registeredText":{"richText":"Ficken sie sich oder wie sie heißen, sie sind bereits bei uns"},
+    "errorText":{"richText":"Ficken sie sich oder wie sie heißen, leider nicht funktioniert"},
+    "uuid":"d91b7e16-d476-425f-a535-587c6957df37",
     "successLink":"Link wenn erfolgreich",
     "errorLink": "Link wenn Fehler",
     "backlinkUuid": "Backlink mit UUID (altes Voting)",

package/src/stories/views/components/newsletter/fixtures/newsletter.json

@@ -6,6 +6,7 @@
        {"value":"","label":"Anmelden","title":"Anmelden","name":"Registrierung","isSelected":false},
        {"value":"","label":"Abmelden","title":"Abmelden","name":"Registrierung","isSelected":false}
     ],
+    "uuid":"d91b7e16-d476-425f-a535-587c6957df37",
     "successLink":"Link wenn erfolgreich",
     "errorLink": "Link wenn Fehler",
     "backlinkUuid": "Backlink mit UUID (altes Voting)",

package/src/stories/views/components/newsletter/js/newsletterForm.alpine.js

@@ -0,0 +1,194 @@
+import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+
+export default function newsletterForm(formId,trackingInformations) {
+    return {
+        isPosting: false,
+        wasPosted: false,
+        wasPostedWithSuccess: false,
+        wasPostedWithError: false,
+        wasPostedAlreadyRegistered: false,
+        isWebview: window.parent.document.documentElement.classList.contains('webview'),
+        ajaxTimeout: 60 * 1000,
+        form: this.$refs[formId],
+        formWrapper: this.$refs[formId].closest("#formWrapper"),
+        actionUrl: "",
+        formInit(){
+            this.$store.forms.submissionAttempted[formId] = false; 
+            //this.$store.forms.errorMessages = JSON.parse(errorMessages.replace(/"/g,'"'))
+            this.actionUrl = this.form.getAttribute('action')
+            console.log("FORMID: "+formId)
+            console.log("FORM: ", this.form)
+            console.log("ACTION: "+this.actionUrl)
+            console.log("GETATTRIBUTE "+ this.form.getAttribute('action'))
+        },
+        scrollToElementAndCenterWithTimeout(element, timeout){
+            setTimeout(() => {
+                element.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center'
+                 });
+             }, timeout);
+        },
+        submitButtonHandler(event) {
+            this.$store.forms.submissionAttempted[formId] = true;
+            if(this.form.reportValidity()){               
+                this.handleSubmit(event)
+            } else {
+                this.scrollToElementAndCenterWithTimeout(document.activeElement, 50)                
+            }
+        },
+        retryHandler() {
+            this.wasPosted = false;
+            this.wasPostedWithError = false;
+            this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 50)
+            
+        },
+        handleValidationErrors(errors) {
+            console.log('Validation Errors:', errors);
+            this.$store.forms.serverErrorFields[formId] = errors;
+            console.log('Validation Errors in Store:', this.$store.forms.serverErrorFields);
+        },
+        resetValidationErrors() {    
+            this.$store.forms.serverErrorFields[formId] = {}
+        },
+        async postData() {
+            const formData = new FormData(this.form)
+            // use timestamp in seconds because the newsletter tool cannot handle milliseconds
+            formData.set('confirm-data-protection', Math.ceil(Date.now() / 1000))
+    
+            const response = await fetch(this.actionUrl, {
+                method: 'POST',
+                body: formData,
+            })
+            return response
+        },
+        handleSubmit (event) {
+            event.preventDefault();
+        
+            if (!this.isWebview) {    
+                uxAction(trackingInformations); 
+            }
+        
+            if (this.isPosting) return;
+            this.isPosting = true;
+
+            this.postData()
+                .then(async response => {
+                    console.log(await response)
+                    if (!response.ok) {
+                       
+                        throw new Error('Netzwerk- oder Serverfehler')
+                    }
+                    return response
+                })
+                .then(async response => {
+                    switch (response.body) {
+                        case 'OK':
+                            console.log("OK");
+                            this.wasPosted = true;
+                            this.wasPostedWithSuccess = true;
+                            this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                            break
+                        case 'no_valid_newsletters':
+                            console.log("Already registered");
+                            this.wasPosted = true;
+                            this.wasPostedAlreadyRegistered = true;
+                            this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                            break
+                        default:
+                            console.log("default");
+                            this.wasPosted = true;
+                            this.wasPostedWithError = true;
+                            this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                            
+                    }
+                })
+                .catch((error) => {
+                    console.error('Beim Ausführen des Fetch ist ein Fehler aufgetreten.', error)
+                    this.wasPosted = true;
+                    this.wasPostedWithError = true;
+                    this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                })
+        },   
+        handleOldSubmit(event, form ) {
+            event.preventDefault();
+        
+            if (!this.isWebview) {    
+                uxAction(trackingInformations); 
+            }
+        
+            if (this.isPosting) return;
+            this.isPosting = true;
+            
+            console.log('DATA:', new URLSearchParams(new FormData(form)).toString());
+        
+            let ajaxOptions = {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+                },
+                timeout: this.ajaxTimeout,
+                body: new URLSearchParams(new FormData(form)),
+            };
+                
+            fetch(ajaxOptions.url, ajaxOptions)
+                .then(async (response) => {
+                    const data = await response.text();
+                    if (response.ok) {
+                        console.log('Done');
+                        console.log(data);
+                        if (jsonUrl) {
+                            const responseData = JSON.parse(data);
+                            switch (responseData.status) {
+                                case 'VALIDATION_ERROR':
+                                    this.resetValidationErrors();
+                                    this.handleValidationErrors(responseData.errors);
+                                    break;
+                                case 'OK':
+                                    console.log("OK");
+                                    this.wasPosted = true;
+                                    this.wasPostedWithSuccess = true;
+                                    this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                                    
+                                    break;
+                                default:
+                                    console.log("default");
+                                    this.wasPosted = true;
+                                    this.wasPostedWithError = true;
+                                    this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                                    break;
+                            }
+                        } else {
+                            
+                            this.wasPosted = true;
+                            this.wasPostedWithError = true;
+                            this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                        }
+                        if (formId) {
+                            window.location.hash = formId;
+                        } 
+                    } else {
+                        this.wasPosted = true;
+                        this.wasPostedWithError = true;
+                        this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                        throw new Error('Network response was not ok.');
+                        
+                        
+                    }
+                })
+                .catch((error) => {
+                    console.error('Fail:', error);
+                    this.wasPosted = true;
+                    this.wasPostedWithError = true;
+                    this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
+                })
+                .finally(() => {
+                    console.log('Always');
+                    this.isPosting = false;
+                });
+        },
+        getSubmissionAttempted() {
+            return this.$store.forms.submissionAttempted[formId]
+        }        
+    }
+}

package/src/stories/views/components/newsletter/newsletter.hbs

@@ -1,5 +1,5 @@
 {{#if this.useNewNewsletter}}
-    <div id="{{this.uuid}}" class="{{_addClass}} ">
+    <div id="{{this.uuid}}" class="relative bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr px-5 sm:px-13 pb-8 pt-6 sm:pt-12 mt-7 sm:mt-12 mb-5 article-full-width sm:article-narrow {{_addClass}}">
         {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
         <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
             {{this.title}}
@@ -9,22 +9,16 @@
             {{{this.description}}}
         </p>
        {{/if}}
-        <div class="mt-4 text-base js-formWrapper font-copy sm:text-lg sm:mt-5 dark:text-text-dark">
-            {{> components/newsletter/components/new_newsletter_form}}
-        </div>
+        {{> components/newsletter/components/new_newsletter_form}}
         {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
     </div>
 {{else}}
-    <div id="{{this.uuid}}" class="{{_addClass}} js-load" data-hr-newsletter-ds='{"url": "{{this.url.nocache}}"}'>
+    <div id="{{this.uuid}}" class="js-load relative bg-highlight-1 dark:bg-highlight-1-dark sm:rounded-tl-hr sm:rounded-br-hr px-5 sm:px-13 pb-8 pt-6 sm:pt-12 mt-7 sm:mt-12 mb-5 article-full-width sm:article-narrow {{_addClass}}" data-hr-newsletter-ds='{"url": "{{this.url.nocache}}"}'>
         {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_intro_sr" ~}}
         <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
             {{this.title}}
         </h3>
-    
-        <div class="js-formWrapper">
-            {{> components/newsletter/components/newsletter_form}}
-        </div>
-       
+        {{> components/newsletter/components/newsletter_form}}
         {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
     </div>
  {{/if}}

package/src/stories/views/components/newsletter/newsletter.stories.js

@@ -14,21 +14,33 @@ export default {
                     </div>`
         },
     ],
+    parameters: { 
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: 'http://localhost:6006/',
+                    response: {
+                        status: 200,
+                        message: 'success',
+                        body: {
+                            status: ''
+                        },
+                    },
+                }
+            ],
+        }
+    }
 }
 const TemplateNewsletterNew = (args) => {
     let hbsTemplate = handlebars.compile(`
-        {{#>components/forms/components/backgroundBox  }}  
             {{> components/newsletter/newsletter }}
-        {{/components/forms/components/backgroundBox }}
     `)
     return hbsTemplate({ ...args })
 }
 
 const TemplateNewsletterOld = (args) => {
     let hbsTemplate = handlebars.compile(`
-        {{#>components/forms/components/backgroundBox  }}  
             {{> components/newsletter/newsletter }}
-        {{/components/forms/components/backgroundBox }}
     `)
     return hbsTemplate({ ...args })
 }
@@ -37,6 +49,22 @@ export const Default = {
     render: TemplateNewsletterNew.bind({}),
     name: 'Neuer Newsletter',
     args: NewNewsletterJson,
+    parameters: { 
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: 'http://localhost:6006/',
+                    response: {
+                        status: 200,
+                        message: 'no_valid_newsletters',
+                        body: {
+                            status: ''
+                        },
+                    },
+                }
+            ],
+        }
+    }
 }
 
 export const Newsletter_old = {