Post ioniconf

assets/scss/utilities/u-ioniconf.scss

@@ -60,7 +60,7 @@
            $mRight:null, $fG: null, $w: null, $h: null, $mxW: null, $mnW: null, $mxH:null, $mnH:null, $br: null, $pos: null,
            $t:null, $r:null, $b:null, $l:null, $z:null, $bord:null, $bTop:null, $bRight:null, $bBot:null, $bLeft:null,
            $pTop:null, $pBot:null, $pLeft:null, $pRight:null, $d:null, $gtc:null, $gg:null, $jc:null, $js:null, $ai:null, $as:null,
-           $p: null, $o:null, $order:null, $bf:null) {
+           $p: null, $o:null, $order:null, $bf:null, $over:null) {
   #{$element}.u-box {
     display:#{$d};
     padding: #{$p};
@@ -103,6 +103,7 @@
     order: #{$order};
     opacity:#{$o};
     backdrop-filter:#{bf};
+    overflow:#{$over};
   }
 }
 

assets/scss/utilities/u-mixins.scss

@@ -1,9 +1,13 @@
-@mixin box($back:null, $color:null, $fb: null, $mis:null, $mie:null, $mbs:null,
-           $mbe:null, $fg: null, $w: null, $h: null, $mxw: null, $mnw: null, $mxh:null, $mnh:null, $pos: null,
-           $t:null, $r:null, $b:null, $l:null, $z:null, $bord:null, $bt:null, $br:null, $bb:null, $bl:null,
-           $pt:null, $pb:null, $pl:null, $pr:null, $d:null, $gtc:null, $gg:null, $jc:null, $js:null, $ai:null, $as:null, $p: null,
-           $order:null, $fd:null, $fw:null, $bs:null, $o:null, $rg:null, $cg:null, $trans:null, $of:null) {
+@mixin box($back:null, $color:null, $fb: null, $mis:null, $mie:null, $mbs:null, $mbe:null, $c:null,
+           $fg: null, $w: null, $h: null, $mxw: null, $mnw: null, $mxh:null, $mnh:null, $pos: null, $va:null,
+           $t:null, $r:null, $b:null, $l:null, $z:null, $bord:null, $bt:null, $br:null, $bb:null, $bl:null, $bi:null,
+           $pbs:null, $pbe:null, $pis:null, $pie:null, $pi:null, $pb:null, $d:null, $gtc:null, $gg:null, $jc:null, $js:null, $ai:null, $as:null, $p: null,
+           $order:null, $fd:null, $fw:null, $bs:null, $o:null, $rg:null, $cg:null, $trans:null, $tf:null, $of:null, $ta:null,
+           $v:null, $curs:null, $contain:null, $f:null) {
   display:#{$d};
+  @if $c {
+    content: "#{$c}";
+  }  
   padding: #{$p};
   margin-inline-start: #{$mis};
   margin-inline-end: #{$mie};
@@ -20,17 +24,20 @@
   max-height: #{$mxh};
   min-height: #{$mnh};
   border-radius: #{$br};
+  border-image: #{$bi};
   position: #{$pos};
   top: #{$t};
   right: #{$r};
   bottom: #{$b};
   left: #{$l};
   z-index: #{$z};
   border: #{$bord};
-  padding-top: #{$pt};
-  padding-right: #{$pr};
-  padding-bottom: #{$pb};
-  padding-left: #{$pl};
+  padding-inline-start: #{$pis};
+  padding-inline-end: #{$pie};
+  padding-block-start: #{$pbs};
+  padding-block-end: #{$pbe};
+  padding-inline: #{$pi};
+  padding-block: #{$pb};
   grid-template-columns: #{$gtc};
   grid-gap: #{$gg};
   column-gap: #{$cg};
@@ -46,13 +53,20 @@
   opacity: #{$o};
   transition: #{$trans};
   overflow:#{$of};
+  transform:#{$tf};
+  text-align:#{$ta};
+  vertical-align: #{$va};
+  visibility: #{$v};
+  cursor: #{$curs};
+  contain: #{$contain};
+  fill: #{$f};
 }
 
-@mixin media($type:'max-width', $val:null, $back:null, $color:null, $fb: null, $mt:null, $mb:null, $ml:null,
-$mr:null, $fg: null, $w: null, $h: null, $mxw: null, $mnw: null, $mxh:null, $mnh:null, $pos: null,
+@mixin media($type:'max-width', $val:null, $back:null, $color:null, $fb: null, $mis:null, $mie:null, $mbs:null, $mbe:null,
+$fg: null, $w: null, $h: null, $mxw: null, $mnw: null, $mxh:null, $mnh:null, $pos: null,
 $t:null, $r:null, $b:null, $l:null, $z:null, $bord:null, $bt:null, $br:null, $bb:null, $bl:null,
-$pt:null, $pb:null, $pl:null, $pr:null, $d:null, $gtc:null, $gg:null, $jc:null, $js:null, $ai:null, $as:null, $p: null,
-$order:null, $fd:null, $fw:null, $bs:null, $o:null, $rg:null, $cg:null) {
+$pbs:null, $pbe:null, $pis:null, $pie:null, $d:null, $gtc:null, $gg:null, $jc:null, $js:null, $ai:null, $as:null, $p: null,
+$order:null, $fd:null, $fw:null, $bs:null, $o:null, $rg:null, $cg:null, $ta:null) {
   @media screen and (#{$type}: $val) {
     display:#{$d};
     padding: #{$p};
@@ -78,10 +92,10 @@ $order:null, $fd:null, $fw:null, $bs:null, $o:null, $rg:null, $cg:null) {
     left: #{$l};
     z-index: #{$z};
     border: #{$bord};
-    padding-top: #{$pt};
-    padding-right: #{$pr};
-    padding-bottom: #{$pb};
-    padding-left: #{$pl};
+    padding-inline-start: #{$pis};
+    padding-inline-end: #{$pie};
+    padding-block-start: #{$pbs};
+    padding-block-end: #{$pbe};
     grid-template-columns: #{$gtc};
     grid-gap: #{$gg};
     column-gap: #{$cg};
@@ -95,11 +109,12 @@ $order:null, $fd:null, $fw:null, $bs:null, $o:null, $rg:null, $cg:null) {
     flex-wrap: #{$fw};
     box-shadow: #{$bs};
     opacity: #{$o};
+    text-align: #{$ta}
   }
 }
 
 
-@mixin font($ff: null, $fw: null, $fs: null, $lh: null, $ls: null, $tt: null, $ws: null, $color:null) {
+@mixin font($ff: null, $fw: null, $fs: null, $lh: null, $ls: null, $tt: null, $ws: null, $color:null, $o:null) {
   font-family: #{$ff};
   font-weight: #{$fw};
   font-size: #{$fs};
@@ -108,4 +123,5 @@ $order:null, $fd:null, $fw:null, $bs:null, $o:null, $rg:null, $cg:null) {
   text-transform: #{$tt};
   white-space: #{$ws};
   color: #{$color};
+  opacity: #{$o};
 }

assets/stencil/components.d.ts

@@ -35,6 +35,7 @@ export namespace Components {
   }
   interface HubspotForm {
     'formId': string;
+    'submitText': string;
   }
   interface IconExternal {}
   interface IonicAppWizard {}
@@ -370,6 +371,7 @@ declare namespace LocalJSX {
   }
   interface HubspotForm {
     'formId'?: string;
+    'submitText'?: string;
   }
   interface IconExternal {}
   interface IonicAppWizard {}

assets/stencil/components/hubspot-form/hubspot-form.scss

@@ -1,14 +1,6 @@
 @import '../../vars';
 
-hubspot-form {
-  width: 100%;
-}
-
-.success__message {
-  display:flex;
-  align-items:center;
-
-  svg {
-    margin-right: 16px;
-  }
+form {
+  height:100%;
+  width:100%;
 }

assets/stencil/components/hubspot-form/hubspot-form.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, h, State } from '@stencil/core';
+import { Component, Prop, Element, h, State, Host } from '@stencil/core';
 import { uuid } from 'uuidv4'
 
 interface fieldProps {
@@ -11,11 +11,11 @@ interface fieldProps {
 
 const HubspotFormGroups = ({fields}) => {
   return (
-    <fieldset>
-      { fields.map(({label, placeholder, hidden, fieldType, name}) => [
+    <fieldset hidden={!fields.every(field => field.hidden === false)}>
+      { fields.map(({label, hidden, fieldType, name, selectedOptions}) => [
         label ?
         <label hidden={hidden}>{label}</label> : '',
-        <input placeholder={placeholder} type={fieldType} hidden={hidden} name={name} class="hs-input"/>
+        <input required={!hidden} placeholder="Email" type={fieldType} hidden={hidden} name={name} value={selectedOptions[0]} class="hs-input"/>
       ]) }
     </fieldset>
   )
@@ -28,66 +28,69 @@ const HubspotFormGroups = ({fields}) => {
 })
 export class HubspotForm {
   @Prop() formId: string = 'default';
+  @Prop() submitText: string;
   @Element() el: HTMLElement;
-  @State() blocked: boolean;
+  @State() data = false;
   @State() emailInvalid: boolean = false;
   @State() emailSuccess: boolean = false;
   private wrapperId: string = "id-" + uuid();
   private formFields: fieldProps[] = []
   private formGroups: any = [];
-  private submitText: String;
+
   private formEl: HTMLFormElement;
-  private successMsg: HTMLElement;
 
-  componentWillLoad() {
-    if (window['hbspt']) {
-      this.createHubspotForm();
-      return;
-    }
+  // componentWillLoad() {
+    // if (window['hbspt']) {
+    //   this.createHubspotForm();
+    //   return;
+    // }
 
-    const script = document.createElement('script');
-    script.onload = () => {
-      this.createHubspotForm();
-    };
-    script.onerror = this.loadBackupForm;
-    script.src = '//js.hsforms.net/forms/v2.js';
-
-    this.el.appendChild(script);
-  }
+    // const script = document.createElement('script');
+    // script.onload = () => {
+    //   this.createHubspotForm();
+    // };
+    // script.onerror = this.loadBackupForm;
+    // script.src = '//js.hsforms.net/forms/v2.js';
+
+    // this.el.appendChild(script);
+  // }
 
   createHubspotForm() {
-    window['hbspt'].forms.create({
-      portalId: '3776657',
-      formId: this.formId,
-      target: `#${this.wrapperId}`,
-    });
+    // window['hbspt'].forms.create({
+    //   portalId: '3776657',
+    //   formId: this.formId,
+    //   target: `#${this.wrapperId}`,
+    // });
   }
 
-  loadBackupForm = async () => {
-    const response = await fetch(`/api/v1/getform/${this.formId}`)
-    const data = await response.json()
+  componentWillLoad = async () => {
+    const response = await fetch(`/api/v1/getform/${this.formId}`);
+    const data = await response.json();
 
-    this.submitText = data.submitText;
     this.formGroups = data.formFieldGroups;
+    !this.submitText ? this.submitText = data.submitText : '';
+
     data.formFieldGroups.forEach(({fields}) => {
       fields.forEach(field => {
         this.formFields.push(field);
       })
     });
 
-    this.blocked = true;
+    this.data = true;
   }
 
-  handleBackupSubmit = async (e: UIEvent) => {
+  handleSubmit = async (e: UIEvent) => {
     e.preventDefault();
-    const url: string = "https://api.hsforms.com/submissions/v3/integration/submit/3776657/84157001-6990-455e-8672-cb0d936a2226"
+    const url: string = `https://api.hsforms.com/submissions/v3/integration/submit/3776657/${this.formId}`
     const cookie =  document.cookie.match(/(hubspotutk=).*?(?=;)/g);
     const fields = this.formFields.map(field => {
       return {
         "name": field.name,
         "value": this.formEl[`${field.name}`].value
       }
     });
+
+
     const context: { pageUri: string, pageName: string, hutk?: string} = {
       "pageUri": "https://ionicframework.com/ioniconf",
       "pageName": "Ioniconf 2020"
@@ -110,37 +113,29 @@ export class HubspotForm {
       body: JSON.stringify(data) 
     });
 
-    const resData = await response.json();
-
-    if (response.status == 200){
-      const successMsg = resData.inlineMessage.match(/(<p>).*?(?=&nbsp;)/g)[0].split("<p>")[1];
-      this.successMsg = successMsg;
+    if (response.status.toString().charAt(0) == '2'){
       this.emailSuccess = true;
     } else {
       this.emailInvalid = true;
     }
   }
 
   render() {
+    if (!this.data) return;
+
     return (
-      <div id={this.wrapperId} class="hbspt-form">
-        { this.blocked && !this.emailSuccess &&
-        <form onSubmit={this.handleBackupSubmit} ref={e => this.formEl = e} class="hs-form">
-          { this.formGroups.map(g => <HubspotFormGroups fields={g.fields}/>)}
-          <div class="hs-submit">
-            <button class="hs-button">{this.submitText}</button>
-          </div>
-        </form> }
-
-        { this.emailSuccess &&
-        <div class="success__message">
-          <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <Host id={this.wrapperId} class="hbspt-form">
+        <form onSubmit={this.handleSubmit} ref={e => this.formEl = e} class="hs-form">
+          { this.formGroups?.map(g => <HubspotFormGroups fields={g.fields}/>)}
+
+          { this.emailSuccess ?
+          <svg class="success" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M21 42c11.598 0 21-9.402 21-21S32.598 0 21 0 0 9.402 0 21s9.402 21 21 21z" fill="#D3F3DB"/>
             <path d="M13.87 20.97a1.75 1.75 0 00-2.54 2.408l2.54-2.407zm3.588 6.33l-1.27 1.204a1.75 1.75 0 002.54 0l-1.27-1.204zM30.67 15.904a1.75 1.75 0 00-2.54-2.408l2.54 2.408zm-19.34 7.474l4.858 5.126 2.54-2.408-4.858-5.125-2.54 2.407zm7.398 5.126l11.942-12.6-2.54-2.408-11.942 12.6 2.54 2.408z" fill="#43C465"/>
-          </svg>
-          <p>{this.successMsg}</p>
-        </div> }
-      </div>
+          </svg> :
+          <button class="button" aria-label="submit email">{this.submitText}</button>}
+        </form> 
+      </Host>
     );
   }
 }

package.json

@@ -76,7 +76,8 @@
     "hubspot": "^2.3.6",
     "ionicons": "5.1.0",
     "jquery": "3.5.0",
-    "jsforce": "^1.9.3",
+    "jsforce": "1.9.3",
+    "lodash": "4.17.15",
     "marked": "^0.8.0",
     "moment": "^2.24.0",
     "nunjucks": "^3.2.0",