hr-design-system-handlebars 1.114.85 → 1.114.86

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

@@ -1,63 +1,31 @@
 <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">
 
-        {{~> components/forms/components/input
-            _type="email"
-            _isEmail="true"
-            _name="email"
-            _label="E-Mail"
-            _labelClass=""
-            _description=""
-            _required="true"
-            _maxLength="140"
-            _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
-            _errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
-            _formId=../_formId
-        }}
+<form class="relative flex flex-col justify-center overflow-hidden group js-form" 
+id="form{{nextRandom}}" 
+x-ref="form{{getRandom}}" 
+ax-load
+x-data="newsletterForm('form{{getRandom}}','{{this.trackingInformations}}')" 
+x-init="formInit()" 
+x-ignore
+@submit.prevent
+action="{{~#if (isStorybook)~}}{{this.jsonURL}}{{else}}{{configProperty "mailserver.newsletter"}}{{/if}}" 
+method="post" 
+enctype="application/x-www-form-urlencoded"
+accept-charset="utf-8"
+>
 
-        {{> components/forms/components/choiceGroup
-                _name="Registrierung"
-                _required=true
-                _inputClass=""
-                _type="radio"
-                _locaKey="newsletter_subscribe_text"
-                _inGroup=true
-                _isHorizontalLayout=true
-                _multipleChoice=false
-                _formId=../_formId
-                _items=this.items
-        }}
+<div x-show="!wasPosted"             
+            x-transition:enter="transition ease-out duration-300 delay-300"
+            x-transition:enter-start="opacity-0 transform scale-90"
+            x-transition:enter-end="opacity-100 transform scale-100"
+            x-transition:leave="transition ease-in duration-75 delay-0"
+            x-transition:leave-start="opacity-100 transform scale-100"
+            x-transition:leave-end="opacity-0 transform scale-90"
+        >
+            {{> components/newsletter/components/newsletter_old_fields }} 
 
+            {{> components/newsletter/components/newsletter_controls }}
+</div>
 
-   {{~> components/forms/components/controls}}
-
-   {{~> components/forms/components/input
-            _formField=this.formData.INXMAIL_HTTP_REDIRECT
-            _name="INXMAIL_HTTP_REDIRECT"
-            _type="hidden"
-            _wrapperClass="hidden"
-            _value=this.successLink
-            _hasLabel=false
-    }}
-
-    {{~>components/forms/components/input
-            _formField=this.formData.INXMAIL_HTTP_REDIRECT_ERROR
-            _name="INXMAIL_HTTP_REDIRECT_ERROR"
-            _type="hidden"
-            _wrapperClass="hidden"
-            _value=this.errorLink
-            _hasLabel=false
-    }}
-
-    {{~> components/forms/components/input
-            _formField=this.formData.backlink
-            _name="backlink"
-            _type="hidden"
-            _wrapperClass="hidden"
-            _value=this.backlinkUuid
-            _hasLabel=false
-    }}
 </form>
 </div>

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

@@ -1,15 +1,31 @@
-<div class="c-feedbackBox">
-    <h2 class="c-feedbackBox__headline">{{loca _locaKeyTitle}}</h2>
-    <p class="c-feedbackBox__button">
-        {{#with this.backlink}}
-            <a class="c-form__button js-formReload" href="{{this}}#{{../uuid}}">{{loca "newsletter_form_back"}}</a>
-        {{/with}}
-    </p>
-    <p class="c-feedbackBox__text">
-        {{#if _locaKeyText}}
-            {{loca _locaKeyText}}
-        {{else}}
-            {{{_text}}}
-        {{/if}}
-    </p>
-</div>
+<div class="flex flex-col justify-between w-full gap-6 md:gap-10">
+        <div class="flex items-center gap-x-2 md:gap-x-3">
+            {{#if _success}}
+                {{> components/forms/components/success_icon}}
+                <h3 class="font-bold text-success pt-0.5">{{~loca "newsletter_title_success"}}</h3>       
+            {{else}}
+                 {{#if _alreadyRegistered}}
+                    {{> components/forms/components/error_icon _class="!block"}}
+                    <h3 class="font-bold text-error dark:text-error-dark pt-0.5">{{~loca "newsletter_title_already_registered"}}</h3>  
+                    {{else}}
+                    {{> components/forms/components/error_icon _class="!block"}}
+                    <h3 class="font-bold text-error dark:text-error-dark pt-0.5">{{~loca "newsletter_title_error"}}</h3>  
+                {{/if}}
+            {{/if}}
+        </div>      
+</div>
+<span class="font-copy text-text dark:text-text-dark">
+    {{#if _locaKeyText}}
+        {{loca _locaKeyText}}
+    {{else}}
+        {{{_text}}}
+    {{/if}}
+</span>
+<div class="flex justify-end">
+        {{#> components/button/button _variant="primary" _size="lg" }} 
+            <span class="text-base ds-button-label ">{{loca "newsletter_form_back"}}</span>        
+        {{/components/button/button}}  
+        {{#*inline "htmlProperties"}}        
+            @click="retryHandler"
+        {{/inline}}
+</div>

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

@@ -2,6 +2,7 @@
 {{> components/newsletter/components/newsletter_result
             _locaKeyTitle="newsletter_title_success"
             _text=this.successText.richtext
+            _success=_success
 }}
 {{else}}
 {{> components/newsletter/components/newsletter_result

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

@@ -1,14 +1,10 @@
 {
-    "useNewNewsletter":true,
     "title":"hessenschau update - Der Newsletter für Hessen",
     "description":"Hier können Sie sich für das hessenschau update anmelden. Der Newsletter wird Ihnen von Montag bis Freitag kostenlos und unverbindlich zugestellt. Wenn Sie sich in unseren Verteiler eintragen, erhalten Sie eine E-Mail mit der Bitte, Ihre Aufnahme noch einmal zu bestätigen. Sie können den Newsletter jederzeit wieder abbestellen." ,     
-    "items":[
-       {"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"},
+    "jsonURL": "https://hessenschau-nl.sr.de/api/newsletter-api-subscribe.php",
+    "successText":{"richText":"Sie erhalten in wenigen Minuten eine E-Mail an die von Ihnen angegebene Adresse. Erst nach einem Klick auf den darin enthaltenen Bestätigungslink erhalten Sie unseren Newsletter."},
+    "registeredText":{"richText":"Sollten Sie ihr Abonnement kündigen oder verwalten wollen, können Sie dies <a href=\"https://hessenschau-nl.sr.de/newsletter-login.php\" class=\"{nuc https://hessenschau-nl.sr.de/newsletter-login.php nuc}link unbreakable\" target=\"_blank\"><span class=\"unbreakable\">hier</a> tun."},
+    "errorText":{"richText":"Aufgrund eines technischen Fehlers können wir derzeit Ihre Anfrage nicht bearbeiten. Bitte versuchen Sie es zu einem späteren Zeitpunkt noch einmal."},
     "uuid":"d91b7e16-d476-425f-a535-587c6957df37",
     "successLink":"Link wenn erfolgreich",
     "errorLink": "Link wenn Fehler",

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

@@ -38,10 +38,13 @@ export default function newsletterForm(formId,trackingInformations) {
             }
         },
         retryHandler() {
-            this.wasPosted = false;
-            this.wasPostedWithError = false;
-            this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 50)
-            
+                this.wasPosted = false;
+                this.wasPostedWithSuccess = false;
+                this.wasPostedWithError = false;
+                this.wasPostedAlreadyRegistered = false;
+                this.isPosting = false;
+                this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 50)
+                       
         },
         handleValidationErrors(errors) {
             console.log('Validation Errors:', errors);
@@ -82,9 +85,12 @@ export default function newsletterForm(formId,trackingInformations) {
                     return response
                 })
                 .then(async response => {
-                    switch (response.body) {
-                        case 'OK':
-                            console.log("OK");
+                    const data = await response.text();
+                    const responseData = JSON.parse(data);
+                    console.log(responseData);
+                    switch (responseData.status) {
+                        case 'success':
+                            console.log("success");
                             this.wasPosted = true;
                             this.wasPostedWithSuccess = true;
                             this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)

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

@@ -1,24 +1,5 @@
-{{#if this.useNewNewsletter}}
-    <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}}
-        </h3>
-        {{#if this.description}}
-        <p class="mt-4 text-base font-copy sm:text-lg sm:mt-5 dark:text-text-dark">
-            {{{this.description}}}
-        </p>
-       {{/if}}
+<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" ~}}
         {{> components/newsletter/components/new_newsletter_form}}
-        {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
-    </div>
-{{else}}
-    <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>
-        {{> components/newsletter/components/newsletter_form}}
-        {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
-    </div>
- {{/if}}
+    {{~> components/base/a11y/hiddenText _locaTag="story_newsletter_outro_sr" ~}}
+</div>

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

@@ -18,17 +18,18 @@ export default {
         fetchMock: {
             mocks: [
                 {
-                    matcher: 'http://localhost:6006/',
+                    matcher: 'https://ugc-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de',
                     response: {
                         status: 200,
-                        message: 'success',
                         body: {
-                            status: ''
+                            status: 'success',
                         },
                     },
                 }
             ],
-        }
+        },
+        layout: 'fullscreen',
+        chromatic: { disableSnapshot: true }
     }
 }
 const TemplateNewsletterNew = (args) => {
@@ -38,13 +39,6 @@ const TemplateNewsletterNew = (args) => {
     return hbsTemplate({ ...args })
 }
 
-const TemplateNewsletterOld = (args) => {
-    let hbsTemplate = handlebars.compile(`
-            {{> components/newsletter/newsletter }}
-    `)
-    return hbsTemplate({ ...args })
-}
-
 export const Default = {
     render: TemplateNewsletterNew.bind({}),
     name: 'Neuer Newsletter',
@@ -67,10 +61,5 @@ export const Default = {
     }
 }
 
-export const Newsletter_old = {
-    render: TemplateNewsletterOld.bind({}),
-    name: 'Alter Newsletter',
-    args: OldNewsletterJson,
-}
 
 

package/dist/assets/js/components/newsletter/js/newNewsletterDs.feature.js

@@ -1,88 +0,0 @@
-import { hr$, listen, replaceAnimated } from 'hrQuery'
-import { uxAction } from 'base/tracking/pianoHelper.subfeature'
-
-const Newsletter = function (context) {
-    'use strict'
-    const { element: rootElement } = context,
-        actionUrl = rootElement && rootElement.getAttribute('action'),
-        formWrapper = rootElement.parentNode,
-        options = context.options,
-        trackingInformations = options.trackingInformations
-
-    async function postData() {
-        const formData = new FormData(rootElement)
-        // 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(actionUrl, {
-            method: 'POST',
-            body: formData,
-        })
-        return response
-    }
-
-    const handleSubmit = function (event) {
-        uxAction(trackingInformations)
-        event.preventDefault()
-        postData()
-            .then((response) => {
-                if (!response.ok) {
-                    throw new Error('Netzwerk- oder Serverfehler')
-                }
-                return response.json()
-            })
-            .then((responseStatus) => {
-                switch (responseStatus.status) {
-                    case 'success':
-                        replaceAnimated(
-                            formWrapper,
-                            hr$('.js-successMessage', rootElement)[0].innerHTML,
-                            true,
-                            () => {
-                                listen('click', handleFormReload, hr$('.js-formReload')[0])
-                            },
-                        )
-                        break
-                    case 'no_valid_newsletters':
-                        replaceAnimated(
-                            formWrapper,
-                            hr$('.js-alreadyRegisteredMessage', rootElement)[0].innerHTML,
-                            true,
-                            () => {
-                                listen('click', handleFormReload, hr$('.js-formReload')[0])
-                            },
-                        )
-                        break
-                    default:
-                        replaceAnimated(
-                            formWrapper,
-                            hr$('.js-errorMessage', rootElement)[0].innerHTML,
-                            true,
-                            () => {
-                                listen('click', handleFormReload, hr$('.js-formReload')[0])
-                            },
-                        )
-                }
-            })
-            .catch((error) => {
-                console.error('Beim Ausführen des Fetch ist ein Fehler aufgetreten.', error)
-                replaceAnimated(
-                    formWrapper,
-                    hr$('.js-errorMessage', rootElement)[0].innerHTML,
-                    true,
-                    () => {
-                        listen('click', handleFormReload, hr$('.js-formReload')[0])
-                    },
-                )
-            })
-    }
-
-    const handleFormReload = function (event) {
-        event.preventDefault()
-        replaceAnimated(formWrapper, rootElement.outerHTML, true)
-    }
-
-    listen('submit', handleSubmit, rootElement)
-}
-
-export default Newsletter

package/dist/assets/js/components/newsletter/js/newsletterDs.feature.js

@@ -1,22 +0,0 @@
-import { hr$ } from 'hrQuery'
-
-const Newsletter = function (context) {
-    'use strict'
-
-    const { element: rootElement } = context,
-        subscribeRadio = hr$('.js-newsletter-subscribe', rootElement)[0],
-        unsubscribeRadio = hr$('.js-newsletter-unsubscribe', rootElement)[0]
-
-    if (subscribeRadio && unsubscribeRadio) {
-        subscribeRadio.onclick = function () {
-            subscribeRadio.checked = true
-            unsubscribeRadio.checked = false
-        }
-        unsubscribeRadio.onclick = function () {
-            subscribeRadio.checked = false
-            unsubscribeRadio.checked = true
-        }
-    }
-}
-
-export default Newsletter

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

@@ -1,15 +0,0 @@
-{
-    "useNewNewsletter":false,
-    "title":"hessenschau update - Der Newsletter für Hessen",
-    "description":"Hier können Sie sich für das hessenschau update anmelden. Der Newsletter wird Ihnen von Montag bis Freitag kostenlos und unverbindlich zugestellt. Wenn Sie sich in unseren Verteiler eintragen, erhalten Sie eine E-Mail mit der Bitte, Ihre Aufnahme noch einmal zu bestätigen. Sie können den Newsletter jederzeit wieder abbestellen." ,     
-    "items":[
-       {"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)",
-    "mailingList":"E-Mail-Liste",
-    "trackingInformations":"Tracking"
-}

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

@@ -1,88 +0,0 @@
-import { hr$, listen, replaceAnimated } from 'hrQuery'
-import { uxAction } from 'base/tracking/pianoHelper.subfeature'
-
-const Newsletter = function (context) {
-    'use strict'
-    const { element: rootElement } = context,
-        actionUrl = rootElement && rootElement.getAttribute('action'),
-        formWrapper = rootElement.parentNode,
-        options = context.options,
-        trackingInformations = options.trackingInformations
-
-    async function postData() {
-        const formData = new FormData(rootElement)
-        // 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(actionUrl, {
-            method: 'POST',
-            body: formData,
-        })
-        return response
-    }
-
-    const handleSubmit = function (event) {
-        uxAction(trackingInformations)
-        event.preventDefault()
-        postData()
-            .then((response) => {
-                if (!response.ok) {
-                    throw new Error('Netzwerk- oder Serverfehler')
-                }
-                return response.json()
-            })
-            .then((responseStatus) => {
-                switch (responseStatus.status) {
-                    case 'success':
-                        replaceAnimated(
-                            formWrapper,
-                            hr$('.js-successMessage', rootElement)[0].innerHTML,
-                            true,
-                            () => {
-                                listen('click', handleFormReload, hr$('.js-formReload')[0])
-                            },
-                        )
-                        break
-                    case 'no_valid_newsletters':
-                        replaceAnimated(
-                            formWrapper,
-                            hr$('.js-alreadyRegisteredMessage', rootElement)[0].innerHTML,
-                            true,
-                            () => {
-                                listen('click', handleFormReload, hr$('.js-formReload')[0])
-                            },
-                        )
-                        break
-                    default:
-                        replaceAnimated(
-                            formWrapper,
-                            hr$('.js-errorMessage', rootElement)[0].innerHTML,
-                            true,
-                            () => {
-                                listen('click', handleFormReload, hr$('.js-formReload')[0])
-                            },
-                        )
-                }
-            })
-            .catch((error) => {
-                console.error('Beim Ausführen des Fetch ist ein Fehler aufgetreten.', error)
-                replaceAnimated(
-                    formWrapper,
-                    hr$('.js-errorMessage', rootElement)[0].innerHTML,
-                    true,
-                    () => {
-                        listen('click', handleFormReload, hr$('.js-formReload')[0])
-                    },
-                )
-            })
-    }
-
-    const handleFormReload = function (event) {
-        event.preventDefault()
-        replaceAnimated(formWrapper, rootElement.outerHTML, true)
-    }
-
-    listen('submit', handleSubmit, rootElement)
-}
-
-export default Newsletter

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

@@ -1,22 +0,0 @@
-import { hr$ } from 'hrQuery'
-
-const Newsletter = function (context) {
-    'use strict'
-
-    const { element: rootElement } = context,
-        subscribeRadio = hr$('.js-newsletter-subscribe', rootElement)[0],
-        unsubscribeRadio = hr$('.js-newsletter-unsubscribe', rootElement)[0]
-
-    if (subscribeRadio && unsubscribeRadio) {
-        subscribeRadio.onclick = function () {
-            subscribeRadio.checked = true
-            unsubscribeRadio.checked = false
-        }
-        unsubscribeRadio.onclick = function () {
-            subscribeRadio.checked = false
-            unsubscribeRadio.checked = true
-        }
-    }
-}
-
-export default Newsletter