feat: account payment page

src/lib/actions/analytics.ts

@@ -212,5 +212,11 @@ export enum Submit {
     FileDelete = 'submit_file_delete',
     FileUpdatePermissions = 'submit_file_update_permissions',
     BudgetCapUpdate = 'submit_budget_cap_update',
-    CouponRedeemed = 'submit_coupon_redeemed'
+    CouponRedeemed = 'submit_coupon_redeemed',
+    PaymentMethodCreated = 'submit_payment_method_created',
+    PaymentMethodUpdated = 'submit_payment_method_updated',
+    PaymentMethodDeleted = 'submit_payment_method_deleted',
+    BillingAddressDeleted = 'submit_billing_address_deleted',
+    BillingAddressCreated = 'submit_billing_address_created',
+    BillingAddressUpdated = 'submit_billing_address_updated'
 }

src/routes/console/account/payments/deleteAddress.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    // import { sdk } from '$lib/stores/sdk';
+
+    export let showDelete = false;
+    export let selectedAddress: string;
+
+    async function handleDelete() {
+        try {
+            // await sdk.forConsole.billing.deletePaymentMethod(selectedAddress);
+            await invalidate(Dependencies.PAYMENT_METHODS);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `Address has been deleted`
+            });
+            trackEvent(Submit.BillingAddressDeleted);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.BillingAddressDeleted);
+        }
+    }
+</script>
+
+<Modal
+    bind:show={showDelete}
+    onSubmit={handleDelete}
+    icon="exclamation"
+    state="warning"
+    headerDivider={false}>
+    <svelte:fragment slot="header">Delete billing address</svelte:fragment>
+    <p class="text">Are you sure you want to delete this billing address from your account?</p>
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>

src/routes/console/account/payments/deletePayment.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+
+    export let showDelete = false;
+    export let method: string;
+
+    async function handleDelete() {
+        try {
+            await sdk.forConsole.billing.deletePaymentMethod(method);
+            await invalidate(Dependencies.PAYMENT_METHODS);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `Payment method has been deleted`
+            });
+            trackEvent(Submit.PaymentMethodDeleted);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.PaymentMethodDeleted);
+        }
+    }
+</script>
+
+<Modal
+    bind:show={showDelete}
+    onSubmit={handleDelete}
+    icon="exclamation"
+    state="warning"
+    headerDivider={false}>
+    <svelte:fragment slot="header">Delete payment method</svelte:fragment>
+    <p class="text">Are you sure you want to delete this payment method from your account?</p>
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>

src/routes/console/account/payments/paymentMethods.svelte

@@ -10,10 +10,13 @@
         TableHeader,
         TableRow
     } from '$lib/elements/table';
+    import DeletePayment from './deletePayment.svelte';
     import { paymentMethods } from './store';
 
     export let showPayment = false;
     let showDropdown = [];
+    let selectedMethod: string;
+    let showDelete = false;
 
     console.log($paymentMethods);
 </script>
@@ -81,7 +84,9 @@
                                         <DropListItem
                                             icon="trash"
                                             on:click={() => {
-                                                console.log('test');
+                                                selectedMethod = paymentMethod.$id;
+                                                showDelete = true;
+                                                showDropdown[i] = false;
                                             }}>
                                             Delete
                                         </DropListItem>
@@ -103,3 +108,7 @@
         {/if}
     </svelte:fragment>
 </CardGrid>
+
+{#if selectedMethod}
+    <DeletePayment method={selectedMethod} bind:showDelete />
+{/if}