Migrate the generator state into a global zustand store (#874)

Co-authored-by: Benjamin Altpeter <[email protected]>

.eslintrc.js

@@ -71,10 +71,11 @@ module.exports = {
         'react/prefer-stateless-function': 'off',
 
         'optimize-regex/optimize-regex': 'warn',
-
+        'prefer-template': 'off',
         'jest/expect-expect': 'off',
         'jest/valid-expect-in-promise': 'off',
         'jest/valid-expect': 'off',
+        'react/prop-types': 'off',
     },
     overrides: [
         {

ATTRIBUTION

@@ -16,6 +16,9 @@ https://www.humaaans.com
 iconmonstr Icons by Alexander Kahlkopf ([iconmonstr License](https://iconmonstr.com/license))
 https://iconmonstr.com
 
+immer by Michel Weststrate ([MIT License](https://github.com/immerjs/immer/blob/master/LICENSE))
+https://github.com/immerjs/immer
+
 JavaScript Cookie by Klaus Hartl, Fagner Brack and GitHub Contributors ([MIT License](https://github.com/js-cookie/js-cookie/blob/master/LICENSE))
 https://github.com/js-cookie/js-cookie
 

assets/styles/generator.scss

@@ -56,18 +56,6 @@ textarea:placeholder-shown + label.fancy-label {
 }
 
 /* Inputs */
-
-.action-button-container {
-    padding-right: 45px;
-    position: relative;
-
-    .dynamic-input-action {
-        position: absolute;
-        right: 0;
-        top: 0;
-    }
-}
-
 .dynamic-input-controls {
     .select-container {
         float: left;

content/de/act/ada-health/index.md

@@ -35,12 +35,11 @@ Dabei können wir Dir helfen. Wir sind ein gemeinnütziger Verein, der sich {{<
 <div class="act-widget" style="max-width: 600px; margin: auto;"></div>
 {{< noScript "noscript-actwidget" >}}
 <script>
-window.props = {
-    request_types: ['erasure'],
-    transport_medium: 'email',
+window.addEventListener('load', function() { window.renderActWidget({
+    requestTypes: ['erasure'],
+    transportMedium: 'email',
     company: 'ada-health'
-};
-window.addEventListener('load', function() { renderActWidget(); });
+}); });
 </script>
 
 Die E-Mail verschickst Du selbst mit Deinem eigenen E-Mail-Programm. Im Gegensatz zu Ada haben wir uns nämlich Gedanken zur Datenminimierung gemacht: Alles, was Du hier auf der Seite eingibst, wird **nur lokal auf Deinem Rechner** verarbeitet. Das heißt, dass wir diese Daten nie auch nur zu sehen bekommen.

content/de/act/deliveroo.md

@@ -21,12 +21,11 @@ Dabei können wir Dir helfen. Wir sind ein gemeinnütziger Verein, der sich {{<
 <div class="act-widget" style="max-width: 600px; margin: auto;"></div>
 {{< noScript "noscript-actwidget" >}}
 <script>
-window.props = {
-    request_types: ['erasure'],
-    transport_medium: 'email',
+window.addEventListener('load', function() { window.renderActWidget({
+    requestTypes: ['erasure'],
+    transportMedium: 'email',
     company: 'deliveroo-de'
-};
-window.addEventListener('load', function() { renderActWidget(); });
+}); });
 </script>
 
 Die E-Mail verschickst Du selbst mit Deinem eigenen E-Mail-Programm. Das hat den Vorteil, dass wir die Daten, die Du hier eingibst, überhaupt nicht sehen können.

content/de/act/deutsche-wohnen/index.md

@@ -32,12 +32,11 @@ Hierbei wollen wir Dir helfen. Wir sind ein gemeinnütziger Verein, der sich {{<
 <div class="act-widget" style="max-width: 600px; margin: auto;"></div>
 {{< noScript "noscript-actwidget" >}}
 <script>
-window.props = {
-    request_types: ['access'],
-    transport_medium: 'email',
+window.addEventListener('load', function() { window.renderActWidget({
+    requestTypes: ['access'],
+    transportMedium: 'email',
     company: 'deutsche-wohnen'
-};
-window.addEventListener('load', function() { renderActWidget(); });
+}); });
 </script>
 
 Die E-Mail verschickst Du dabei selbst mit Deinem E-Mail-Programm. Wir bekommen Deine Daten dabei nicht zu sehen: Alles, was Du hier auf der Seite eingibst, wird **nur lokal auf Deinem Rechner** verarbeitet und nie an uns übertragen.

content/de/act/drk-brandenburg-datenleck/index.md

@@ -46,12 +46,11 @@ Alternativ hat das DRK Brandenburg auch eine Telefonhotline eingerichtet, an die
 <div class="act-widget" style="max-width: 600px; margin: auto;"></div>
 {{< noScript "noscript-actwidget" >}}
 <script>
-window.props = {
-    request_types: ['access'],
-    transport_medium: 'email',
+window.addEventListener('load', function() { renderActWidget({
+    requestTypes: ['access'],
+    transportMedium: 'email',
     company: "drk-brandenburg"
-};
-window.addEventListener('load', function() { renderActWidget(); });
+}); });
 </script>
 
 Die E-Mail verschickst Du dabei selbst mit Deinem E-Mail-Programm. Wir bekommen Deine Daten nicht zu sehen: Alles, was Du hier auf der Seite eingibst, wird **nur lokal auf Deinem Rechner** verarbeitet und nie an uns übertragen.

content/de/act/honey/index.md

@@ -143,10 +143,10 @@ Trag Deinen Namen, Deine E-Mail-Adresse und die beiden IDs nun nur noch in das F
 {{< noScript "noscript-actwidget" >}}
 <script>
 window.addEventListener('load', function() {
-    renderActWidget("act-with-account", {
-        text_before_dynamic_input_container: "Du hast einen Account bei Honey angelegt? Dann nutze dieses Formular.",
-        request_types: ['access'],
-        transport_medium: 'email',
+    renderActWidget({
+        textBeforeDynamicInputContainer: "Du hast einen Account bei Honey angelegt? Dann nutze dieses Formular.",
+        requestTypes: ['access'],
+        transportMedium: 'email',
         company: {
             "slug": "joinhoney",
             "relevant-countries": [
@@ -183,11 +183,11 @@ window.addEventListener('load', function() {
             "suggested-transport-medium": "email",
             "quality": "tested"
         }
-    });
-    renderActWidget("act-no-account", {
-        text_before_dynamic_input_container: "Du hast Honey ohne Account benutzt? Dann nutze dieses Formular.",
-        request_types: ['access'],
-        transport_medium: 'email',
+    }, "act-with-account");
+    renderActWidget({
+        textBeforeDynamicInputContainer: "Du hast Honey ohne Account benutzt? Dann nutze dieses Formular.",
+        requestTypes: ['access'],
+        transportMedium: 'email',
         company: {
             "slug": "joinhoney",
             "relevant-countries": [
@@ -229,7 +229,7 @@ window.addEventListener('load', function() {
             "suggested-transport-medium": "email",
             "quality": "tested"
         }
-    });
+    }, "act-no-account");
 });
 </script>
 
@@ -313,8 +313,7 @@ Welche Behörde für Dich zuständig ist, und wie Du sie erreichst, kannst Du mi
 {{< noScript "noscript-sva" >}}
 
 <script>
-    window.props = { override: { country: { de: 'debralda' } }, showTitle: false };
-    window.addEventListener('load', function() { renderSvaFinder(); });
+    window.addEventListener('load', function() { window.renderSvaFinder({ override: { country: { de: 'debralda' } }, showTitle: false }); });
 </script>
 
 Die Behörde wird Deine Beschwerde prüfen und kann verschiedene Maßnahmen ergreifen. Diese reichen von einer Anweisung an Honey, das eventuelle Fehlverhalten einzustellen, bis hin zu empfindlichen Bußgeldern. Erfahrungsgemäß muss man bei Beschwerden aber Geduld mitbringen, insbesondere wenn Firmen in einem anderen Land ansässig sind.

content/de/act/lieferando/index.md

@@ -30,13 +30,12 @@ Das ist natürlich kostenlos für dich und wir bekommen keine personenbezogenen
 <div class="act-widget" style="max-width: 600px; margin: auto;"></div>
 {{< noScript "noscript-actwidget" >}}
 <script>
-window.props = {
-    /* TODO: the labels are shown in English, because I don't want to hardcode the record here. Thats kinda okay, because "Name" and "Address" are quite similar to "Name" and "Adresse".*/
-    request_types: ['access'],
-    transport_medium: 'email',
+window.addEventListener('load', function() { renderActWidget({
+    /* TODO: the labels are shown in English, because I don't want to hardcode the record here. That's kinda okay, because "Name" and "Address" are quite similar to "Name" and "Adresse". */
+    requestTypes: ['access'],
+    transportMedium: 'email',
     company: 'takeaway-com'
-};
-window.addEventListener('load', function() { renderActWidget(); });
+}); });
 </script>
 
 ## Was dann?

content/en/act/honey/index.md

@@ -144,10 +144,10 @@ Enter your name, email, and both IDs into the form below and you are ready to se
 {{< noScript "noscript-actwidget" >}}
 <script>
 window.addEventListener('load', function() {
-    renderActWidget("act-with-account", {
-        text_before_dynamic_input_container: "You’ve used Honey with an account? Use this form.",
-        request_types: ['access'],
-        transport_medium: 'email',
+    renderActWidget({
+        textBeforeDynamicInputContainer: "You’ve used Honey with an account? Use this form.",
+        requestTypes: ['access'],
+        transportMedium: 'email',
         company: {
             "slug": "joinhoney",
             "relevant-countries": [
@@ -184,11 +184,11 @@ window.addEventListener('load', function() {
             "suggested-transport-medium": "email",
             "quality": "tested"
         }
-    });
-    renderActWidget("act-no-account", {
-        text_before_dynamic_input_container: "You've used Honey without an account? Use this form.",
-        request_types: ['access'],
-        transport_medium: 'email',
+    }, "act-with-account");
+    renderActWidget({
+        textBeforeDynamicInputContainer: "You've used Honey without an account? Use this form.",
+        requestTypes: ['access'],
+        transportMedium: 'email',
         company: {
             "slug": "joinhoney",
             "relevant-countries": [
@@ -230,7 +230,7 @@ window.addEventListener('load', function() {
             "suggested-transport-medium": "email",
             "quality": "tested"
         }
-    });
+    }, "act-no-account");
 });
 </script>
 
@@ -313,8 +313,7 @@ You can use this tool to find the authority responsible for you and their contac
 <div class="sva-finder"></div>
 {{< noScript "noscript-sva" >}}
 <script>
-    window.props = { override: { country: { de: 'debralda' } }, showTitle: false };
-    window.addEventListener('load', function() { renderSvaFinder(); });
+    window.addEventListener('load', function() { window.renderSvaFinder({ override: { country: { de: 'debralda' } }, showTitle: false }); });
 </script>
 
 The responsible authority will check your complaint and if they determine a misconduct on Honey's side, they can instruct them to cease that activity or even impose a fine.

cypress/integration/components/actwidget.spec.js

@@ -6,25 +6,25 @@ describe('ActWidget component', () => {
     it('generates mailto link with user data [record from database]', () => {
         // note as this act widget loads the entries from the DB this might break in the future if honey requires other elements
         cy.contains('label', 'Honey Gold balance');
-        cy.get('div[id="act-with-account"]').find('input[id="2-value-id_data"]').type('42');
+        cy.get('div[id="act-with-account"]').find('input[id="input2-value-id_data"]').type('42');
         cy.get('div[id="act-with-account"]').contains('Send email').click();
         cy.get('div[id="act-with-account"]')
             .contains('Default email software')
             .should('have.attr', 'href')
-            .and('match', /^mailto:[\s\S]*?balance[\s\S]*?42[\s\S]*?$/);
+            .and('match', /^mailto:[\S\s]*?balance[\S\s]*?42[\S\s]*?$/);
         cy.get('div[id="act-with-account"]').contains('Default email software').clickLinkWithoutFollowingHref();
     });
 
     it('generates mailto link with user data [record specified as object]', () => {
         cy.contains('label', 'userId');
         cy.contains('label', 'deviceId');
-        cy.get('div[id="act-no-account"]').find('input[id="2-value-id_data"]').type('132465789ACME');
-        cy.get('div[id="act-no-account"]').find('input[id="3-value-id_data"]').type('987654321ACME');
+        cy.get('div[id="act-no-account"]').find('input[id="input2-value-id_data"]').type('132465789ACME');
+        cy.get('div[id="act-no-account"]').find('input[id="input3-value-id_data"]').type('987654321ACME');
         cy.get('div[id="act-no-account"]').contains('Send email').click();
         cy.get('div[id="act-no-account"]')
             .contains('Default email software')
             .should('have.attr', 'href')
-            .and('match', /^mailto:[\s\S]*?userId[\s\S]*?132465789ACME[\s\S]*?deviceId[\s\S]*?987654321ACME[\s\S]*?$/);
+            .and('match', /^mailto:[\S\s]*?userId[\S\s]*?132465789ACME[\S\s]*?deviceId[\S\s]*?987654321ACME[\S\s]*?$/);
         cy.get('div[id="act-no-account"]').contains('Default email software').clickLinkWithoutFollowingHref();
     });
 });

cypress/integration/components/generator.spec.js

@@ -13,6 +13,7 @@ describe('Generator component', () => {
         cy.contains('Download PDF', { timeout: 10000 })
             .should('not.have.class', 'disabled')
             .should('have.attr', 'href')
+            // eslint-disable-next-line optimize-regex/optimize-regex
             .and('match', /^blob:https?:\/\/[\S]+?\/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/);
     });
 
@@ -36,8 +37,6 @@ describe('Generator component', () => {
             // time to 🦆 type...
             expect(win.pdfWorker).respondTo('postMessage');
             expect(win.pdfWorker).respondTo('terminate');
-            expect(win.pdfWorker).respondTo('onmessage');
-            expect(win.pdfWorker).respondTo('onerror');
         });
     });
 

cypress/integration/components/mailto-dropdown.spec.js

@@ -4,7 +4,7 @@ describe('MailtoDropdown', () => {
 
         cy.get('.request-transport-medium-chooser').contains('Email').click();
         cy.get('#request-recipient').type('[email protected]');
-        cy.get('#1-value-id_data').type('Jane Doe');
+        cy.get('#name0-value-id_data').type('Jane Doe');
         cy.contains('Send email').click();
         cy.get('.dropdown-container').contains('Copy text manually').should('be.visible');
 

cypress/integration/use-cases/wizard.spec.js

@@ -59,7 +59,7 @@ describe('Using the wizard', () => {
 
         cy.get('aside.company-info.box');
 
-        cy.get('.dynamic-input.dynamic-input-name input[name=value]').type('Kim Mustermensch');
+        cy.get('.dynamic-input.dynamic-input-name input#name0-value-id_data').type('Kim Mustermensch');
         cy.get('.request-transport-medium-chooser').contains('Fax').click();
 
         // Now that the PDF worker is only loaded on demand, the default timeout of 4 seconds is cutting it fairly
@@ -78,6 +78,6 @@ describe('Using the wizard', () => {
         cy.get('aside.company-info.box').get('.accordion-title');
 
         cy.contains('Send email').click();
-        cy.contains('Default email software').clickLinkWithoutFollowingHref();
+        cy.contains('Default email software').clickLinkWithoutFollowingHref({ force: true });
     });
 });

layouts/partials/scripts.html

@@ -30,7 +30,7 @@
 
 {{ if eq .Type "my-requests" }}
 <script src="{{ "js/my-requests.bundle.gen.js" | absURL }}"></script>
-<script>renderMyRequestsWidget();</script>
+<script>window.renderMyRequestsWidget();</script>
 {{ end }}
 
 {{ if eq .Type "privacy-controls" }}
@@ -48,7 +48,7 @@
 {{ if or (eq .Type "supervisory-authorities") .Params.has_sva_finder }}
 <script src="{{ "js/sva-finder.bundle.gen.js" | absURL }}"></script>
 {{ if eq .Type "supervisory-authorities" }}
-<script>renderSvaFinder();</script>
+<script>window.renderSvaFinder();</script>
 {{ end }}
 {{ end }}
 
@@ -58,7 +58,7 @@
 
 {{ if eq .Type "donate" }}
 <script src="{{ "js/donation-widget.bundle.gen.js" | absURL }}"></script>
-<script>renderDonationWidget();</script>
+<script>window.renderDonationWidget();</script>
 {{ end }}
 
 {{ if .IsHome }}

package.json

@@ -46,8 +46,9 @@
         "autocomplete.js": "^0.37.0",
         "brutusin-json-forms": "https://github.com/brutusin/json-forms",
         "deepmerge": "^4.2.2",
+        "immer": "^9.0.12",
         "js-cookie": "^2.2.1",
-        "letter-generator": "^1.0.0",
+        "letter-generator": "^2.0.1",
         "libphonenumber-js": "^1.7.23",
         "localforage": "^1.7.1",
         "pdfkit": "^0.12.1",