Feat: State selector US

Author: lohanidamodar

src/lib/components/billing/paymentModal.svelte

@@ -2,12 +2,14 @@
     import { FakeModal } from '$lib/components';
     import { InputText, Button } from '$lib/elements/forms';
     import { createEventDispatcher, onMount } from 'svelte';
-    import { initializeStripe, submitStripeCard } from '$lib/stores/stripe';
+    import { initializeStripe, setPaymentMethod, submitStripeCard } from '$lib/stores/stripe';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
     import { page } from '$app/state';
     import { Spinner } from '@appwrite.io/pink-svelte';
+    import type { PaymentMethod } from '@stripe/stripe-js';
+    import StatePicker from './statePicker.svelte';
 
     export let show = false;
 
@@ -16,10 +18,36 @@
     let name: string;
     let error: string;
     let modal: FakeModal;
+    let showState: boolean = false;
+    let state: string = '';
+    let paymentMethod: PaymentMethod | null = null;
 
     async function handleSubmit() {
         try {
+            if (showState && !state) {
+                throw Error('Please select a state');
+            }
+
+            if (showState) {
+                const card = await setPaymentMethod(paymentMethod.id, name, state);
+                modal.closeModal();
+                await invalidate(Dependencies.PAYMENT_METHODS);
+                dispatch('submit', card);
+                addNotification({
+                    type: 'success',
+                    message: 'A new payment method has been added to your account'
+                });
+                return;
+            }
+
             const card = await submitStripeCard(name, page?.params?.organization ?? null);
+            if (card && typeof card !== 'string') {
+                if ((card as PaymentMethod).card.country === 'US') {
+                    paymentMethod = card as PaymentMethod;
+                    showState = true;
+                    return;
+                }
+            }
             modal.closeModal();
             await invalidate(Dependencies.PAYMENT_METHODS);
             dispatch('submit', card);
@@ -87,13 +115,19 @@
                 <Spinner />
             </div>
         {/if}
-
-        <div
-            style:display={isLoading ? 'none' : 'initial'}
-            class="stripe-element"
-            bind:this={element}>
-            <!-- Stripe will create form elements here -->
-        </div>
+        {#if showState}
+            <div class="state-element">
+                <!-- input select for state picker -->
+                <StatePicker card={paymentMethod} bind:state />
+            </div>
+        {:else}
+            <div
+                style:display={isLoading ? 'none' : 'initial'}
+                class="stripe-element"
+                bind:this={element}>
+                <!-- Stripe will create form elements here -->
+            </div>
+        {/if}
     </div>
     <slot name="end"></slot>
     <svelte:fragment slot="footer">
@@ -107,6 +141,14 @@
         display: flex;
         min-height: 245px;
 
+        .state-element {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
         .stripe-element {
             width: 100%;
         }

src/lib/components/billing/statePicker.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { states } from './states.js';
+    import { InputSelect } from '$lib/elements/forms';
+    import type { PaymentMethod } from '@stripe/stripe-js';
+    import Card from '../card.svelte';
+    import { Alert, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { CreditCardBrandImage } from '../index.js';
+
+    export let state: string = '';
+    export let card: PaymentMethod | null = null;
+</script>
+
+{#if card}
+    <Card>
+        <Layout.Stack direction="row" alignItems="center" gap="s">
+            <CreditCardBrandImage brand={card.card?.brand} />
+            <span>ending in {card.card?.last4}</span>
+        </Layout.Stack>
+        <Typography.Text size="s">
+            {card.card.country}
+            {card.billing_details.address.postal_code}
+        </Typography.Text>
+    </Card>
+{/if}
+
+<Alert.Inline status="info" title="State is required for US payment methods">
+    <Typography.Text size="s">
+        To complete the billing information, select your state so we can apply the correct taxes and
+        meet U.S. legal requirements.
+    </Typography.Text>
+</Alert.Inline>
+
+<InputSelect
+    bind:value={state}
+    label="State"
+    placeholder="Select a state"
+    id="state-picker"
+    options={states.map((state) => ({
+        label: state.name,
+        value: state.abbreviation,
+        id: state.abbreviation.toLowerCase()
+    }))} />

src/lib/components/billing/states.js

@@ -0,0 +1,238 @@
+export const states = [
+    {
+        "name": "Alabama",
+        "abbreviation": "AL"
+    },
+    {
+        "name": "Alaska",
+        "abbreviation": "AK"
+    },
+    {
+        "name": "American Samoa",
+        "abbreviation": "AS"
+    },
+    {
+        "name": "Arizona",
+        "abbreviation": "AZ"
+    },
+    {
+        "name": "Arkansas",
+        "abbreviation": "AR"
+    },
+    {
+        "name": "California",
+        "abbreviation": "CA"
+    },
+    {
+        "name": "Colorado",
+        "abbreviation": "CO"
+    },
+    {
+        "name": "Connecticut",
+        "abbreviation": "CT"
+    },
+    {
+        "name": "Delaware",
+        "abbreviation": "DE"
+    },
+    {
+        "name": "District Of Columbia",
+        "abbreviation": "DC"
+    },
+    {
+        "name": "Federated States Of Micronesia",
+        "abbreviation": "FM"
+    },
+    {
+        "name": "Florida",
+        "abbreviation": "FL"
+    },
+    {
+        "name": "Georgia",
+        "abbreviation": "GA"
+    },
+    {
+        "name": "Guam",
+        "abbreviation": "GU"
+    },
+    {
+        "name": "Hawaii",
+        "abbreviation": "HI"
+    },
+    {
+        "name": "Idaho",
+        "abbreviation": "ID"
+    },
+    {
+        "name": "Illinois",
+        "abbreviation": "IL"
+    },
+    {
+        "name": "Indiana",
+        "abbreviation": "IN"
+    },
+    {
+        "name": "Iowa",
+        "abbreviation": "IA"
+    },
+    {
+        "name": "Kansas",
+        "abbreviation": "KS"
+    },
+    {
+        "name": "Kentucky",
+        "abbreviation": "KY"
+    },
+    {
+        "name": "Louisiana",
+        "abbreviation": "LA"
+    },
+    {
+        "name": "Maine",
+        "abbreviation": "ME"
+    },
+    {
+        "name": "Marshall Islands",
+        "abbreviation": "MH"
+    },
+    {
+        "name": "Maryland",
+        "abbreviation": "MD"
+    },
+    {
+        "name": "Massachusetts",
+        "abbreviation": "MA"
+    },
+    {
+        "name": "Michigan",
+        "abbreviation": "MI"
+    },
+    {
+        "name": "Minnesota",
+        "abbreviation": "MN"
+    },
+    {
+        "name": "Mississippi",
+        "abbreviation": "MS"
+    },
+    {
+        "name": "Missouri",
+        "abbreviation": "MO"
+    },
+    {
+        "name": "Montana",
+        "abbreviation": "MT"
+    },
+    {
+        "name": "Nebraska",
+        "abbreviation": "NE"
+    },
+    {
+        "name": "Nevada",
+        "abbreviation": "NV"
+    },
+    {
+        "name": "New Hampshire",
+        "abbreviation": "NH"
+    },
+    {
+        "name": "New Jersey",
+        "abbreviation": "NJ"
+    },
+    {
+        "name": "New Mexico",
+        "abbreviation": "NM"
+    },
+    {
+        "name": "New York",
+        "abbreviation": "NY"
+    },
+    {
+        "name": "North Carolina",
+        "abbreviation": "NC"
+    },
+    {
+        "name": "North Dakota",
+        "abbreviation": "ND"
+    },
+    {
+        "name": "Northern Mariana Islands",
+        "abbreviation": "MP"
+    },
+    {
+        "name": "Ohio",
+        "abbreviation": "OH"
+    },
+    {
+        "name": "Oklahoma",
+        "abbreviation": "OK"
+    },
+    {
+        "name": "Oregon",
+        "abbreviation": "OR"
+    },
+    {
+        "name": "Palau",
+        "abbreviation": "PW"
+    },
+    {
+        "name": "Pennsylvania",
+        "abbreviation": "PA"
+    },
+    {
+        "name": "Puerto Rico",
+        "abbreviation": "PR"
+    },
+    {
+        "name": "Rhode Island",
+        "abbreviation": "RI"
+    },
+    {
+        "name": "South Carolina",
+        "abbreviation": "SC"
+    },
+    {
+        "name": "South Dakota",
+        "abbreviation": "SD"
+    },
+    {
+        "name": "Tennessee",
+        "abbreviation": "TN"
+    },
+    {
+        "name": "Texas",
+        "abbreviation": "TX"
+    },
+    {
+        "name": "Utah",
+        "abbreviation": "UT"
+    },
+    {
+        "name": "Vermont",
+        "abbreviation": "VT"
+    },
+    {
+        "name": "Virgin Islands",
+        "abbreviation": "VI"
+    },
+    {
+        "name": "Virginia",
+        "abbreviation": "VA"
+    },
+    {
+        "name": "Washington",
+        "abbreviation": "WA"
+    },
+    {
+        "name": "West Virginia",
+        "abbreviation": "WV"
+    },
+    {
+        "name": "Wisconsin",
+        "abbreviation": "WI"
+    },
+    {
+        "name": "Wyoming",
+        "abbreviation": "WY"
+    }
+];