1import { a as __toESM } from "./rolldown-runtime-Cql5ZV07.js"; 2import { p as require_react } from "./vendor-charts-D81iZKCV.js"; 3import { g as require_compiler_runtime, t as require_jsx_runtime } from "./vendor-react-HZz3WA9p.js"; 4import { n as toast } from "./dist-Bh07-69G.js"; 5import { t as Button } from "./button-BWyXpawe.js"; 6import { t as Spin } from "./spin-Bjb5hq6_.js"; 7import { a as booleanType, b as useForm, f as objectType, g as ZodIssueCode, m as stringType, t } from "./vendor-form-DCqShb_y.js"; 8import { Yn as trackMethodCall, Z as SelectField, cn as DialogFooter, dn as DialogTitle, in as Dialog, ln as DialogHeader, m as InputField, nt as FormItem, on as DialogContent, rt as FormWrapper, un as DialogInner } from "./main-DDHJZG-i.js"; 9import { a as useElements, i as Elements, n as CardExpiryElement, o as useStripe, r as CardNumberElement, s as loadStripe, t as CardCvcElement } from "./vendor-stripe-Bm0uAhM8.js"; 10import { t as CheckboxField } from "./checkbox-field-Bhc3M4dB.js"; 11import { a as Country, i as COUNTRY_OPTIONS, o as STATE_PROVINCE_OPTIONS } from "./area-DK7oSQ7j.js"; 12import { i as useGetCompanyInfoQuery, n as useEditCardInfoMutation, s as useValidateAddressMutation, t as useBindCardMutation } from "./card-service-BOYGocoL.js"; 13var visa_default = "data:image/svg+xml,%3csvg%20width='64'%20height='44'%20viewBox='0%200%2064%2044'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M20.8413%2029.2235H17.0885L14.2744%2018.1027C14.1409%2017.5911%2013.8573%2017.1389%2013.4401%2016.9257C12.399%2016.3901%2011.2518%2015.9638%2010.0002%2015.7488V15.3206H16.0456C16.88%2015.3206%2017.5057%2015.9638%2017.61%2016.7107L19.0701%2024.7325L22.821%2015.3206H26.4695L20.8413%2029.2235ZM28.5554%2029.2235H25.0112L27.9296%2015.3206H31.4737L28.5554%2029.2235ZM36.059%2019.1721C36.1633%2018.4233%2036.789%2017.9952%2037.5191%2017.9952C38.6663%2017.8877%2039.916%2018.1027%2040.959%2018.6365L41.5847%2015.6432C40.5418%2015.215%2039.3946%2015%2038.3535%2015C34.9136%2015%2032.4106%2016.9257%2032.4106%2019.5984C32.4106%2021.6317%2034.1835%2022.6993%2035.4351%2023.3424C36.789%2023.9837%2037.3105%2024.4119%2037.2062%2025.0532C37.2062%2026.0151%2036.1633%2026.4433%2035.1222%2026.4433C33.8707%2026.4433%2032.6191%2026.1226%2031.4737%2025.587L30.848%2028.5822C32.0995%2029.116%2033.4535%2029.331%2034.705%2029.331C38.562%2029.4366%2040.959%2027.5127%2040.959%2024.625C40.959%2020.9885%2036.059%2020.7754%2036.059%2019.1721ZM53.3626%2029.2235L50.5485%2015.3206H47.5258C46.9%2015.3206%2046.2743%2015.7488%2046.0657%2016.3901L40.8547%2029.2235H44.5031L45.2313%2027.1921H49.7141L50.1313%2029.2235H53.3626ZM48.0473%2019.0647L49.0884%2024.3044H46.17L48.0473%2019.0647Z'%20fill='%23172B85'/%3e%3c/svg%3e"; 14var amex_default = "data:image/svg+xml,%3csvg%20width='64'%20height='44'%20viewBox='0%200%2064%2044'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='12'%20y='8'%20width='40'%20height='27.8261'%20rx='3.47826'%20fill='%231F72CD'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M19.0672%2017.855L15.3789%2026.257H19.7943L20.3416%2024.9174H21.5928L22.1402%2026.257H27.0002V25.2346L27.4333%2026.257H29.9473L30.3804%2025.2129V26.257H40.488L41.717%2024.9522L42.8678%2026.257L48.0593%2026.2678L44.3594%2022.0794L48.0593%2017.855H42.9483L41.7519%2019.1357L40.6373%2017.855H29.6416L28.6974%2020.0236L27.731%2017.855H23.3249V18.8426L22.8348%2017.855H19.0672ZM19.9216%2019.0482H22.0738L24.5202%2024.7456V19.0482H26.8779L28.7675%2023.1332L30.509%2019.0482H32.8549V25.0772H31.4274L31.4158%2020.3529L29.3347%2025.0772H28.0578L25.9651%2020.3529V25.0772H23.0285L22.4718%2023.7255H19.4641L18.9085%2025.076H17.3351L19.9216%2019.0482ZM39.9654%2019.0483H34.1611V25.0738H39.8755L41.7174%2023.0769L43.4926%2025.0738H45.3484L42.6511%2022.0785L45.3484%2019.0483H43.5731L41.7406%2021.0223L39.9654%2019.0483ZM20.9685%2020.0684L19.9775%2022.4762H21.9583L20.9685%2020.0684ZM35.5938%2021.3977V20.2972V20.2961H39.2154L40.7957%2022.0562L39.1454%2023.826H35.5938V22.6244H38.7602V21.3977H35.5938Z'%20fill='white'/%3e%3c/svg%3e"; 15var diners_club_default = "data:image/svg+xml,%3csvg%20width='64'%20height='44'%20viewBox='0%200%2064%2044'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M34.5195%207.66877C42.5769%207.54354%2049.1231%2014.061%2049.249%2022.0828V22.2078C48.9972%2030.1043%2042.5769%2036.4968%2034.5195%2036.4969H29.3574C21.5518%2036.3715%2015.2569%2029.9789%2015.2569%2022.2078C15.0052%2014.4367%2021.0488%207.91945%2028.7285%207.66877H34.5195ZM29.7344%2010.1756C23.1877%2010.1756%2017.7
15745%2015.5651%2017.7744%2022.0828C17.7745%2028.6006%2023.1877%2033.991%2029.7344%2033.991C36.281%2033.991%2041.6943%2028.6005%2041.6944%2022.0828C41.6942%2015.5652%2036.281%2010.1757%2029.7344%2010.1756ZM27.8467%2030.1043C23.4405%2028.9761%2020.7967%2024.4638%2021.9297%2020.077C22.6851%2017.1943%2024.9513%2014.9385%2027.8467%2014.1863V30.1043ZM31.624%2014.1863C36.0301%2015.3146%2038.7998%2019.701%2037.667%2024.0877C36.9117%2027.0958%2034.6454%2029.3521%2031.624%2030.1043V14.1863Z'%20fill='%230079BE'/%3e%3c/svg%3e"; 16var discover_default = "/assets/discover-CA1T9Xwo.svg"; 17var jcb_default = "data:image/svg+xml,%3csvg%20width='64'%20height='44'%20viewBox='0%200%2064%2044'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M40.6036%2022.4987C41.5248%2022.5188%2042.4512%2022.4581%2043.3687%2022.5303C44.2978%2022.7036%2044.5218%2024.1102%2043.6963%2024.5709C43.1331%2024.8744%2042.464%2024.6839%2041.8534%2024.7375H40.6036V22.4987ZM43.9013%2019.9648C44.106%2020.6872%2043.4096%2021.3358%2042.7139%2021.2363H40.6036C40.6185%2020.5551%2040.5747%2019.8156%2040.6251%2019.1703C41.4704%2019.1941%2042.3236%2019.1217%2043.1641%2019.2081C43.5252%2019.2989%2043.8274%2019.5957%2043.9013%2019.9648ZM48.9798%209.252C49.0191%2010.6316%2048.9855%2012.0841%2048.9968%2013.4916C48.9942%2019.2143%2049.0023%2024.9367%2048.9923%2030.6597C48.9552%2032.8044%2047.0545%2034.668%2044.9247%2034.7108C42.7928%2034.7194%2040.6606%2034.7121%2038.5283%2034.7145V26.063C40.8515%2026.0511%2043.1758%2026.0874%2045.498%2026.0449C46.5753%2025.9773%2047.7552%2025.2665%2047.8054%2024.081C47.9322%2022.8904%2046.8097%2022.0668%2045.7439%2021.9368C45.3343%2021.9261%2045.3463%2021.8173%2045.7439%2021.7699C46.7604%2021.5502%2047.5587%2020.4981%2047.2596%2019.4445C47.0047%2018.3364%2045.7799%2017.9074%2044.7611%2017.9096C42.6838%2017.8955%2040.6062%2017.9076%2038.5288%2017.9035C38.5422%2016.2884%2038.5008%2014.6715%2038.5511%2013.0576C38.7157%2010.9516%2040.6643%209.21487%2042.7642%209.25255C44.8363%209.25224%2046.9082%209.25224%2048.9798%209.25216V9.252Z'%20fill='url(%23paint0_linear_12202_141452)'/%3e%3cpath%20d='M15.0548%2013.2751C15.1078%2011.1338%2017.0166%209.28555%2019.1438%209.25426C21.2678%209.24771%2023.3921%209.25331%2025.5162%209.25142C25.5103%2016.4157%2025.5277%2023.5809%2025.5074%2030.7448C25.4256%2032.8601%2023.5376%2034.6731%2021.4336%2034.7106C19.3056%2034.7183%2017.1773%2034.7117%2015.0492%2034.7138V25.7707C17.1163%2026.2591%2019.284%2026.4669%2021.3928%2026.143C22.6534%2025.9402%2024.0325%2025.3212%2024.4593%2024.0134C24.7734%2022.8947%2024.5966%2021.7174%2024.6433%2020.5693V17.9029H20.9938C20.9774%2019.6664%2021.0274%2021.4329%2020.9674%2023.1943C20.869%2024.2769%2019.7969%2024.9648%2018.7758%2024.928C17.5095%2024.9414%2015.0001%2024.0103%2015.0001%2024.0103C14.9938%2020.7063%2015.0369%2016.5685%2015.0548%2013.2755V13.2751Z'%20fill='url(%23paint1_linear_12202_141452)'/%3e%3cpath%20d='M26.8771%2018.9788C26.685%2019.0196%2026.8385%2018.3245%2026.7894%2018.0608C26.8025%2016.3936%2026.7621%2014.7245%2026.8117%2013.0585C26.9758%2010.9436%2028.9394%209.2025%2031.0478%209.25201H37.2569C37.2511%2016.4163%2037.2683%2023.5814%2037.2481%2030.7454C37.1662%2032.8607%2035.2781%2034.6736%2033.1741%2034.7112C31.046%2034.7192%2028.9176%2034.7124%2026.7893%2034.7145V24.9161C28.2428%2026.1087%2030.2183%2026.2943%2032.0292%2026.2976C33.3943%2026.2971%2034.7515%2026.0866%2036.0772%2025.7718V23.9767C34.5832%2024.7213%2032.8269%2025.1943%2031.1707%2024.7665C30.0154%2024.4789%2029.1768%2023.3624%2029.1955%2022.1701C29.0616%2020.9302%2029.7884%2019.6212%2031.0069%2019.2526C32.5196%2018.779%2034.1684%2019.1412%2035.5864%2019.7569C35.8902%2019.916%2036.1986%2020.1133%2036.0771%2019.6055V18.1945C33.7055%2017.6303%2031.1816%2017.4227%2028.799%2018.0365C28.1093%2018.231%2027.4374%2018.5261%2026.8771%2018.979V18.9788Z'%20fill='url(%23paint2_linear_12202_141452)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_12202_141452'%20x1='38.4569'%20y1='21.4388'%20x2='48.9308'%20y2='21.4388'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2358B03A'/%3e%3cstop%20offset='1'%20stop-color='%2355B330'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_12202_141452'%20x1='14.8265'%20y1='22.2264'%20x2='25.3446'%20y2='22.2264'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%230F6EB6'/%3e%3cstop%20offset='1'%20stop-color='%23006DBA'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_12202_141452'%20x1='26.774'%20y1='21.6855'%20x2='37.2549'%20y2='21.6855'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23DE0D3D'/%3e%3cstop%20offset='1'%20stop-color='%23E30138'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e"; 18var master_card_default = "data:image/svg+xml,%3csvg%20width='64'%20height='44'%20viewBox='0%200%2064%2044'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M39.8691%2010C46.5687%2010.0002%2051.9999%2015.3665%2052%2021.9863C52%2028.6062%2046.5687%2033.9734%2039.8691%2033.9736C36.8656%2033.9736%2034.1186%2032.8921%2032%2031.1055C29.8814%2
18032.8922%2027.1346%2033.9736%2024.1309%2033.9736C17.4312%2033.9736%2012%2028.6063%2012%2021.9863C12.0002%2015.3665%2017.4313%2010.0001%2024.1309%2010C27.1341%2010%2029.8805%2011.0809%2031.999%2012.8672C34.1177%2011.0804%2036.8654%2010%2039.8691%2010Z'%20fill='%23ED0006'/%3e%3cpath%20d='M39.8691%2010C46.5687%2010.0002%2051.9999%2015.3665%2052%2021.9863C52%2028.6062%2046.5687%2033.9734%2039.8691%2033.9736C36.8656%2033.9736%2034.1186%2032.8921%2032%2031.1055C34.607%2028.9069%2036.2617%2025.6385%2036.2617%2021.9863C36.2617%2018.3342%2034.6071%2015.0657%2032%2012.8672C34.1186%2011.0807%2036.8656%2010%2039.8691%2010Z'%20fill='%23F9A000'/%3e%3cpath%20d='M32.0005%2012.8672C34.6076%2015.0657%2036.2622%2018.3342%2036.2622%2021.9863C36.2622%2025.6385%2034.6075%2028.9069%2032.0005%2031.1055C29.3934%2028.9069%2027.7378%2025.6385%2027.7378%2021.9863C27.7378%2018.3341%2029.3933%2015.0657%2032.0005%2012.8672Z'%20fill='%23FF5E00'/%3e%3c/svg%3e"; 19var union_pay_default = "/assets/union-pay-D0uto7b7.svg"; 20const CARD_BRAND_LOGO = { 21 "American Express": amex_default, 22 "Diners Club": diners_club_default, 23 Discover: discover_default, 24 JCB: jcb_default, 25 MasterCard: master_card_default, 26 UnionPay: union_pay_default, 27 Visa: visa_default 28}; 29var MONTH_NAMES = [ 30 "Jan", 31 "Feb", 32 "Mar", 33 "Apr", 34 "May", 35 "Jun", 36 "Jul", 37 "Aug", 38 "Sep", 39 "Oct", 40 "Nov", 41 "Dec" 42]; 43const formatExpireDate = (expMonth, expYear) => { 44 return `${MONTH_NAMES[expMonth - 1] ?? ""}, ${expYear}`; 45}; 46const getCardStatus = (card) => { 47 const now = /* @__PURE__ */ new Date(); 48 const currentYear = now.getFullYear(); 49 const currentMonth = now.getMonth() + 1; 50 if (card.expYear < currentYear || card.expYear === currentYear && card.expMonth < currentMonth) return "Invalid"; 51 if (new Date(card.expYear, card.expMonth - 1) <= new Date(currentYear, currentMonth)) return "
51Expires Soon"; 52 return "Valid"; 53}; 54var UNITED_STATES = "United States"; 55var postalCodeRefine = (data, ctx) => { 56 const code = data.postalCode?.trim() ?? ""; 57 if (data.country === UNITED_STATES) { 58 if (!/^\d{5}$/.test(code)) ctx.addIssue({ 59 code: ZodIssueCode.custom, 60 message: "Please enter valid 5-digit postal code.", 61 path: ["postalCode"] 62 }); 63 } else if (!/^[a-zA-Z0-9]{6}$/.test(code)) ctx.addIssue({ 64 code: ZodIssueCode.custom, 65 message: "Please enter valid 6-digit postal code.", 66 path: ["postalCode"] 67 }); 68}; 69var commonCardSchema = objectType({ 70 expiryDate: stringType().min(1, "Expiry date is required.").refine((value) => { 71 const match = value.match(/^(\d{2})\s*\/\s*(\d{2})$/); 72 if (!match) return false; 73 const month = parseInt(match[1], 10); 74 const year = parseInt(match[2], 10); 75 const currentYear = (/* @__PURE__ */ new Date()).getFullYear() % 100; 76 const currentMonth = (/* @__PURE__ */ new Date()).getMonth() + 1; 77 if (month < 1 || month > 12) return false; 78 if (year < currentYear || year === currentYear && month < currentMonth) return false; 79 return true; 80 }, { message: "Please enter a valid expiry date (MM / YY)." }), 81 sameAsCompanyAddress: booleanType().default(false), 82 companyAddress: stringType().min(1, "Company address is required.").trim(), 83 country: stringType().min(1, "Country is required."), 84 state: stringType().min(1, "State/Province is required."), 85 city: stringType().min(1, "City is required.").trim(), 86 postalCode: stringType().min(1, "Postal code is required.").trim(), 87 setAsDefault: booleanType().default(false) 88}); 89const addCardFormSchema = objectType({ 90 cardNumber: stringType().min(1, "Credit card number is required.").refine((value) => { 91 if (value === "valid") return true; 92 const digitsOnly = value.replace(/\s/g, ""); 93 return /^\d{13,19}$/.test(digitsOnly); 94 }, { message: "Please enter a valid credit card number." }), 95 cvc: stringType().min(1, "CVC is required.").refine((value) => { 96 return /^\d{3,4}$/.test(value); 97 }, { message: "Please enter a valid CVC (3-4 digits)." }), 98 ...commonCardSchema.shape 99}).superRefine(postalCodeRefine); 100const editCardFormSchema = objectType({ 101 cardNumber: stringType().trim(), 102 cvc: stringType().trim(), 103 ...commonCardSchema.shape 104}).superRefine(postalCodeRefine); 105var import_compiler_runtime = /* @__PURE__ */ __toESM(require_compiler_runtime()); 106var import_react = /* @__PURE__ */ __toESM(require_react()); 107var import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime()); 108var COUNTRY$1 = { 109 "United States": "US", 110 Canada: "CA" 111}; 112var getStateOptions$1 = (country) => { 113 if (!country) return []; 114 return STATE_PROVINCE_OPTIONS[country] ?? []; 115}; 116var stripePromiseCache = /* @__PURE__ */ new Map(); 117var getStripePromise = (stripeKey) => { 118 const existing = stripePromiseCache.get(stripeKey); 119 if (existing) return existing; 120 const created = loadStripe(stripeKey, { locale: "en" }); 121 stripePromiseCache.set(stripeKey, created); 122 return created; 123}; 124var elementOptions = { style: { 125 base: { 126 fontSize: "14px", 127 fontWeight: "500", 128 color: "#0E132F", 129 "::placeholder": { 130 color: "#72768E", 131 fontWeight: "400" 132 } 133 }, 134 invalid: { color: "#dc2626" } 135} }; 136var AddCardInner = ({ open, onOpenChange }) => { 137 const stripe = useStripe(); 138 const elements = useElements(); 139 const cardNumberCompleteRef = (0, import_react.useRef)(false); 140 const cardExpiryCompleteRef = (0, import_react.useRef)(false); 141 const cardCvcCompleteRef = (0, import_react.useRef)(false); 142 const [bindCard, { isLoading: isBinding }] = useBindCardMutation(); 143 const [validateAddress, { isLoading: isValidatingAddress }] = useValidateAddressMutation(); 144 const form = useForm({ 145 resolver: t(addCardFormSchema), 146 defaultValues: { 147 cardNumber: "", 148 expiryDate: "", 149 cvc: "", 150 sameAsCompanyAddress: false, 151 companyAddress: "", 152 country: "", 153 state: "", 154 city: "", 155 postalCode: "", 156 setAsDefault: false 157 }, 158 mode: "onChange" 159 }); 160 const { handleSubmit, watch, trigger, setValue } = form; 161 const country = watch("country"); 162 const sameAsCompanyAddress = watch("sameAsCompanyAddress"); 163 const { data: companyInfoData, isLoading: isLoadingCompanyInfo } = useGetCompanyInfoQuery(void 0, { skip: !sameAsCompanyAddress }); 164 const stateOptions = getStateOptions$1(country); 165 (0, import_react.useEffect)(() => { 166 if (country) trigger("postalCode"); 167 }, [country, trigger]); 168 (0, import_react.useEffect)(() => { 169 try { 170 const companyInfo = companyInfoData?.data; 171 let country_0 = companyInfo?.country; 172 if (country_0 === "US") country_0 = Country.UNITED_STATES; 173 else if (country_0 === "CA") country_0 = Country.CANADA; 174 if (sameAsCompanyAddress && companyInfo) { 175 setValue("companyAddress", companyInfo.street ?? "", { shouldValidate: true }); 176 setValue("country", country_0 ?? "", { shouldValidate: true }); 177 setValue("city", companyInfo.city ?? "", { shouldValidate: true });
178 setValue("postalCode", companyInfo.postCode ?? "", { shouldValidate: true }); 179 setTimeout(() => { 180 setValue("state", companyInfo.state ?? "", { shouldValidate: true }); 181 }, 0); 182 } 183 } catch (error) { 184 console.error(error); 185 } 186 }, [ 187 sameAsCompanyAddress, 188 companyInfoData, 189 setValue 190 ]); 191 (0, import_react.useEffect)(() => { 192 if (!open) { 193 form.reset(); 194 cardNumberCompleteRef.current = false; 195 cardExpiryCompleteRef.current = false; 196 cardCvcCompleteRef.current = false; 197 if (elements) { 198 const cardNumber = elements.getElement(CardNumberElement); 199 const cardExpiry = elements.getElement(CardExpiryElement); 200 const cardCvc = elements.getElement(CardCvcElement); 201 cardNumber?.clear(); 202 cardExpiry?.clear(); 203 cardCvc?.clear(); 204 } 205 } 206 }, [ 207 open, 208 form, 209 elements 210 ]); 211 const handleCardNumberChange = (e, onChange) => { 212 trackMethodCall("handleCardNumberChange", [e, onChange]); 213 cardNumberCompleteRef.current = e.complete; 214 if (e.complete) { 215 onChange("valid"); 216 trigger("cardNumber"); 217 } else if (e.empty) { 218 onChange(""); 219 trigger("cardNumber"); 220 } else if (e.error) { 221 onChange(""); 222 trigger("cardNumber"); 223 } 224 }; 225 const handleCardExpiryChange = (e_0, onChange_0) => { 226 trackMethodCall("handleCardExpiryChange", [e_0, onChange_0]); 227 cardExpiryCompleteRef.current = e_0.complete; 228 if (e_0.complete) { 229 const futureYear = (/* @__PURE__ */ new Date()).getFullYear() % 100 + 1; 230 onChange_0(`12 / ${String(futureYear).padStart(2, "0")}`); 231 trigger("expiryDate"); 232 } else if (e_0.empty) { 233 onChange_0(""); 234 trigger("expiryDate"); 235 } else if (e_0.error) { 236 onChange_0(""); 237 trigger("expiryDate"); 238 } 239 }; 240 const handleCardCvcChange = (e_1, onChange_1) => { 241 trackMethodCall("handleCardCvcChange", [e_1, onChange_1]); 242 cardCvcCompleteRef.current = e_1.complete; 243 if (e_1.complete) { 244 onChange_1("123"); 245 trigger("cvc"); 246 } else if (e_1.empty) { 247 onChange_1(""); 248 trigger("cvc"); 249 } else if (e_1.error) { 250 onChange_1(""); 251 trigger("cvc"); 252 } 253 }; 254 const handleAddCardSubmit = handleSubmit(async (data) => { 255 trackMethodCall("handleAddCardSubmit", [data]); 256 if (!stripe || !elements) { 257 toast.error("Stripe not loaded"); 258 return; 259 } 260 if (!cardNumberCompleteRef.current || !cardExpiryCompleteRef.current || !cardCvcCompleteRef.current) { 261 await trigger([ 262 "cardNumber", 263 "expiryDate", 264 "cvc" 265 ]); 266 return; 267 } 268 const cardNumber_0 = elements.getElement(CardNumberElement); 269 if (!cardNumber_0) { 270 toast.error("Card number element not found"); 271 return; 272 } 273 try { 274 const params = { 275 address: data.companyAddress, 276 zipCode: data.postalCode, 277 country: COUNTRY$1[data.country] ?? "", 278 city: data.city, 279 state: data.state 280 }; 281 const response = await validateAddress(params).unwrap(); 282 if (response.code !== 200) throw new Error(response.message); 283 } catch (error_0) { 284 toast.error(error_0 instanceof Error ? error_0.message : "Failed to validate address."); 285 return; 286 } 287 const stripeParams = { 288 address_line1: data.companyAddress, 289 address_city: data.city, 290 address_state: data.state, 291 address_country: data.country, 292 address_zip: data.postalCode 293 }; 294 const { token, error: error_1 } = await stripe.createToken(cardNumber_0, stripeParams); 295 if (error_1) { 296 toast.error("Your bank card failed the verification. Please contact your card provider or try a different card"); 297 return; 298 } 299 const bindCardParams = { 300 tokenId: token.id, 301 isDefault: data.setAsDefault 302 }; 303 try { 304 const response_0 = await bindCard(bindCardParams).unwrap(); 305 if (response_0.code === 200) { 306 toast.success("Card added successfully."); 307 onOpenChange(false); 308 } else throw new Error(response_0.message); 309 } catch (error_2) { 310 toast.error(error_2 instanceof Error ? error_2.message : "Failed to add card."); 311 } 312 }); 313 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog, { 314 open, 315 onOpenChange, 316 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogContent, { 317 className: "w-full max-w-162.5", 318 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { children: "Add New Card" }) }
318), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormWrapper, { 319 form, 320 onSubmit: handleAddCardSubmit, 321 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogInner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spin, { 322 spinning: isLoadingCompanyInfo, 323 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 324 className: "flex flex-col gap-6", 325 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 326 className: "flex flex-col gap-5", 327 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { 328 className: "text-base font-semibold text-foreground", 329 children: "Card Information" 330 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 331 className: "flex gap-4", 332 children: [ 333 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 334 className: "flex-2", 335 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormItem, { 336 name: "cardNumber", 337 title: "Credit Card Number", 338 required: true, 339 render: ({ field, fieldState }) => { 340 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 341 className: `bg-input-field rounded-md border px-3 py-2 ${fieldState.invalid ? "border-destructive shadow-xs" : "border-input"}`, 342 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardNumberElement, { 343 options: { 344 ...elementOptions, 345 placeholder: "Credit Card Number" 346 }, 347 onChange: (e_2) => { 348 return handleCardNumberChange(e_2, field.onChange); 349 } 350 }) 351 }); 352 } 353 }) 354 }), 355 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 356 className: "flex-1", 357 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormItem, { 358 name: "expiryDate", 359 title: "MM / YY", 360 required: true, 361 render: ({ field: field_0, fieldState: fieldState_0 }) => { 362 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 363 className: `bg-input-field rounded-md border px-3 py-2 ${fieldState_0.invalid ? "border-destructive" : "border-input"}`, 364 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardExpiryElement, { 365 options: { 366 ...elementOptions, 367 placeholder: "MM / YY" 368 }, 369 onChange: (e_3) => { 370 return handleCardExpiryChange(e_3, field_0.onChange); 371 } 372 }) 373 }); 374 } 375 }) 376 }), 377 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 378 className: "flex-1", 379 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormItem, { 380 name: "cvc", 381 title: "CVC", 382 required: true, 383 render: ({ field: field_1, fieldState: fieldState_1 }) => { 384 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 385 className: `bg-input-field rounded-md border px-3 py-2 ${fieldState_1.invalid ? "border-destructive" : "border-input"}`, 386 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardCvcElement, { 387 options: { 388 ...elementOptions, 389 placeholder: "CVC" 390 }, 391 onChange: (e_4) => { 392 return handleCardCvcChange(e_4, field_1.onChange); 393 } 394 }) 395 }); 396 } 397 }) 398 }) 399 ] 400 })] 401 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 402 className: "flex flex-col gap-5", 403 children: [ 404 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 405 className: "flex items-center gap-6", 406 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { 407 className: "min-w-0 flex-1 text-base font-semibold text-foreground", 408 children: "Billing Information" 409 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 410 className: "flex-shrink-0", 411 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxField, { 412 name: "sameAsCompanyAddress", 413 label: "Same as Company Address" 414 }) 415 })] 416 }),
417 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputField, { 418 name: "companyAddress", 419 title: "Company Address", 420 required: true, 421 placeholder: "Company Address" 422 }), 423 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 424 className: "flex gap-4", 425 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectField, { 426 name: "country", 427 title: "Country", 428 required: true, 429 placeholder: "Select", 430 options: COUNTRY_OPTIONS 431 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectField, { 432 name: "state", 433 title: "State/Province", 434 required: true, 435 placeholder: "Select", 436 options: stateOptions 437 })] 438 }), 439 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 440 className: "flex gap-4", 441 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputField, { 442 name: "city", 443 title: "City", 444 required: true, 445 placeholder: "City" 446 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputField, { 447 name: "postalCode", 448 title: "Postal Code", 449 required: true, 450 placeholder: "Postal Code" 451 })] 452 }), 453 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxField, { 454 name: "setAsDefault", 455 label: "Set as default payment method" 456 }) 457 ] 458 })] 459 }) 460 }) }
460), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogFooter, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { 461 type: "button", 462 variant: "outline", 463 onClick: () => { 464 return onOpenChange(false); 465 }, 466 children: "Cancel" 467 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { 468 type: "submit", 469 loading: isBinding || isValidatingAddress, 470 children: "Add Card" 471 })] })] 472 })] 473 }) 474 }); 475}; 476var AddCard = (props) => { 477 const $ = (0, import_compiler_runtime.c)(3); 478 const stripeKey = "pk_live_51I8HkLEyr9rBS0QEI8koW3hUQclaEVX0lBPy00r84YgNUIzKRT8VTf5lZZqjnhdeNbv5usHHZD1W5uHi66L9R0o300nEl30Fs9"; 479 let t0; 480 if ($[0] === Symbol.for("react.memo_cache_sentinel")) { 481 t0 = getStripePromise(stripeKey); 482 $[0] = t0; 483 } else t0 = $[0]; 484 const stripePromise = t0; 485 let t1; 486 if ($[1] !== props) { 487 t1 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Elements, { 488 stripe: stripePromise, 489 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AddCardInner, { ...props }) 490 }); 491 $[1] = props; 492 $[2] = t1; 493 } else t1 = $[2]; 494 return t1; 495}; 496var VALID_COUNTRY_VALUES = new Set(COUNTRY_OPTIONS.map((o) => { 497 return o.value; 498})); 499var COUNTRY = { 500 "United States": "US", 501 Canada: "CA" 502}; 503var getStateOptions = (country) => { 504 if (!country) return []; 505 return STATE_PROVINCE_OPTIONS[country] ?? []; 506}; 507var EditCard = ({ open, onOpenChange, cardInfo }) => { 508 const [editCardInfo, { isLoading: isEditing }] = useEditCardInfoMutation(); 509 const [validateAddress, { isLoading: isValidatingAddress }] = useValidateAddressMutation(); 510 const form = useForm({ 511 resolver: t(editCardFormSchema), 512 defaultValues: { 513 cardNumber: "", 514 expiryDate: "", 515 cvc: "", 516 sameAsCompanyAddress: false, 517 companyAddress: "", 518 country: "", 519 state: "", 520 city: "", 521 postalCode: "", 522 setAsDefault: false 523 }, 524 mode: "onChange" 525 }); 526 const { watch, setValue, handleSubmit, trigger } = form; 527 const country = watch("country"); 528 const sameAsCompanyAddress = watch("sameAsCompanyAddress"); 529 const { data: companyInfoData, isLoading: isLoadingCompanyInfo } = useGetCompanyInfoQuery(void 0, { skip: !sameAsCompanyAddress }); 530 const stateOptions = getStateOptions(country); 531 const formatCountryCode = (0, import_react.useCallback)((data) => { 532 let country_0 = data; 533 if (country_0 === "US") country_0 = Country.UNITED_STATES; 534 else if (country_0 === "CA") country_0 = Country.CANADA; 535 return country_0; 536 }, []); 537 (0, import_react.useEffect)(() => { 538 if (country) trigger("postalCode"); 539 }, [country, trigger]); 540 (0, import_react.useEffect)(() => { 541 try { 542 const companyInfo = companyInfoData?.data; 543 const countryCode = formatCountryCode(companyInfo?.country ?? ""); 544 if (sameAsCompanyAddress && companyInfo) { 545 setValue("companyAddress", companyInfo.street ?? "", { shouldValidate: true }); 546 setValue("country", countryCode ?? "", { shouldValidate: true }); 547 setValue("city", companyInfo.city ?? "", { shouldValidate: true }); 548 setValue("postalCode", companyInfo.postCode ?? "", { shouldValidate: true }); 549 setTimeout(() => { 550 setValue("state", companyInfo.state ?? "", { shouldValidate: true }); 551 }, 0); 552 } 553 } catch (error) { 554 console.error(error); 555 } 556 }, [ 557 sameAsCompanyAddress, 558 companyInfoData, 559 setValue, 560 formatCountryCode 561 ]); 562 (0, import_react.useEffect)(() => { 563 if (!open) form.reset(); 564 else if (cardInfo) { 565 const formattedCountry = formatCountryCode(cardInfo.addressCountry ?? cardInfo.country ?? ""); 566 const country_1 = VALID_COUNTRY_VALUES.has(formattedCountry) ? formattedCountry : ""; 567 setValue("cardNumber", `**** **** **** ${cardInfo.last4}`); 568 setValue("expiryDate", `${cardInfo.expMonth.toString().padStart(2, "0")} / ${cardInfo.expYear.toString().slice(-2)}`); 569 setValue("cvc", "***"); 570 setValue("sameAsCompanyAddress", false); 571 setValue("companyAddress", cardInfo.addressLine1 ?? ""); 572 setValue("country", country_1); 573 setValue("state", cardInfo.addressState ?? ""); 574 setValue("city", cardInfo.addressCity ?? ""); 575 setValue("postalCode", cardInfo.addressZip ?? "");
576 setValue("setAsDefault", cardInfo.isDefault ?? false); 577 } 578 }, [ 579 open, 580 form, 581 cardInfo, 582 formatCountryCode, 583 setValue 584 ]); 585 const handleEditCardSubmit = handleSubmit(async (data_0) => { 586 trackMethodCall("handleEditCardSubmit", [data_0]); 587 try { 588 const params = { 589 address: data_0.companyAddress, 590 zipCode: data_0.postalCode, 591 country: COUNTRY[data_0.country] ?? "", 592 city: data_0.city, 593 state: data_0.state 594 }; 595 const response = await validateAddress(params).unwrap(); 596 if (response.code !== 200) throw new Error(response.message); 597 } catch (error_0) { 598 toast.error(error_0 instanceof Error ? error_0.message : "Failed to validate address."); 599 return; 600 } 601 const expiryMatch = data_0.expiryDate.match(/^(\d{2})\s*\/\s*(\d{2})$/); 602 const expMonth = expiryMatch ? expiryMatch[1] : ""; 603 const expYear = expiryMatch ? `20${expiryMatch[2]}` : ""; 604 const params_0 = { 605 cardId: cardInfo?.id ?? "", 606 addressLine1: data_0.companyAddress, 607 addressCity: data_0.city, 608 addressState: data_0.state, 609 addressCountry: data_0.country, 610 addressZip: data_0.postalCode, 611 expMonth, 612 expYear, 613 isDefault: data_0.setAsDefault 614 }; 615 try { 616 const response_0 = await editCardInfo(params_0).unwrap(); 617 if (response_0.code === 200) { 618 toast.success("Card updated successfully."); 619 onOpenChange(false); 620 } else throw new Error(response_0.message); 621 } catch (error_1) { 622 toast.error(error_1 instanceof Error ? error_1.message : "Failed to update card."); 623 } 624 }); 625 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog, { 626 open, 627 onOpenChange, 628 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogContent, { 629 className: "w-full max-w-162.5", 630 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { children: "Edit Card" }) }
630), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormWrapper, { 631 form, 632 onSubmit: handleEditCardSubmit, 633 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogInner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spin, { 634 spinning: isLoadingCompanyInfo, 635 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 636 className: "flex flex-col gap-6", 637 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 638 className: "flex flex-col gap-5", 639 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { 640 className: "text-base font-semibold text-foreground", 641 children: "Card Information" 642 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 643 className: "flex gap-4", 644 children: [ 645 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 646 className: "flex-2", 647 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputField, { 648 readOnly: true, 649 name: "cardNumber", 650 title: "Credit Card Number", 651 required: true, 652 placeholder: "Credit Card Number" 653 }) 654 }), 655 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 656 className: "flex-1", 657 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputField, { 658 name: "expiryDate", 659 title: "MM / YY", 660 required: true, 661 placeholder: "MM / YY" 662 }) 663 }), 664 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 665 className: "flex-1", 666 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputField, { 667 readOnly: true, 668 name: "cvc", 669 title: "CVC", 670 required: true, 671 placeholder: "CVC" 672 }) 673 }) 674 ] 675 })] 676 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 677 className: "flex flex-col gap-5", 678 children: [ 679 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 680 className: "flex items-center gap-6", 681 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { 682 className: "min-w-0 flex-1 text-base font-semibold text-foreground", 683 children: "Billing Information" 684 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 685 className: "flex-shrink-0", 686 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxField, { 687 name: "sameAsCompanyAddress", 688 label: "Same as Company Address" 689 }) 690 })] 691 }), 692 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputField, { 693 name: "companyAddress", 694 title: "Company Address", 695 required: true, 696 placeholder: "Company Address" 697 }), 698 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 699 className: "flex gap-4", 700 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectField, { 701 name: "country", 702 title: "Country", 703 required: true, 704 placeholder: "Select", 705 options: COUNTRY_OPTIONS 706 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectField, { 707 name: "state", 708 title: "State/Province", 709 required: true, 710 placeholder: "Select", 711 options: stateOptions 712 })] 713 }), 714 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 715 className: "flex gap-4", 716 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputField, { 717 name: "city", 718 title: "City", 719 required: true, 720 placeholder: "City" 721 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputField, { 722 name: "postalCode", 723 title: "Postal Code", 724 required: true, 725 placeholder: "Postal Code" 726 })] 727 }), 728 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxField, { 729 disabled: cardInfo?.isDefault, 730 name: "setAsDefault", 731 label: "Set as default payment method" 732 }) 733 ] 734 })] 735 }) 736 }) }
736), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogFooter, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { 737 type: "button", 738 variant: "outline", 739 onClick: () => { 740 return onOpenChange(false); 741 }, 742 children: "Cancel" 743 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { 744 type: "submit", 745 loading: isEditing || isValidatingAddress, 746 children: "Save" 747 })] })] 748 })] 749 }) 750 }); 751}; 752export { CARD_BRAND_LOGO as a, getCardStatus as i, AddCard as n, formatExpireDate as r, EditCard as t };
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.