tecitheme 0.0.1

package/components/Header/index.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  IndexProps */
+/** @typedef {typeof __propDef.events}  IndexEvents */
+/** @typedef {typeof __propDef.slots}  IndexSlots */
+export default class Index extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/Modal/index.svelte

@@ -0,0 +1,31 @@
+<script>
+    let shown = false;
+    export function show() {
+      shown = true;
+    }
+    export function hide() {
+      shown = false;
+    }
+  </script>
+    
+  <svelte:window
+    on:keydown={e => {
+      if (e.keyCode == 27) {
+        hide();
+      }
+    }} />
+  
+  {#if shown}
+    <div class="fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full">
+      <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+        <button type="button" on:click={hide} class="absolute top-0 right-0 bg-white rounded-sm p-1 mr-2 mt-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+            <span class="sr-only">Close menu</span>
+            <!-- Heroicon name: outline/x -->
+            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+        </button>
+        <slot />
+      </div>
+    </div>
+  {/if}

package/components/Modal/index.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  IndexProps */
+/** @typedef {typeof __propDef.events}  IndexEvents */
+/** @typedef {typeof __propDef.slots}  IndexSlots */
+export default class Index extends SvelteComponentTyped<{
+    show?: () => void;
+    hide?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+    get show(): () => void;
+    get hide(): () => void;
+}
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        show?: () => void;
+        hide?: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/TrialForm/index.svelte

@@ -0,0 +1,210 @@
+<script>
+    import CountrySelector from '../../CountrySelector/index.svelte';
+    import Icon from "../../Logos/TECi_icon_250.svelte";
+    import { onMount } from 'svelte';
+    import { scrollTo, validateEmail } from "../../utils.js";
+  
+    onMount(() => {
+        setTimeout(() => {
+        timePassed = true
+      }, 3000);
+    });
+  
+    let resellerModal = false
+    let country = "sel"
+    let name = ""
+    let email = ""
+    let product = 0
+    let valid = false
+    let message = ""
+    let error = ""
+    let answer = ""
+    let submitted = false
+    let waiting = false 
+    let timePassed = false
+    
+    $: if ((country != "sel") && (name != "") && (validateEmail(email)) && (product != 0) && (answer == "") && timePassed ) {
+      valid = true
+    } else {
+      valid = false
+    }
+  
+    $: if ((submitted == true) && (message == "")) {
+      waiting = true
+      scrollTo("trial-request")
+    } else {
+      waiting = false
+    }
+  
+    const submitForm = async () => {
+      submitted = true;
+      error = '';
+  
+      try {
+        const submit = await fetch("https://hook.integromat.com/6btizsespvl1na5lrrs9617vwlfnhmvn",{
+        method: "POST",
+        body: JSON.stringify({
+          name,
+          email,
+          country,
+          product
+        }),
+        });
+        message = await submit.json();
+      } catch (err) {
+        console.log(err);
+      }
+  
+    };
+  
+  </script>
+  
+  <form id='trial-request' on:submit|preventDefault={submitForm}>
+      <div class=" border shadow overflow-hidden">
+        {#if message}
+        <div class="px-4 py-5 bg-white sm:p-6 prose">
+          <p>
+            Thank you <strong>{message.name}</strong> for requesting a trial of {#if message.product == 1}PyroSim{:else if message.product == 2}Pathfinder{:else if message.product == 3}PyroSim and Pathfinder{/if}!<br>
+            You will receive an email to <strong>{message.email}</strong> with your activation key{#if message.product == 3}s{/if} in a few moments.
+          </p>
+          {#if message.product == 1}
+          <h3>PyroSim</h3>
+          <p>To download the most recent version visit the <a href="https://support.thunderheadeng.com/pyrosim/">PyroSim Support</a> page.</p>
+          {:else if message.product == 2}
+          <h3>Pathfinder</h3>
+          <p>To download the most recent version visit the <a href="https://support.thunderheadeng.com/pathfinder/">Pathfinder Support</a> page.</p>
+          {:else if message.product == 3}
+          <h3>PyroSim</h3>
+          <p>To download the most recent version visit the <a href="https://support.thunderheadeng.com/pyrosim/">PyroSim Support</a> page.</p>
+          <h3>Pathfinder</h3>
+          <p>To download the most recent version visit the <a href="https://support.thunderheadeng.com/pathfinder/">Pathfinder Support</a> page.</p>
+          {/if}
+          <h3>Need Help?</h3>
+          <p>Please email <a href="mailto:support@thunderheadeng.com">support@thunderheadeng.com</a> if you have any questions.</p>
+        </div>
+        {:else if error}
+          <p>There was an error: {error}</p>
+        {:else if waiting}
+        <div id="waiting" class="p-12 mx-auto">
+          <p class="text-center pb-8 font-bold">Waiting for Trial Approval...</p>
+          <Icon classes="h-24 w-24 mx-auto animate-pulse"/>
+        </div>      
+        {:else}
+        <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
+          <fieldset>
+            <div>
+              <legend class="text-lg font-bold text-gray-900">
+                Personal Information
+              </legend>
+            </div>
+            <div class="flex flex-row align-middle items-center pt-4">
+              <label
+                for="name"
+                class="whitespace-nowrap pr-2 block font-medium text-gray-700"
+              >
+                Full Name:
+              </label>
+              <input id="name" type="text" name="name" bind:value={name}
+                class="w-full p-1 border-0 border-b-2 border-gray-500"
+              />
+            </div>
+            <div class="flex flex-row align-middle items-center pt-4">
+              <label
+                for="email"
+                class="pr-2 block font-medium text-gray-700"
+              >
+                Email:
+              </label>
+              <input id="email" type="text" name="email" bind:value={email}
+                class="w-full p-1 border-0 border-b-2 border-gray-500"
+              />
+            </div>
+            <div class="flex flex-row align-middle items-center pt-4">
+              <label
+                for="country"
+                class="pr-2 block font-medium text-gray-700"
+              >
+                Country:
+              </label>
+              <input id="country" type="hidden" name="country" value={country}/>
+              <CountrySelector bind:selection={country} bind:resellerModal={resellerModal} />
+            </div>
+          </fieldset>
+          <fieldset>
+            <div>
+              <legend class="text-lg font-bold text-gray-900">
+                What would you like to try?
+              </legend>
+            </div>
+            <div class="mt-4 space-y-4">
+              <div class="flex items-center">
+                <input
+                  id="pyrosim"
+                  name="product"
+                  type="radio"
+                  value={1}
+                  bind:group={product}
+                  class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
+                />
+                <label
+                  for="pyrosim"
+                  class="ml-3 block text-sm font-medium text-gray-700"
+                >
+                  PyroSim
+                </label>
+              </div>
+              <div class="flex items-center">
+                <input
+                  id="pathfinder"
+                  name="product"
+                  type="radio"
+                  value={2}
+                  bind:group={product}
+                  class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
+                />
+                <label
+                  for="pathfinder"
+                  class="ml-3 block text-sm font-medium text-gray-700"
+                >
+                  Pathfinder
+                </label>
+              </div>
+              <div class="flex items-center">
+                <input
+                  id="pyropath"
+                  name="product"
+                  type="radio"
+                  value={3}
+                  bind:group={product}
+                  class="focus:ring-teci-blue-dark h-4 w-4 text-blue-600 border-gray-300"
+                />
+                <label
+                  for="pyropath"
+                  class="ml-3 block text-sm font-medium text-gray-700"
+                >
+                  PyroSim and Pathfinder
+                </label>
+              </div>
+            </div>
+          </fieldset>
+          <input class="confident" id="answer" type="text" name="answer" bind:value={answer} placeholder="Correct answers only..."/>
+        </div>
+        <div class="px-4 py-3 text-right sm:px-6">
+          <button type="submit" disabled={!valid}
+            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium text-white {valid === true ? 'bg-teci-blue-light hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500' : 'bg-gray-300 cursor-not-allowed'}"
+          >
+            Send Request
+          </button>
+          {#if answer}
+          <p>Something is wrong with the form, please email support@thunderheadeng.com.</p>
+          {/if}
+        </div>
+        {/if}
+      </div>
+    </form>
+  
+    <style >
+      .confident {
+        @apply hidden
+      }
+    </style>

package/components/TrialForm/index.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  IndexProps */
+/** @typedef {typeof __propDef.events}  IndexEvents */
+/** @typedef {typeof __propDef.slots}  IndexSlots */
+export default class Index extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "tecitheme",
+  "version": "0.0.1",
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/typography": "^0.5.0",
+    "@types/cookie": "^0.4.1",
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
+    "autoprefixer": "^10.4.2",
+    "dotenv": "^10.0.0",
+    "encoding": "^0.1.13",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-svelte3": "^3.2.1",
+    "mdsvex": "^0.9.8",
+    "postcss": "^8.4.5",
+    "prettier": "^2.4.1",
+    "prettier-plugin-svelte": "^2.4.0",
+    "stream": "^0.0.2",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.2.6",
+    "svelte-cubed": "^0.2.1",
+    "svelte-preprocess": "^4.10.1",
+    "svelte2tsx": "^0.4.12",
+    "tailwindcss": "^3.0.12",
+    "three": "^0.136.0",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.3",
+    "vite": "^2.7.10"
+  },
+  "type": "module",
+  "dependencies": {
+    "@lukeed/uuid": "^2.0.0",
+    "cookie": "^0.4.1",
+    "ultra_cart_rest_api_v2": "^3.6.36"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./Logos/TECi_icon_250.svelte": "./Logos/TECi_icon_250.svelte",
+    "./Logos/TECi_logo.svelte": "./Logos/TECi_logo.svelte",
+    "./components/CountrySelector/index.svelte": "./components/CountrySelector/index.svelte",
+    "./components/Footer/index.svelte": "./components/Footer/index.svelte",
+    "./components/Header/index.svelte": "./components/Header/index.svelte",
+    "./components/Modal/index.svelte": "./components/Modal/index.svelte",
+    "./components/TrialForm/index.svelte": "./components/TrialForm/index.svelte",
+    "./req_utils": "./req_utils.js",
+    "./utils": "./utils.js"
+  }
+}

package/req_utils.d.ts

@@ -0,0 +1,3 @@
+export function browserGet(key: any): any;
+export function browserSet(key: any, value: any): any;
+export function post(fetch: any, url: any, body: any): Promise<any>;

package/req_utils.js

@@ -0,0 +1,62 @@
+import {browser} from '$app/env'
+
+export function browserGet(key) {
+    if (browser) {
+        const item = localStorage.getItem(key)
+        if (item) {
+            return JSON.parse(item)
+        }
+    }
+    return null
+}
+
+export function browserSet(key, value) {
+    if (browser) {
+        localStorage.setItem(key, value)
+    }
+    return null
+}
+
+export async function post(fetch, url, body) {
+    let customError = false
+    try {
+        let headers = {}
+        if (!(body instanceof FormData)) {
+            headers['Content-Type'] = 'application/json'
+            body = JSON.stringify(body)
+        }
+        const token = browserGet('token')
+        if(token) {
+          headers['X-UltraCart-Api-Version'] = '2017-03-01'
+          headers[Accept] = 'application/json'
+          headers['x-ultracart-simple-key'] = token
+        }
+        const res = await fetch(url, {
+            method: 'POST',
+            body,
+            headers
+        })
+        if(!res.ok) {
+            try{
+                const data = await res.json()
+                const error = data.message[0].messages[0]
+                customError = true
+                throw {id: error.id, message: error.message}
+            } catch(err) {
+                console.log(err)
+                throw err
+            }
+        }
+        try {
+            const json = await res.json()
+            return json
+        } catch(err) {
+            console.log(err)
+            throw{id:'',message:'An unknown error has occured.'}
+        }
+    } catch(err) {
+        console.log(err)
+        throw customError ? err : { id: '', message: 'An unknown error has occured'}
+    }
+
+}

package/utils.d.ts

@@ -0,0 +1,2 @@
+export function scrollTo(anchor: any): void;
+export function validateEmail(email: any): boolean;

package/utils.js

@@ -0,0 +1,10 @@
+export function scrollTo(anchor) {
+    document.querySelector("#" + anchor).scrollIntoView({
+        behavior: 'smooth'
+    });
+}
+
+export function validateEmail(email) {
+    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return re.test(String(email).toLowerCase());
+}