Merge pull request #366 from significa/SIGN-673

feat: contact us block
significa · Mar 25, 2024 · 297b95a · 297b95a
2 parents 8cc2da5 + 7009255
commit 297b95a
Show file tree

Hide file tree

Showing 11 changed files with 192 additions and 45 deletions.
diff --git a/components.198185.json b/components.198185.json
@@ -2920,6 +2920,34 @@
       "content_type_asset_preview": null,
       "component_group_name": "Blocks"
     },
+    {
+      "name": "measurement_entry",
+      "display_name": null,
+      "created_at": "2024-03-22T11:29:02.519Z",
+      "updated_at": "2024-03-22T11:29:15.865Z",
+      "id": 5541574,
+      "schema": {
+        "title": {
+          "type": "text"
+        },
+        "value": {
+          "type": "number"
+        }
+      },
+      "image": null,
+      "preview_field": null,
+      "is_root": false,
+      "preview_tmpl": null,
+      "is_nestable": true,
+      "all_presets": [],
+      "preset_id": null,
+      "real_name": "measurement_entry",
+      "component_group_uuid": "a0e45743-888c-44ef-a39f-0d8b7b6defa3",
+      "color": null,
+      "icon": null,
+      "content_type_asset_preview": null,
+      "component_group_name": "Single"
+    },
     {
       "name": "newton",
       "display_name": null,
@@ -3726,6 +3754,49 @@
       "content_type_asset_preview": null,
       "component_group_name": "Content Types"
     },
+    {
+      "name": "project-detailed-entry",
+      "display_name": null,
+      "created_at": "2024-03-22T11:33:38.201Z",
+      "updated_at": "2024-03-22T11:37:48.120Z",
+      "id": 5541582,
+      "schema": {
+        "project": {
+          "type": "option",
+          "use_uuid": true,
+          "options": [],
+          "source": "internal_stories",
+          "filter_content_type": ["project"]
+        },
+        "measurements": {
+          "type": "bloks",
+          "restrict_type": "",
+          "restrict_components": true,
+          "component_whitelist": ["measurement_entry"]
+        },
+        "testimonial": {
+          "type": "bloks",
+          "restrict_type": "",
+          "restrict_components": true,
+          "component_whitelist": ["richtext-testimonial"],
+          "maximum": 1,
+          "minimum": 1
+        }
+      },
+      "image": null,
+      "preview_field": null,
+      "is_root": false,
+      "preview_tmpl": null,
+      "is_nestable": true,
+      "all_presets": [],
+      "preset_id": null,
+      "real_name": "project-detailed-entry",
+      "component_group_uuid": "a0e45743-888c-44ef-a39f-0d8b7b6defa3",
+      "color": null,
+      "icon": null,
+      "content_type_asset_preview": null,
+      "component_group_name": "Single"
+    },
     {
       "name": "projects",
       "display_name": null,
@@ -3777,6 +3848,39 @@
       "content_type_asset_preview": null,
       "component_group_name": "Pages"
     },
+    {
+      "name": "projects-two-columns",
+      "display_name": null,
+      "created_at": "2024-03-22T10:16:30.309Z",
+      "updated_at": "2024-03-22T11:56:07.136Z",
+      "id": 5541415,
+      "schema": {
+        "project": {
+          "type": "bloks",
+          "minimum": 2,
+          "maximum": 2,
+          "restrict_type": "",
+          "restrict_components": true,
+          "component_whitelist": ["project-detailed-entry"]
+        },
+        "note": {
+          "type": "textarea"
+        }
+      },
+      "image": null,
+      "preview_field": null,
+      "is_root": false,
+      "preview_tmpl": null,
+      "is_nestable": true,
+      "all_presets": [],
+      "preset_id": null,
+      "real_name": "projects-two-columns",
+      "component_group_uuid": "c9011224-9690-43bd-b686-e8f60ef6c7f6",
+      "color": null,
+      "icon": null,
+      "content_type_asset_preview": null,
+      "component_group_name": "Blocks"
+    },
     {
       "name": "proposal",
       "display_name": null,

diff --git a/src/components/blocks/contact-us-form.svelte b/src/components/blocks/contact-us-form.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import ContactForm from '$components/contact-form.svelte';
+  import Segg1 from '$components/pages/contact/illustrations/segg1.svelte';
+  import Segg2 from '$components/pages/contact/illustrations/segg2.svelte';
+  import PanWithEggs from '$components/pages/contact/pan-with-eggs.svelte';
+  import { storyblokEditable } from '$lib/actions/storyblok-editable';
+  import type { ContactUsFormStoryblok } from '$types/bloks';
+
+  export let block: ContactUsFormStoryblok;
+</script>
+
+<div use:storyblokEditable={block} class="overflow-hidden">
+  <div class="container relative mx-auto px-container">
+    <section class="pb-5 pt-10 lg:pb-12 lg:pt-20 lg:text-center">
+      <h1 class="mx-auto text-7xl text-foreground-secondary lg:max-w-xl">
+        {block.title1}
+      </h1>
+      <span class="mx-auto text-7xl lg:max-w-xl">{block.title2}</span>
+    </section>
+
+    <section class="mx-auto lg:max-w-xl lg:pt-5">
+      <ContactForm variant="contact" disclaimer={block.form_support_text} />
+    </section>
+
+    <PanWithEggs class="absolute -left-16 top-4 hidden -rotate-[14deg] drop-shadow-md lg:block" />
+    <Segg1 class="absolute -right-16 top-[170px] hidden -rotate-[16deg] drop-shadow-md lg:block" />
+    <Segg2 class="absolute -right-20 top-[400px] hidden -rotate-[16deg] drop-shadow-md lg:block" />
+  </div>
+</div>
diff --git a/src/components/blocks/dynamic-block.svelte b/src/components/blocks/dynamic-block.svelte
@@ -10,6 +10,7 @@
     'blog-list': BlogList,
     image: Image,
     'careers-list': CareersList,
+    'contact-us-form': ContactUsForm,
     comparison: Comparison,
     canvas: Canvas,
     'core-values': CoreValues,
@@ -84,6 +85,7 @@
   import Timezone from './timezone.svelte';
   import FormBudgetRange from './form-budget-range.svelte';
   import List from './list.svelte';
+  import ContactUsForm from './contact-us-form.svelte';
   import OpenPositions from './open-positions.svelte';
   import DrawSegg from './draw-segg.svelte';
   import Canvas from './canvas.svelte';

diff --git a/src/components/blocks/office-cards.svelte b/src/components/blocks/office-cards.svelte
@@ -9,7 +9,10 @@
   export let block: OfficeCardsStoryblok;
 </script>
 
-<section use:storyblokEditable={block} class={clsx(!block.variant && 'overflow-hidden border-y')}>
+<section
+  use:storyblokEditable={block}
+  class={clsx('overflow-hidden', !block.variant && 'border-y')}
+>
   {#if !block.variant}
     <div class="container mx-auto px-container pt-8 lg:pt-12">
       <div class="flex flex-col justify-between gap-7 lg:flex-row lg:gap-4">
@@ -45,7 +48,7 @@
   {:else if !!block.office_cards?.length}
     <section class="border-b">
       <div class="container mx-auto px-container">
-        <HoverableGallery cards={block.office_cards} class="mt-12 lg:mt-0" />
+        <HoverableGallery cards={block.office_cards} class="mt-12 lg:mt-4" />
       </div>
     </section>
   {/if}

diff --git a/src/components/contact-form.svelte b/src/components/contact-form.svelte
@@ -24,6 +24,7 @@
   import type { ISbStoryData } from '@storyblok/js';
   import clsx from 'clsx';
   import { createEventDispatcher } from 'svelte';
+  import { budgetRange } from './pages/get-a-quote/budgetRange';
 
   export let variant: undefined | FormType = undefined;
   export let disclaimer: string | undefined = undefined;
@@ -73,14 +74,7 @@
     input: string;
   }>();
 
-  const budgetOptions = [
-    '15.000€ to 50.000€',
-    '50.000€ to 100.000€',
-    '100.000€ to 200.000€',
-    '200.000€ to 300.000€',
-    '300.000€ to 400.000€',
-    '400.000€ and above'
-  ];
+  const budgetOptions = budgetRange;
 
   const careers = [
     DEFAULT_POSITION,
@@ -228,7 +222,7 @@
       on:blur={() => dispatch('blur', 'message')}
       on:input={() => dispatch('input', 'message')}
     />
-    {#if type === 'quote'}
+    {#if type === 'quote' && budgetOptions}
       <FloatingSelect
         required
         name="budget"

diff --git a/src/components/hoverable-gallery.svelte b/src/components/hoverable-gallery.svelte
@@ -16,12 +16,12 @@
       { x: '0%', y: '55%', deg: 10, z: 1 }
     ],
     hover: [
-      { x: '-5%', y: '-5%', deg: -4, z: 1 },
+      { x: '-5%', y: '5%', deg: -4, z: 1 },
       { x: '0%', y: '0%', deg: -5, z: 1 },
       { x: '-15%', y: '5%', deg: 2, z: 1 },
       { x: '0%', y: '0%', deg: 5, z: 3 },
-      { x: '0%', y: '-5%', deg: 5, z: 2 },
-      { x: '10%', y: '5%', deg: 15, z: 1 }
+      { x: '0%', y: '5%', deg: 5, z: 2 },
+      { x: '10%', y: '3%', deg: 15, z: 1 }
     ]
   };
 </script>

diff --git a/src/components/pages/contact.svelte b/src/components/pages/contact.svelte
@@ -1,35 +1,14 @@
 <script lang="ts">
   import Seo from '$components/seo.svelte';
-  import type { ContactsPageStoryblok, PageStoryblok } from '$types/bloks';
-  import PanWithEggs from './contact/pan-with-eggs.svelte';
-  import Segg1 from './contact/illustrations/segg1.svelte';
-  import Segg2 from './contact/illustrations/segg2.svelte';
-  import ContactForm from '$components/contact-form.svelte';
+  import type { PageStoryblok } from '$types/bloks';
+
   import DynamicBlock from '$components/blocks/dynamic-block.svelte';
 
-  export let data: ContactsPageStoryblok;
   export let blocks: PageStoryblok['blocks'];
 </script>
 
 <Seo />
-<main class="overflow-hidden">
-  <div class="container relative mx-auto px-container">
-    <section class="pb-5 pt-10 lg:pb-12 lg:pt-20 lg:text-center">
-      <h1 class="mx-auto text-7xl text-foreground-secondary lg:max-w-xl">
-        {data.page_title1}
-      </h1>
-      <span class="mx-auto text-7xl lg:max-w-xl">{data.page_title2}</span>
-    </section>
-
-    <section class="mx-auto lg:max-w-xl lg:pt-5">
-      <ContactForm variant="contact" disclaimer={data.form_support_text} />
-    </section>
-
-    <PanWithEggs class="absolute -left-16 top-4 hidden -rotate-[14deg] drop-shadow-md lg:block" />
-    <Segg1 class="absolute -right-16 top-[207px] hidden -rotate-[16deg] drop-shadow-md lg:block" />
-    <Segg2 class="absolute -right-20 top-[440px] hidden -rotate-[16deg] drop-shadow-md lg:block" />
-  </div>
-
+<main>
   {#if blocks}
     {#each blocks as block}
       <DynamicBlock {block} />

diff --git a/src/components/pages/get-a-quote/budgetRange.ts b/src/components/pages/get-a-quote/budgetRange.ts
@@ -0,0 +1,8 @@
+export const budgetRange = [
+  '15.000€ to 50.000€',
+  '50.000€ to 100.000€',
+  '100.000€ to 200.000€',
+  '200.000€ to 300.000€',
+  '300.000€ to 400.000€',
+  '400.000€ and above'
+];
diff --git a/src/components/pages/get-a-quote/form.svelte b/src/components/pages/get-a-quote/form.svelte
@@ -7,6 +7,7 @@
   import { Confetti } from 'svelte-confetti';
   import { CONFETTI_COLOR_ARRAY } from '$lib/constants';
   import { truncateText } from '$lib/utils/strings';
+  import { budgetRange } from './budgetRange';
 
   type Eggs =
     | 'attach-multiple'
@@ -64,17 +65,17 @@
       character = 'attach';
     }
   } else if (lastChangedInput === 'budget') {
-    if (['15.000€ to 50.000€'].includes(budget)) {
+    if (budgetRange[0].includes(budget)) {
       character = 'budget10';
-    } else if (['50.000€ to 100.000€'].includes(budget)) {
+    } else if (budgetRange[1].includes(budget)) {
       character = 'budget25';
-    } else if (['100.000€ to 200.000€'].includes(budget)) {
+    } else if (budgetRange[2].includes(budget)) {
       character = 'budget25';
-    } else if (['200.000€ to 300.000€'].includes(budget)) {
+    } else if (budgetRange[3].includes(budget)) {
       character = 'budget50';
-    } else if (['300.000€ to 400.000€'].includes(budget)) {
+    } else if (budgetRange[4].includes(budget)) {
       character = 'budget50';
-    } else if (['400.000€ and above'].includes(budget)) {
+    } else if (budgetRange[5].includes(budget)) {
       character = 'budget100';
     }
   } else if (

diff --git a/src/components/pages/page.svelte b/src/components/pages/page.svelte
@@ -69,7 +69,7 @@
   {:else if page.component === 'careers-page' && isCareersPage(page)}
     <Careers blocks={story.content.blocks} />
   {:else if page.component === 'contacts-page' && isContactPage(page)}
-    <Contact data={page} blocks={story.content.blocks} />
+    <Contact blocks={story.content.blocks} />
   {:else if page.component === 'services-page' && isServicesPage(page)}
     <Services blocks={story.content.blocks} />
   {/if}

diff --git a/src/types/bloks.d.ts b/src/types/bloks.d.ts
@@ -734,6 +734,7 @@ export interface LandingPageStoryblok {
     | PhysicsStoryblok
     | PrefooterFormStoryblok
     | ProjectsStoryblok
+    | ProjectsTwoColumnsStoryblok
     | ServicesStoryblok
     | SlideshowStoryblok
     | SloganStoryblok
@@ -777,6 +778,14 @@ export interface ListStoryblok {
   [k: string]: any;
 }
 
+export interface MeasurementEntryStoryblok {
+  title?: string;
+  value?: string;
+  _uid: string;
+  component: 'measurement_entry';
+  [k: string]: any;
+}
+
 export interface NewtonStoryblok {
   title1?: string;
   title2?: string;
@@ -876,6 +885,7 @@ export interface PageStoryblok {
     | PhysicsStoryblok
     | PrefooterFormStoryblok
     | ProjectsStoryblok
+    | ProjectsTwoColumnsStoryblok
     | ServicesStoryblok
     | SlideshowStoryblok
     | SloganStoryblok
@@ -981,6 +991,15 @@ export interface ProjectStoryblok {
   [k: string]: any;
 }
 
+export interface ProjectDetailedEntryStoryblok {
+  project?: StoryblokStory<ProjectStoryblok> | string;
+  measurements?: MeasurementEntryStoryblok[];
+  testimonial?: RichtextTestimonialStoryblok[];
+  _uid: string;
+  component: 'project-detailed-entry';
+  [k: string]: any;
+}
+
 export interface ProjectsStoryblok {
   work_title?: string;
   projects?: (StoryblokStory<ProjectStoryblok> | string)[];
@@ -995,6 +1014,14 @@ export interface ProjectsIndexStoryblok {
   [k: string]: any;
 }
 
+export interface ProjectsTwoColumnsStoryblok {
+  project?: ProjectDetailedEntryStoryblok[];
+  note?: string;
+  _uid: string;
+  component: 'projects-two-columns';
+  [k: string]: any;
+}
+
 export interface ProposalStoryblok {
   password: string;
   client: string;