clients: Don't filter countries in checkout by Stripe Connect

clients/apps/web/src/components/Accounts/AccountCreateModal.tsx

@@ -178,7 +178,7 @@ const AccountCreateModal = ({
             )}
 
             <div>
-              <CountryPicker onChange={onChangeCountry} value={country} />
+              <CountryPicker onChange={onChangeCountry} value={country} stripeConnectOnly={true} />
               <p className="dark:text-polar-500 mt-2 text-justify text-xs text-gray-500">
                 If this is a personal account, please select your country of
                 residence. If this is an organization or business, select the

clients/apps/web/src/utils/config.ts

@@ -15,7 +15,7 @@ const stringToNumber = (
  * document.querySelectorAll('.PressableContext').forEach((d) => { if (d.checked && d.name !== '') { whitelist.push(d.name) } })
  * whitelist.join(',')
  *
- * All countries supported by Stripe except Gibraltar (transfers not supported)
+ * All countries supported by Stripe Connect Express except Gibraltar (transfers not supported)
  *
  */
 const STRIPE_COUNTRIES =

clients/packages/polarkit/src/components/ui/atoms/CountryPicker.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { CONFIG } from '@/utils/config'
-import { getCountryData, getEmojiFlag, TCountryCode } from 'countries-list'
+import { countries, getCountryData, getEmojiFlag, TCountryCode } from 'countries-list'
 
 import {
   Select,
@@ -11,32 +11,53 @@ import {
   SelectValue,
 } from 'polarkit/components/ui/atoms/select'
 
-const countryWhiteList = CONFIG.STRIPE_COUNTRIES_WHITELIST_CSV.split(
-  ',',
-) as TCountryCode[]
+const getCountryList = (codes: TCountryCode[]) => {
+  return codes.map((countryCode) => ({
+    code: countryCode,
+    country: getCountryData(countryCode),
+    emoji: getEmojiFlag(countryCode),
+  })).sort((a, b) => a.country.name.localeCompare(b.country.name))
+}
 
-const availableCountries = countryWhiteList.map((countryCode) => ({
-  code: countryCode,
-  country: getCountryData(countryCode),
-  emoji: getEmojiFlag(countryCode),
+const countryCodes = Object.keys(countries) as TCountryCode[]
+const allCountries = getCountryList(countryCodes.filter((countryCode) => {
+  switch (countryCode.toUpperCase()) {
+    // US Trade Embargos (Stripe can check regions)
+    case 'CU':
+    case 'IR':
+    case 'KP':
+    case 'SY':
+    case 'RU':
+      return false
+    default:
+      return true
+  }
 }))
 
+const stripeConnectWhitelist = CONFIG.STRIPE_COUNTRIES_WHITELIST_CSV.split(
+  ',',
+) as TCountryCode[]
+const stripeConnectCountries = getCountryList(stripeConnectWhitelist)
+
 const CountryPicker = ({
   value,
   onChange,
   autoComplete,
+  stripeConnectOnly = false,
 }: {
   value?: string
   onChange: (value: string) => void
   autoComplete?: string
+  stripeConnectOnly?: boolean
 }) => {
+  const countryMap = stripeConnectOnly ? stripeConnectCountries : allCountries
   return (
     <Select onValueChange={onChange} value={value} autoComplete={autoComplete}>
       <SelectTrigger>
         <SelectValue placeholder="Country" />
       </SelectTrigger>
       <SelectContent>
-        {availableCountries.map(({ code, country, emoji }) => (
+        {countryMap.map(({ code, country, emoji }) => (
           <SelectItem key={code} value={code} textValue={country.name}>
             <div className="flex flex-row gap-2">
               <div>{emoji}</div>