@progressive-development/pd-dialog 0.1.15 → 0.1.17

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development dialog components.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
     "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@progressive-development/pd-forms": "^0.1.16",
+    "@progressive-development/pd-forms": "^0.1.17",
     "@progressive-development/pd-icon": "^0.1.13",
     "@progressive-development/pd-price": "^0.1.2",
     "@progressive-development/pd-shared-styles": "0.1.1",

package/src/PdSubmitDialog.js

@@ -93,6 +93,7 @@ export class PdSubmitDialog extends LitElement {
       status: { type: Number },
       statusMsg: { type: String },
       confirmMail: { type: String },
+      progressTxtMap: { type: Object },
       _buttons: { type: Array },
     };
   }
@@ -153,7 +154,7 @@ export class PdSubmitDialog extends LitElement {
         @submit-button-clicked="${this._goToStartpage}"
       >
         <div slot="content">
-            ${this._renderContent()}
+          <slot name="submit-content"></slot>
           <div class="progress-container">
             <div class="progress-row">${this._renderProgressRow()}</div>
           </div>
@@ -167,38 +168,28 @@ export class PdSubmitDialog extends LitElement {
     let value;
     switch (this.status) {
       case STATUS_SEND:
-        value = html` <div class="first-row-tmp">
+        value = html`
+          <div class="first-row-tmp">
             <div class="loader"></div>
           </div>
-          <span class="progress-txt"
-            >${this.type === 'mail'
-              ? 'E-mail versturen, even geduld...'
-              : 'Uw gegevens worden verzonden.'}</span
-          >`;
+          <span class="progress-txt">${this.progressTxtMap.get(STATUS_SEND)}</span>`;
         break;
       case STATUS_SEND_SUCCESS:
-        value = html` <div class="first-row-tmp">
+        value = html`
+          <div class="first-row-tmp">
             <pd-icon
               class="success-icon"
               icon="checkBox"
               activeIcon
             ></pd-icon>
           </div>
-          <span class="progress-txt"
-            >${this.type === 'mail'
-              ? 'Mail is succesvol verzonden, we zullen spoedig reageren.'
-              : 'Uw bestelling is succesvol verwerkt. Bekijk de bevestigingsmail voor meer informatie.'}</span
-          >`;
+          <span class="progress-txt">${this.progressTxtMap.get(STATUS_SEND_SUCCESS)}</span>`;
         break;
       case STATUS_SEND_FAILED:
         value = html` <div class="first-row-tmp">
             <pd-icon class="error-icon" icon="checkBox"></pd-icon>
           </div>
-          <span class="progress-txt"
-            >${this.type === 'mail'
-              ? 'Sending the mail failed.'
-              : 'Er is een fout opgetreden bij het opmaken van uw bestelling.'}</span
-          >`;
+          <span class="progress-txt">${this.progressTxtMap.get(STATUS_SEND_FAILED)}</span>`;
         break;
       default:
         console.warn('Unexpected value');
@@ -206,31 +197,6 @@ export class PdSubmitDialog extends LitElement {
     return value;
   }
 
-  _renderContent() {
-
-    switch (this.type) {
-      case 'mail':
-        return html`
-          <p>
-            Bedankt voor uw e-mail. Deze wordt nu verzonden. Je ontvangt
-            reactie op uw mail per e-mail naar <em>${this.confirmMail}</em>.
-          </p>`;
-      case 'editDate':
-        return html`
-          <p>
-            Uw afspraakwijziging wordt verwerkt.</em>.
-          </p>`;
-      default:
-        return html`
-          <p>
-            Bedank voor uw bestelling. Momenteel verwerken we uw gegevens. U
-            zal een e-mail ontvangen met de bevestiging van uw bestelling.
-            Alvast bedankt voor het vertrouwen in Ticomi Technics als uw
-            servicepartner voor uw verwarming.
-          </p>`;
-    }
-  }
-
   _goToStartpage() {
     this.dispatchEvent(
       new CustomEvent('submit-button-clicked', {

package/stories/submit-dialog.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import {
+  PdSubmitDialog,
   STATUS_SEND,
   STATUS_SEND_FAILED,
   STATUS_SEND_SUCCESS,
@@ -11,30 +12,66 @@ export default {
   argTypes: {},
 };
 
-function PopupTemplate({ status, statusMsg }) {
-  return html`
-    <h1>Dialog Test</h1>
+const STATUS_TXT_MAP = new Map();
+STATUS_TXT_MAP.set(STATUS_SEND, "Text for status send");
+STATUS_TXT_MAP.set(STATUS_SEND_SUCCESS, "Text for status send success");
+STATUS_TXT_MAP.set(STATUS_SEND_FAILED, "Text for status send failed");
 
+function PopupTemplate({ status, statusMsg, progressTxtMapParam }) {
+  return html`
     <pd-submit-dialog
       title="Service informatie"
       status="${status}"
       confirmMail="myemail@web.de"
       statusMsg="${statusMsg}"
+      .progressTxtMap="${progressTxtMapParam}"
     >
+    <p slot="submit-content">
+      Hier steht dann etwas spezifisches.
+    </p>
     </pd-submit-dialog>
   `;
 }
 
+function PopupTemplatePr({ status, statusMsg, progressTxtMapParam }) {
+    
+  const popupEl = new PdSubmitDialog();
+  popupEl.title = "Test Dialog Title"
+  popupEl.status = status;
+  popupEl.statusMsg = statusMsg;
+  popupEl.confirmMail = "test@progressive-development.com";
+  popupEl.progressTxtMap = progressTxtMapParam;
+
+  const slotElement = document.createElement("p");
+  slotElement.setAttribute("slot", "submit-content")  
+  slotElement.innerHTML = `Bedankt voor uw e-mail. Deze wordt nu verzonden. Je ontvangt reactie op uw mail per e-mail naar <em>${popupEl.confirmMail}</em>.`;
+  popupEl.appendChild(slotElement);  
+  
+  // popupEl.type = 'mail';
+
+  popupEl.addEventListener('submit-button-clicked', () => {
+    this.shadowRoot.removeChild(popupEl);
+    this.shadowRoot.getElementById('contactUsId').clear();
+  });
+
+  return popupEl;
+}
+  
+
+      
+
 export const SubmitDialogSend = PopupTemplate.bind({});
 SubmitDialogSend.args = {
   status: STATUS_SEND,
   statusMsg: '',
+  progressTxtMapParam: STATUS_TXT_MAP,
 };
 
 export const SubmitDialogSuccess = PopupTemplate.bind({});
 SubmitDialogSuccess.args = {
   status: STATUS_SEND_SUCCESS,
   statusMsg: '',
+  progressTxtMapParam: STATUS_TXT_MAP,
 };
 
 export const SubmitDialogFailed = PopupTemplate.bind({});
@@ -42,4 +79,12 @@ SubmitDialogFailed.args = {
   status: STATUS_SEND_FAILED,
   statusMsg:
     'Sorry, there was a technical failure during order post. The order was not submitted, please try again later or contact us directly.',
+  progressTxtMapParam: STATUS_TXT_MAP,
+};
+
+export const SubmitDialogSendPr = PopupTemplatePr.bind({});
+SubmitDialogSendPr.args = {
+  status: STATUS_SEND,
+  statusMsg: '',
+  progressTxtMapParam: STATUS_TXT_MAP,
 };