Merge branch 'main' into fix-PRO-1094-alignment-fixes

# Conflicts: # src/routes/(console)/account/payments/paymentMethods.svelte
appwrite · Oct 1, 2024 · 4b5123e · 4b5123e
2 parents 0a8da7d + b1a0f38
commit 4b5123e
Show file tree

Hide file tree

Showing 32 changed files with 502 additions and 99 deletions.
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
@@ -321,5 +321,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'
 }
diff --git a/src/lib/components/bottomModalAlert.svelte b/src/lib/components/bottomModalAlert.svelte
@@ -52,7 +52,7 @@
     function handleClose() {
         const modalAlert = currentModalAlert;
         dismissBottomModalAlert(modalAlert.id);
-        hideNotification(modalAlert.id);
+        hideNotification(modalAlert.id, { coolOffPeriod: 24 * 365 });
         if (modalAlert.closed) modalAlert.closed();
 
         if (currentIndex === filteredModalAlerts.length - 1 && filteredModalAlerts.length > 1) {

diff --git a/src/lib/components/progressBarBig.svelte b/src/lib/components/progressBarBig.svelte
@@ -26,7 +26,7 @@
 
             <p class="body-text-2">
                 {maxValue}
-                {maxUnit && maxUnit}
+                {maxUnit ? maxUnit : ''}
             </p>
         </div>
     {/if}

diff --git a/src/lib/helpers/sizeConvertion.ts b/src/lib/helpers/sizeConvertion.ts
@@ -14,6 +14,7 @@ export function calculateSize(bytes: number, decimals = 1, base: 1000 | 1024 = 1
 }
 
 export function sizeToBytes(value: number, unit: Size, base = 1000) {
+    if (typeof value !== 'number') return 0;
     const index = sizes.indexOf(unit);
     return value * Math.pow(base, index);
 }

diff --git a/src/lib/helpers/unit.ts b/src/lib/helpers/unit.ts
@@ -70,7 +70,7 @@ export function createTimeUnitPair(initialValue = 0) {
         { name: 'Minutes', value: 60 },
         { name: 'Seconds', value: 1 }
     ];
-    return { ...createValueUnitPair(initialValue, units), units };
+    return { ...createValueUnitPair(initialValue || 0, units), units };
 }
 
 export function createByteUnitPair(initialValue = 0, base: 1000 | 1024 = 1000) {

diff --git a/src/routes/(console)/account/payments/+page.ts b/src/routes/(console)/account/payments/+page.ts
@@ -10,7 +10,6 @@ export const load: PageLoad = async ({ depends }) => {
         sdk.forConsole.billing.listPaymentMethods(),
         sdk.forConsole.billing.listAddresses()
     ]);
-
     return {
         paymentMethods,
         addressList

diff --git a/src/routes/(console)/account/payments/billingAddress.svelte b/src/routes/(console)/account/payments/billingAddress.svelte
@@ -18,7 +18,6 @@
     import EditAddressModal from './editAddressModal.svelte';
     import type { Address } from '$lib/sdk/billing';
     import { organizationList, type Organization } from '$lib/stores/organization';
-    import { tooltip } from '$lib/actions/tooltip';
     import { base } from '$app/paths';
     import { Pill } from '$lib/elements';
 
@@ -29,6 +28,7 @@
     let showDelete = false;
     let showDropdown = [];
     let countryList: Models.CountryList;
+    let showLinked = [];
 
     onMount(async () => {
         countryList = await sdk.forProject.locale.listCountries();
@@ -76,26 +76,28 @@
                             </TableCell>
                             <TableCell style="vertical-align: top;">
                                 {#if linkedOrgs?.length > 0}
-                                    <div
-                                        use:tooltip={{
-                                            interactive: true,
-                                            allowHTML: true,
-                                            trigger: 'click',
-                                            content: `
-                                    <div class="u-flex u-flex-vertical u-gap-8">
-                                        <p class="text">This billing address is linked to the following organizations:</p>
-                                        ${linkedOrgs
-                                            .map(
-                                                (org) =>
-                                                    `<a href="${base}/organization-${org.$id}/billing" class="link">${org.name}</a>`
-                                            )
-                                            .join('')}
-                                                </div>`
-                                        }}>
-                                        <Pill button>
+                                    <DropList bind:show={showLinked[i]} width="20" scrollable>
+                                        <Pill
+                                            button
+                                            on:click={() => (showLinked[i] = !showLinked[i])}>
                                             <span class="icon-info" /> linked to organization
                                         </Pill>
-                                    </div>
+                                        <svelte:fragment slot="list">
+                                            <p class="u-break-word">
+                                                This billing address is linked to the following
+                                                organizations:
+                                            </p>
+                                            <div class="u-flex u-flex-vertical u-gap-4">
+                                                {#each linkedOrgs as org}
+                                                    <a
+                                                        class="u-underline u-trim"
+                                                        href={`${base}/console/organization-${org.$id}/billing`}>
+                                                        {org.name}
+                                                    </a>
+                                                {/each}
+                                            </div>
+                                        </svelte:fragment>
+                                    </DropList>
                                 {/if}
                             </TableCell>
                             <TableCell style="vertical-align: top;">

diff --git a/src/routes/(console)/account/payments/paymentMethods.svelte b/src/routes/(console)/account/payments/paymentMethods.svelte
@@ -20,7 +20,6 @@
     import { paymentMethods } from '$lib/stores/billing';
     import type { PaymentMethodData } from '$lib/sdk/billing';
     import { organizationList, type Organization } from '$lib/stores/organization';
-    import { tooltip } from '$lib/actions/tooltip';
     import { base } from '$app/paths';
     import EditPaymentModal from './editPaymentModal.svelte';
     import DeletePaymentModal from './deletePaymentModal.svelte';
@@ -34,6 +33,7 @@
     let showDelete = false;
     let showEdit = false;
     let isLinked = false;
+    let showLinked = [];
 
     $: orgList = $organizationList.teams as unknown as Organization[];
 
@@ -68,27 +68,34 @@
                                 <CreditCardInfo {paymentMethod}>
                                     <div class="u-flex u-gap-16 u-cross-center">
                                         {#if linkedOrgs?.length > 0}
-                                            <div
-                                                use:tooltip={{
-                                                    interactive: true,
-                                                    allowHTML: true,
-                                                    trigger: 'click',
-                                                    content: `
-                                                        <div class="u-flex u-flex-vertical u-gap-4">
-                                                            <p class="text">This payment method is linked to the following organizations:</p>
-                                                            ${linkedOrgs
-                                                                .map(
-                                                                    (org) =>
-                                                                        `<a href="${base}/organization-${org.$id}/billing" class="link">${org.name}</a>`
-                                                                )
-                                                                .join('')}
-                                                        </div>`
-                                                }}>
-                                                <Pill button>
+                                            <DropList
+                                                bind:show={showLinked[i]}
+                                                width="20"
+                                                scrollable>
+                                                <Pill
+                                                    button
+                                                    on:click={() =>
+                                                        (showLinked[i] = !showLinked[i])}>
                                                     <span class="icon-info" /> linked to organization
                                                 </Pill>
-                                            </div>
+                                                <svelte:fragment slot="list">
+                                                    <p class="u-break-word">
+                                                        This payment method is linked to the
+                                                        following organizations:
+                                                    </p>
+                                                    <div class="u-flex u-flex-vertical u-gap-4">
+                                                        {#each linkedOrgs as org}
+                                                            <a
+                                                                class="u-underline u-trim"
+                                                                href={`${base}/console/organization-${org.$id}/billing`}>
+                                                                {org.name}
+                                                            </a>
+                                                        {/each}
+                                                    </div>
+                                                </svelte:fragment>
+                                            </DropList>
                                         {/if}
+
                                         <DropList
                                             bind:show={showDropdown[i]}
                                             placement="bottom-start"

diff --git a/src/routes/(console)/organization-[organization]/billing/billingAddress.svelte b/src/routes/(console)/organization-[organization]/billing/billingAddress.svelte
@@ -10,6 +10,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
+    import RemoveAddress from './removeAddress.svelte';
     import { user } from '$lib/stores/user';
     import AddressModal from '$routes/(console)/account/payments/addressModal.svelte';
     import EditAddressModal from '$routes/(console)/account/payments/editAddressModal.svelte';
@@ -22,6 +23,7 @@
     let showCreate = false;
     let showEdit = false;
     let showReplace = false;
+    let showRemove = false;
 
     async function addAddress(addressId: string) {
         try {
@@ -100,6 +102,14 @@
                                 }}>
                                 Replace
                             </DropListItem>
+                            <DropListItem
+                                icon="trash"
+                                on:click={() => {
+                                    showRemove = true;
+                                    showBillingAddressDropdown = false;
+                                }}>
+                                Remove
+                            </DropListItem>
                         </svelte:fragment>
                     </DropList>
                 </div>
@@ -166,3 +176,6 @@
 {#if showReplace}
     <ReplaceAddress bind:show={showReplace} />
 {/if}
+{#if showRemove}
+    <RemoveAddress bind:show={showRemove} />
+{/if}
diff --git a/src/routes/(console)/organization-[organization]/billing/deleteOrgPayment.svelte b/src/routes/(console)/organization-[organization]/billing/deleteOrgPayment.svelte
@@ -6,17 +6,17 @@
     import { sdk } from '$lib/stores/sdk';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { organization } from '$lib/stores/organization';
-    import { Dependencies } from '$lib/constants';
+    import { BillingPlan, Dependencies } from '$lib/constants';
 
     export let showDelete = false;
     export let isBackup = false;
     export let disabled = false;
+    export let hasOtherMethod = false;
 
     let error: string;
 
     async function removeDefaultMethod() {
-        if (!$organization.paymentMethodId || !$organization.backupPaymentMethodId) return;
-        showDelete = false;
+        if ($organization?.billingPlan !== BillingPlan.FREE && !hasOtherMethod) return;
 
         try {
             await sdk.forConsole.billing.removeOrganizationPaymentMethod($organization.$id);
@@ -26,13 +26,16 @@
             });
             trackEvent(Submit.OrganizationPaymentDelete);
             invalidate(Dependencies.ORGANIZATION);
+            showDelete = false;
         } catch (e) {
             error = e.message;
             trackError(e, Submit.OrganizationPaymentDelete);
+        } finally {
+            showDelete = false;
         }
     }
     async function removeBackuptMethod() {
-        if (!$organization.paymentMethodId || !$organization.backupPaymentMethodId) return;
+        if ($organization?.billingPlan !== BillingPlan.FREE && !hasOtherMethod) return;
         showDelete = false;
 
         try {
@@ -43,6 +46,7 @@
             });
             trackEvent(Submit.OrganizationBackupPaymentDelete);
             invalidate(Dependencies.ORGANIZATION);
+            showDelete = false;
         } catch (e) {
             error = e.message;
             trackError(e, Submit.OrganizationBackupPaymentDelete);

diff --git a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
@@ -10,7 +10,7 @@
         DropListItem,
         Heading
     } from '$lib/components';
-    import { Dependencies } from '$lib/constants';
+    import { BillingPlan, Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
     import { organization } from '$lib/stores/organization';
     import { Button } from '$lib/elements/forms';
@@ -325,10 +325,12 @@
     <ReplaceCard bind:show={showReplace} isBackup={isSelectedBackup} />
 {/if}
 {#if showDelete && isCloud && hasStripePublicKey}
+    {@const hasOtherMethod = isSelectedBackup
+        ? !!$organization?.paymentMethodId
+        : !!$organization?.backupPaymentMethodId}
     <DeleteOrgPayment
         bind:showDelete
+        {hasOtherMethod}
         isBackup={isSelectedBackup}
-        disabled={isSelectedBackup
-            ? !$organization?.paymentMethodId
-            : !$organization?.backupPaymentMethodId} />
+        disabled={$organization?.billingPlan !== BillingPlan.FREE && !hasOtherMethod} />
 {/if}
diff --git a/src/routes/(console)/organization-[organization]/billing/removeAddress.svelte b/src/routes/(console)/organization-[organization]/billing/removeAddress.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { organization } from '$lib/stores/organization';
+    import { Dependencies } from '$lib/constants';
+
+    export let show = false;
+
+    let error: string;
+
+    async function removeAddress() {
+        try {
+            await sdk.forConsole.billing.removeBillingAddress($organization.$id);
+            addNotification({
+                type: 'success',
+                message: `The billing address has been removed from ${$organization.name}`
+            });
+            trackEvent(Submit.OrganizationBillingAddressDelete);
+            invalidate(Dependencies.ORGANIZATION);
+            show = false;
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.OrganizationBillingAddressDelete);
+        }
+    }
+</script>
+
+<Modal
+    bind:show
+    bind:error
+    onSubmit={removeAddress}
+    icon="exclamation"
+    state="warning"
+    headerDivider={false}
+    title="Remove billing address">
+    <p data-private>
+        Are you sure you want to remove the billing address from <b>{$organization?.name}</b>?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary submit>Remove</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/(console)/organization-[organization]/settings/+page.svelte b/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>

diff --git a/src/routes/(console)/organization-[organization]/settings/BAA.svelte b/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 />