feat: BAA and Soc-2

src/lib/actions/analytics.ts

@@ -320,5 +320,7 @@ export enum Submit {
     MessagingTopicUpdatePermissions = 'submit_messaging_topic_update_permissions',
     MessagingTopicSubscriberAdd = 'submit_messaging_topic_subscriber_add',
     MessagingTopicSubscriberDelete = 'submit_messaging_topic_subscriber_delete',
-    ApplyQuickFilter = 'submit_apply_quick_filter'
+    ApplyQuickFilter = 'submit_apply_quick_filter',
+    RequestBAA = 'submit_request_baa',
+    RequestSoc2 = 'submit_request_soc2'
 }

src/routes/(console)/organization-[organization]/settings/+page.svelte

@@ -12,6 +12,8 @@
     import DownloadDPA from './downloadDPA.svelte';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { isCloud } from '$lib/system';
+    import Baa from './BAA.svelte';
+    import Soc2 from './Soc2.svelte';
 
     export let data;
     let name: string;
@@ -67,6 +69,8 @@
 
         {#if isCloud}
             <DownloadDPA />
+            <Baa />
+            <Soc2 />
         {/if}
 
         <CardGrid danger>

src/routes/(console)/organization-[organization]/settings/BAA.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { Box, CardGrid, Heading } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import BaaModal from './BAAModal.svelte';
+
+    let show = false;
+</script>
+
+<CardGrid>
+    <div>
+        <Heading tag="h6" size="7">BAA</Heading>
+    </div>
+    <p class="text">After requesting a BAA, we will contact you via email for the next steps.</p>
+    <svelte:fragment slot="aside">
+        <Box>
+            <h6>
+                <b>Business Associate Agreement (BAA)</b>
+            </h6>
+            <p class="text u-margin-block-start-8">
+                A Business Associate Agreement (BAA) is a HIPAA-required document ensuring outside
+                services handling patient information for a healthcare organization follow privacy
+                rules.
+            </p>
+            <Button
+                secondary
+                external
+                class="u-margin-block-start-16"
+                on:click={() => (show = true)}
+                event="request_baa">
+                <span class="text">Request BAA</span>
+            </Button>
+        </Box>
+    </svelte:fragment>
+</CardGrid>
+
+<BaaModal bind:show />

src/routes/(console)/organization-[organization]/settings/BAAModal.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Modal } from '$lib/components';
+    import { Button, FormList, InputEmail, InputSelect, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { organization } from '$lib/stores/organization';
+    import { sdk } from '$lib/stores/sdk';
+    import { user } from '$lib/stores/user';
+    import { VARS } from '$lib/system';
+    import { onMount } from 'svelte';
+    export let show = false;
+    let email = '';
+    let employees: string = null;
+    let employeesOptions = [
+        {
+            value: '1-5',
+            label: '1-5'
+        },
+        {
+            value: '6-10',
+            label: '6-10'
+        },
+        {
+            value: '11-50',
+            label: '11-50'
+        },
+        {
+            value: '50+',
+            label: '50+'
+        }
+    ];
+
+    let country = '';
+    let countryOptions = [];
+
+    let role = '';
+
+    let error: string;
+
+    onMount(async () => {
+        const countryList = await sdk.forProject.locale.listCountries();
+        const locale = await sdk.forProject.locale.get();
+        if (locale.countryCode) {
+            country = locale.countryCode;
+        }
+        countryOptions = countryList.countries.map((country) => {
+            return {
+                value: country.code,
+                label: country.name
+            };
+        });
+        email = $user.email;
+    });
+
+    async function handleSubmit() {
+        const response = await fetch(`${VARS.GROWTH_ENDPOINT}/support`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                subject: 'support',
+                email: email,
+                firstName: $user?.name ?? '',
+                message: 'BAA',
+                tags: ['cloud'],
+                customFields: [
+                    { id: '41612', value: 'BAA' },
+                    { id: '48493', value: $user?.name ?? '' },
+                    { id: '48492', value: $organization?.$id ?? '' },
+                    { id: '48490', value: $user?.$id ?? '' }
+                ],
+                metaFields: {
+                    employees: employees,
+                    country: country,
+                    role: role
+                }
+            })
+        });
+        trackEvent(Submit.RequestBAA);
+        if (response.status !== 200) {
+            trackError(new Error(response.status.toString()), Submit.RequestBAA);
+            error = 'There was an error submitting your request. Please try again later.';
+        } else {
+            show = false;
+            addNotification({
+                message: `Your request was sent, we will get in contact with you at ${email} in a few working days`,
+                type: 'success'
+            });
+        }
+    }
+</script>
+
+<Modal
+    bind:error
+    bind:show
+    onSubmit={handleSubmit}
+    size="big"
+    title="Request BAA"
+    headerDivider={false}>
+    <FormList>
+        <InputEmail label="Email" placeholder="Enter email" id="email" bind:value={email} />
+        <InputSelect
+            label="Number of employees"
+            id="employees"
+            placeholder="Select number of employees"
+            required
+            options={employeesOptions}
+            bind:value={employees} />
+        <!-- <InputText label="Company name" placeholder="Enter company name" id="company" /> -->
+        <InputSelect
+            label="Country"
+            id="country"
+            options={countryOptions}
+            placeholder="Select country"
+            required
+            bind:value={country} />
+        <InputText
+            label="Your role"
+            placeholder="Enter your role"
+            id="role"
+            bind:value={role}
+            required />
+        <InputText label="Website" placeholder="Enter website" id="website" />
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button submit>
+            <span class="text">Send request</span>
+        </Button>
+    </svelte:fragment>
+</Modal>

src/routes/(console)/organization-[organization]/settings/Soc2.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { Box, CardGrid, Heading } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import Soc2Modal from './Soc2Modal.svelte';
+
+    let show = false;
+</script>
+
+<CardGrid>
+    <div>
+        <Heading tag="h6" size="7">Soc-2</Heading>
+    </div>
+    <p class="text">After requesting Soc-2, we will contact you via email for the next steps.</p>
+    <svelte:fragment slot="aside">
+        <Box>
+            <h6>
+                <b>Service Organization Control Type 2 (Soc-2)</b>
+            </h6>
+            <p class="text u-margin-block-start-8">
+                Soc-2 is a framework for managing and protecting sensitive information, ensuring
+                compliance with trust service criteria such as security, availability, processing
+                integrity, confidentiality, and privacy.
+            </p>
+            <Button
+                secondary
+                external
+                class="u-margin-block-start-16"
+                on:click={() => (show = true)}
+                event="request_soc-2">
+                <span class="text">Request Soc-2</span>
+            </Button>
+        </Box>
+    </svelte:fragment>
+</CardGrid>
+
+<Soc2Modal bind:show />

src/routes/(console)/organization-[organization]/settings/Soc2Modal.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Modal } from '$lib/components';
+    import { FormList, InputEmail, InputSelect, InputText } from '$lib/elements/forms';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { organization } from '$lib/stores/organization';
+    import { sdk } from '$lib/stores/sdk';
+    import { user } from '$lib/stores/user';
+    import { VARS } from '$lib/system';
+    import { onMount } from 'svelte';
+    export let show = false;
+    let email = '';
+    let employees: string = null;
+    let employeesOptions = [
+        {
+            value: '1-5',
+            label: '1-5'
+        },
+        {
+            value: '6-10',
+            label: '6-10'
+        },
+        {
+            value: '11-50',
+            label: '11-50'
+        },
+        {
+            value: '50+',
+            label: '50+'
+        }
+    ];
+
+    let country = '';
+    let countryOptions = [];
+
+    let role = '';
+
+    let error: string;
+
+    onMount(async () => {
+        const countryList = await sdk.forProject.locale.listCountries();
+        const locale = await sdk.forProject.locale.get();
+        if (locale.countryCode) {
+            country = locale.countryCode;
+        }
+        countryOptions = countryList.countries.map((country) => {
+            return {
+                value: country.code,
+                label: country.name
+            };
+        });
+        email = $user.email;
+    });
+
+    async function handleSubmit() {
+        const response = await fetch(`${VARS.GROWTH_ENDPOINT}/support`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                subject: 'support',
+                email: email,
+                firstName: $user?.name ?? '',
+                message: 'Soc-2',
+                tags: ['cloud'],
+                customFields: [
+                    { id: '41612', value: 'Soc-2' },
+                    { id: '48493', value: $user?.name ?? '' },
+                    { id: '48492', value: $organization?.$id ?? '' },
+                    { id: '48490', value: $user?.$id ?? '' }
+                ],
+                metaFields: {
+                    employees: employees,
+                    country: country,
+                    role: role
+                }
+            })
+        });
+        trackEvent(Submit.RequestSoc2);
+        if (response.status !== 200) {
+            trackError(new Error(response.status.toString()), Submit.RequestSoc2);
+            error = 'There was an error submitting your request. Please try again later.';
+        } else {
+            show = false;
+
+            addNotification({
+                message: `Your request was sent, we will get in contact with you at ${email} in a few working days`,
+                type: 'success'
+            });
+        }
+    }
+</script>
+
+<Modal
+    bind:error
+    bind:show
+    onSubmit={handleSubmit}
+    size="big"
+    headerDivider={false}
+    title="Request Soc-2">
+    <FormList>
+        <InputEmail label="Email" placeholder="Enter email" id="email" bind:value={email} />
+        <InputSelect
+            label="Number of employees"
+            id="employees"
+            placeholder="Select number of employees"
+            required
+            options={employeesOptions}
+            bind:value={employees} />
+        <!-- <InputText label="Company name" placeholder="Enter company name" id="company" /> -->
+        <InputSelect
+            label="Country"
+            id="country"
+            options={countryOptions}
+            placeholder="Select country"
+            required
+            bind:value={country} />
+        <InputText
+            label="Your role"
+            placeholder="Enter your role"
+            id="role"
+            bind:value={role}
+            required />
+        <InputText label="Website" placeholder="Enter website" id="website" />
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button submit>
+            <span class="text">Send request</span>
+        </Button>
+    </svelte:fragment>
+</Modal>