[Growth] Building zip code flow

package.json

@@ -12,11 +12,9 @@
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
     "@rollup/plugin-replace": "^4.0.0",
-    "@rollup/plugin-typescript": "^8.0.0",
+    "@rollup/plugin-typescript": "^11.1.0",
     "@sveltejs/adapter-static": "^1.0.0-next.34",
-    "@tsconfig/svelte": "^2.0.0",
-    "autoprefixer": "^10.4.7",
-    "ngrok": "^4.3.1",
+    "@tsconfig/svelte": "^4.0.1",
     "postcss": "^8.4.14",
     "rollup": "^2.3.4",
     "rollup-plugin-css-only": "^3.1.0",
@@ -26,15 +24,16 @@
     "rollup-plugin-terser": "^7.0.0",
     "svelte": "^3.0.0",
     "svelte-check": "^2.8.0",
-    "svelte-preprocess": "^4.10.6",
-    "tslib": "^2.0.0",
-    "typescript": "^4.0.0"
+    "svelte-preprocess": "^5.0.0",
+    "tslib": "^2.5.0",
+    "typescript": "^5.0.0",
+    "autoprefixer": "^10.4.0",
+    "ngrok": "^4.3.1"
   },
   "dependencies": {
     "@types/google.maps": "^3.54.10",
     "rollup-plugin-svelte-svg": "^1.0.0-beta.6",
-    "sass": "^1.53.0",
-    "sirv-cli": "^2.0.0",
-    "svelte-portal": "^2.2.0"
+    "sass": "^1.69.0",
+    "sirv-cli": "^2.0.0"
   }
 }

public/global.css

@@ -0,0 +1,9 @@
+#zip-code-entry {
+  margin-bottom: 200px !important;
+}
+
+.signup_wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 200px;
+}

public/index.html

@@ -381,14 +381,16 @@ <h1 class="nm-72 white">
 
                     <div class="signup_wrapper">
                       <div class="div-block-38">
-                        <div
-                          id="hero-address-entry"
-                          class="div-block-3 w-node-_9f5fc305-244a-152c-8398-0ac8efec31c2-f507879a"
-                        >
+                        <div id="zip-code-entry" class="div-block-3 w-node-_9f5fc305-244a-152c-8398-0ac8efec31c2-f507879a">
+                          <!-- .input-address-container gets inserted here via ZipCodeInput.svelte -->
+                          <div class="defaultwidth"></div>
+                        </div>
+                        <div id="hero-address-entry" class="div-block-3 w-node-_9f5fc305-244a-152c-8398-0ac8efec31c2-f507879a">
                           <!-- .input-address-container gets inserted here via LocationInput.svelte -->
                           <div class="defaultwidth"></div>
                         </div>
                       </div>
+
                       <p
                         blocks-name="paragraph-2"
                         class="paragraph text-color-white beta_text"

rollup.createConfig.js

@@ -8,6 +8,7 @@ import { svelteSVG } from "rollup-plugin-svelte-svg";
 import typescript from "@rollup/plugin-typescript";
 import css from "rollup-plugin-css-only";
 import replace from "@rollup/plugin-replace";
+import * as sass from 'sass';
 
 const production = !process.env.ROLLUP_WATCH;
 const ASSET_URL =
@@ -60,7 +61,10 @@ const createRollupConfigBase = (foo) => {
           postcss: {
             plugins: [require("autoprefixer")()],
           },
-          scss: {},
+          scss: {
+            implementation: sass,
+            renderSync: true
+          },
         }),
 
         compilerOptions: {

src/PreorderApp.ts

@@ -1,6 +1,7 @@
 import type { PreorderAppConfig } from "./Config.types";
 import { initializeHubspotForms } from "./initializeForms";
 import LocationInput from "./location-input/LocationInput.svelte";
+import ZipCodeInput from "./location-input/ZipCodeInput.svelte";
 import { fadeOut } from "./visibilityUtils";
 
 export const PreorderApp = {
@@ -96,4 +97,86 @@ export const PreorderApp = {
 
     return locationInput;
   },
+
+  initializeZipCode: (props: PreorderAppConfig) => {
+    const {
+      targetElAddressInput = document.getElementById("zip-code-entry"),
+      googlePublicApiKey,
+      targetPanel,
+      targetAddressPanel,
+      targetAvailableState,
+      targetNotAvailableState,
+      targetStateContainer,
+      targetAvailableText,
+      targetDisplayAddress,
+      googleSheetConfig,
+      hsFormSuccess,
+      hsFormNewsletter,
+      querySelectorClickToOpenForm,
+      onAddressSubmitSuccess,
+      hidePanelEl,
+      addressCtaText,
+    } = props;
+
+    initializeHubspotForms({
+      hsFormSuccess,
+      hsFormNewsletter,
+    });
+
+    const panelEl = document.querySelector(targetPanel) as HTMLDivElement;
+    const stateContainerEl = document.querySelector(
+      targetStateContainer,
+    ) as HTMLDivElement;
+
+    const addressPanelEl = document.querySelector(
+      targetAddressPanel,
+    ) as HTMLDivElement;
+    const targetAvailableStateEl = document.querySelector(
+      targetAvailableState,
+    ) as HTMLDivElement;
+    const targetNotAvailableStateEl = document.querySelector(
+      targetNotAvailableState,
+    ) as HTMLDivElement;
+
+    // open form button actions
+    document.querySelectorAll(querySelectorClickToOpenForm).forEach((el) => {
+      el.addEventListener("click", (e) => {
+        e.preventDefault();
+        targetElAddressInput.scrollIntoView({
+          behavior: "smooth",
+        });
+
+        const y =
+          targetElAddressInput.getBoundingClientRect().top +
+          window.scrollY -
+          300;
+
+        window.scrollTo({ top: y, behavior: "smooth" });
+
+        setTimeout(() => {
+          targetElAddressInput.querySelector("input").focus();
+        }, 1000);
+      });
+    });
+
+    /**
+     * close button
+     */
+    document.querySelectorAll(".close-button").forEach((el) => {
+      el.addEventListener("click", () => {
+        fadeOut(panelEl);
+      });
+    });
+
+    const zipCodeInput = new ZipCodeInput({
+      target: targetElAddressInput,
+      props: {
+        googleSheetConfig,
+        onAddressSubmitSuccess,
+        addressCtaText,
+      },
+    });
+
+    return zipCodeInput;
+  },
 };

src/location-input/LocationInput.svelte

@@ -4,7 +4,8 @@
 
 <script lang="ts">
   import GooglePlaceAutocomplete from "./googlePlace/GooglePlaceAutocomplete.svelte";
-  import { ParsedPlaceResult, parsePlaceResult } from "./googlePlace/utils";
+  import type { ParsedPlaceResult } from "./googlePlace/utils";
+  import { parsePlaceResult } from "./googlePlace/utils";
   import { setHiddenHubspotInputs } from "./hubspot/hsFormUtils";
   import { displayBlock, displayNone, fadeIn } from "../visibilityUtils";
   import { onMount } from "svelte";
@@ -217,9 +218,10 @@
     right: 9px;
     margin-top: -56px;
     z-index: 551;
+    padding: 0 20px;
 
     /* label/label2 */
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 500;
 
     @media screen and (max-width: 768px) {
@@ -244,8 +246,8 @@
     border-radius: 12px;
     border: none !important;
     outline: none !important;
-    font-size: 16px;
-    font-weight: 400;
+    font-size: 14px;
+    font-weight: 500;
     line-height: 24px;
     padding: 3px 16px 0 48px;
     &.focused {
@@ -254,7 +256,7 @@
   }
   .location-search-input::placeholder {
     color: #7F7D7A;
-    font-size: 18px;
+    font-size: 14px;
     font-weight: 500;
   }
   .location-search-input.input:focus {