@whop/elements-react-native 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +179 -0
- package/android/build.gradle +64 -0
- package/android/consumer-rules.pro +3 -0
- package/android/gradle.properties +5 -0
- package/android/src/main/java/com/whop/elements/WhopAddressSuggestionsModule.kt +102 -0
- package/android/src/main/java/com/whop/elements/WhopAuthSessionModule.kt +126 -0
- package/android/src/main/java/com/whop/elements/WhopElementsPackage.kt +39 -0
- package/android/src/main/java/com/whop/elements/WhopPayButtonManager.kt +74 -0
- package/android/src/main/java/com/whop/elements/WhopPayButtonPressEvent.kt +17 -0
- package/android/src/main/java/com/whop/elements/WhopPayButtonView.kt +178 -0
- package/android/src/main/java/com/whop/elements/WhopPlatformPayModule.kt +212 -0
- package/assets/whop-wordmark-dark.png +0 -0
- package/assets/whop-wordmark-dark@2x.png +0 -0
- package/assets/whop-wordmark-dark@3x.png +0 -0
- package/assets/whop-wordmark-light.png +0 -0
- package/assets/whop-wordmark-light@2x.png +0 -0
- package/assets/whop-wordmark-light@3x.png +0 -0
- package/ios/Package.swift +59 -0
- package/ios/Sources/ElementsReactNative/WhopAddressSuggestionsImpl.swift +189 -0
- package/ios/Sources/ElementsReactNative/WhopAuthSessionImpl.swift +106 -0
- package/ios/Sources/ElementsReactNative/WhopPayButtonImpl.swift +89 -0
- package/ios/Sources/ElementsReactNative/WhopPlatformPayImpl.swift +181 -0
- package/ios/generated/WhopAddressSuggestionsModule.h +11 -0
- package/ios/generated/WhopAddressSuggestionsModule.mm +46 -0
- package/ios/generated/WhopAuthSessionModule.h +11 -0
- package/ios/generated/WhopAuthSessionModule.mm +45 -0
- package/ios/generated/WhopElementsShims.h +35 -0
- package/ios/generated/WhopPayButtonComponentView.h +12 -0
- package/ios/generated/WhopPayButtonComponentView.mm +82 -0
- package/ios/generated/WhopPlatformPayModule.h +11 -0
- package/ios/generated/WhopPlatformPayModule.mm +51 -0
- package/lib/module/api/client.js +139 -0
- package/lib/module/api/client.js.map +1 -0
- package/lib/module/api/client.test.js +137 -0
- package/lib/module/api/client.test.js.map +1 -0
- package/lib/module/api/types.js +2 -0
- package/lib/module/api/types.js.map +1 -0
- package/lib/module/controller/actions.js +148 -0
- package/lib/module/controller/actions.js.map +1 -0
- package/lib/module/controller/actions.test.js +102 -0
- package/lib/module/controller/actions.test.js.map +1 -0
- package/lib/module/controller/store.js +158 -0
- package/lib/module/controller/store.js.map +1 -0
- package/lib/module/core/address/country-data.js +1370 -0
- package/lib/module/core/address/country-data.js.map +1 -0
- package/lib/module/core/address/country-name.js +38 -0
- package/lib/module/core/address/country-name.js.map +1 -0
- package/lib/module/core/address/country-names.generated.js +249 -0
- package/lib/module/core/address/country-names.generated.js.map +1 -0
- package/lib/module/core/address/engine.js +245 -0
- package/lib/module/core/address/engine.js.map +1 -0
- package/lib/module/core/address/engine.test.js +216 -0
- package/lib/module/core/address/engine.test.js.map +1 -0
- package/lib/module/core/address/form-state.js +409 -0
- package/lib/module/core/address/form-state.js.map +1 -0
- package/lib/module/core/address/form-state.test.js +516 -0
- package/lib/module/core/address/form-state.test.js.map +1 -0
- package/lib/module/core/address/places.js +36 -0
- package/lib/module/core/address/places.js.map +1 -0
- package/lib/module/core/address/required-coverage.test.js +57 -0
- package/lib/module/core/address/required-coverage.test.js.map +1 -0
- package/lib/module/core/address/suggest.js +102 -0
- package/lib/module/core/address/suggest.js.map +1 -0
- package/lib/module/core/address/suggest.test.js +156 -0
- package/lib/module/core/address/suggest.test.js.map +1 -0
- package/lib/module/core/address/use-suggestions.js +33 -0
- package/lib/module/core/address/use-suggestions.js.map +1 -0
- package/lib/module/core/payments/address-change.js +91 -0
- package/lib/module/core/payments/address-change.js.map +1 -0
- package/lib/module/core/payments/billing-merge.js +62 -0
- package/lib/module/core/payments/billing-merge.js.map +1 -0
- package/lib/module/core/payments/browser-info.js +42 -0
- package/lib/module/core/payments/browser-info.js.map +1 -0
- package/lib/module/core/payments/bt.js +151 -0
- package/lib/module/core/payments/bt.js.map +1 -0
- package/lib/module/core/payments/bt.test.js +23 -0
- package/lib/module/core/payments/bt.test.js.map +1 -0
- package/lib/module/core/payments/currency.js +37 -0
- package/lib/module/core/payments/currency.js.map +1 -0
- package/lib/module/core/payments/detail.js +159 -0
- package/lib/module/core/payments/detail.js.map +1 -0
- package/lib/module/core/payments/detail.test.js +225 -0
- package/lib/module/core/payments/detail.test.js.map +1 -0
- package/lib/module/core/payments/errors.js +115 -0
- package/lib/module/core/payments/errors.js.map +1 -0
- package/lib/module/core/payments/mint.js +89 -0
- package/lib/module/core/payments/mint.js.map +1 -0
- package/lib/module/core/payments/plan.js +131 -0
- package/lib/module/core/payments/plan.js.map +1 -0
- package/lib/module/core/payments/refusals.js +17 -0
- package/lib/module/core/payments/refusals.js.map +1 -0
- package/lib/module/core/payments/secure-fields.js +87 -0
- package/lib/module/core/payments/secure-fields.js.map +1 -0
- package/lib/module/core/payments/tax-id-catalog.js +616 -0
- package/lib/module/core/payments/tax-id-catalog.js.map +1 -0
- package/lib/module/core/payments/wallet-contact.js +42 -0
- package/lib/module/core/payments/wallet-contact.js.map +1 -0
- package/lib/module/core/payments/wallet-contact.test.js +77 -0
- package/lib/module/core/payments/wallet-contact.test.js.map +1 -0
- package/lib/module/elements/address.js +467 -0
- package/lib/module/elements/address.js.map +1 -0
- package/lib/module/elements/branding.js +114 -0
- package/lib/module/elements/branding.js.map +1 -0
- package/lib/module/elements/card-fields/context.js +254 -0
- package/lib/module/elements/card-fields/context.js.map +1 -0
- package/lib/module/elements/card-fields/fields.js +309 -0
- package/lib/module/elements/card-fields/fields.js.map +1 -0
- package/lib/module/elements/card-fields/index.js +30 -0
- package/lib/module/elements/card-fields/index.js.map +1 -0
- package/lib/module/elements/card.js +107 -0
- package/lib/module/elements/card.js.map +1 -0
- package/lib/module/elements/email.js +84 -0
- package/lib/module/elements/email.js.map +1 -0
- package/lib/module/elements/payment/declared-fields.js +186 -0
- package/lib/module/elements/payment/declared-fields.js.map +1 -0
- package/lib/module/elements/payment/index.js +448 -0
- package/lib/module/elements/payment/index.js.map +1 -0
- package/lib/module/elements/payment/wallet.js +132 -0
- package/lib/module/elements/payment/wallet.js.map +1 -0
- package/lib/module/elements/tax-id.js +100 -0
- package/lib/module/elements/tax-id.js.map +1 -0
- package/lib/module/i18n/catalogs.js +103 -0
- package/lib/module/i18n/catalogs.js.map +1 -0
- package/lib/module/i18n/index.js +45 -0
- package/lib/module/i18n/index.js.map +1 -0
- package/lib/module/index.js +27 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/namespace.js +174 -0
- package/lib/module/namespace.js.map +1 -0
- package/lib/module/native/index.js +128 -0
- package/lib/module/native/index.js.map +1 -0
- package/lib/module/package.json +1 -0
- package/lib/module/provider.js +56 -0
- package/lib/module/provider.js.map +1 -0
- package/lib/module/specs/NativeWhopAddressSuggestions.js +6 -0
- package/lib/module/specs/NativeWhopAddressSuggestions.js.map +1 -0
- package/lib/module/specs/NativeWhopAuthSession.js +10 -0
- package/lib/module/specs/NativeWhopAuthSession.js.map +1 -0
- package/lib/module/specs/NativeWhopPlatformPay.js +10 -0
- package/lib/module/specs/NativeWhopPlatformPay.js.map +1 -0
- package/lib/module/specs/WhopPayButtonNativeComponent.ts +22 -0
- package/lib/module/theme/appearance.js +85 -0
- package/lib/module/theme/appearance.js.map +1 -0
- package/lib/module/theme/appearance.test.js +124 -0
- package/lib/module/theme/appearance.test.js.map +1 -0
- package/lib/module/theme/provider.js +25 -0
- package/lib/module/theme/provider.js.map +1 -0
- package/lib/module/theme/resolve.js +69 -0
- package/lib/module/theme/resolve.js.map +1 -0
- package/lib/module/theme/scales.generated.js +419 -0
- package/lib/module/theme/scales.generated.js.map +1 -0
- package/lib/module/ui/element-frame.js +83 -0
- package/lib/module/ui/element-frame.js.map +1 -0
- package/lib/module/ui/payment-method-icon.js +69 -0
- package/lib/module/ui/payment-method-icon.js.map +1 -0
- package/lib/module/ui/primitives.js +266 -0
- package/lib/module/ui/primitives.js.map +1 -0
- package/lib/module/ui/select.js +281 -0
- package/lib/module/ui/select.js.map +1 -0
- package/lib/module/ui/suggestions.js +71 -0
- package/lib/module/ui/suggestions.js.map +1 -0
- package/lib/module/ui/whop-logo.js +42 -0
- package/lib/module/ui/whop-logo.js.map +1 -0
- package/lib/typescript/package.json +1 -0
- package/lib/typescript/src/api/client.d.ts +87 -0
- package/lib/typescript/src/api/client.d.ts.map +1 -0
- package/lib/typescript/src/api/types.d.ts +175 -0
- package/lib/typescript/src/api/types.d.ts.map +1 -0
- package/lib/typescript/src/controller/actions.d.ts +42 -0
- package/lib/typescript/src/controller/actions.d.ts.map +1 -0
- package/lib/typescript/src/controller/store.d.ts +90 -0
- package/lib/typescript/src/controller/store.d.ts.map +1 -0
- package/lib/typescript/src/core/address/country-data.d.ts +4 -0
- package/lib/typescript/src/core/address/country-data.d.ts.map +1 -0
- package/lib/typescript/src/core/address/country-name.d.ts +2 -0
- package/lib/typescript/src/core/address/country-name.d.ts.map +1 -0
- package/lib/typescript/src/core/address/country-names.generated.d.ts +2 -0
- package/lib/typescript/src/core/address/country-names.generated.d.ts.map +1 -0
- package/lib/typescript/src/core/address/engine.d.ts +97 -0
- package/lib/typescript/src/core/address/engine.d.ts.map +1 -0
- package/lib/typescript/src/core/address/form-state.d.ts +144 -0
- package/lib/typescript/src/core/address/form-state.d.ts.map +1 -0
- package/lib/typescript/src/core/address/places.d.ts +23 -0
- package/lib/typescript/src/core/address/places.d.ts.map +1 -0
- package/lib/typescript/src/core/address/suggest.d.ts +47 -0
- package/lib/typescript/src/core/address/suggest.d.ts.map +1 -0
- package/lib/typescript/src/core/address/use-suggestions.d.ts +3 -0
- package/lib/typescript/src/core/address/use-suggestions.d.ts.map +1 -0
- package/lib/typescript/src/core/payments/address-change.d.ts +52 -0
- package/lib/typescript/src/core/payments/address-change.d.ts.map +1 -0
- package/lib/typescript/src/core/payments/billing-merge.d.ts +39 -0
- package/lib/typescript/src/core/payments/billing-merge.d.ts.map +1 -0
- package/lib/typescript/src/core/payments/browser-info.d.ts +12 -0
- package/lib/typescript/src/core/payments/browser-info.d.ts.map +1 -0
- package/lib/typescript/src/core/payments/bt.d.ts +55 -0
- package/lib/typescript/src/core/payments/bt.d.ts.map +1 -0
- package/lib/typescript/src/core/payments/currency.d.ts +7 -0
- package/lib/typescript/src/core/payments/currency.d.ts.map +1 -0
- package/lib/typescript/src/core/payments/detail.d.ts +53 -0
- package/lib/typescript/src/core/payments/detail.d.ts.map +1 -0
- package/lib/typescript/src/core/payments/errors.d.ts +62 -0
- package/lib/typescript/src/core/payments/errors.d.ts.map +1 -0
- package/lib/typescript/src/core/payments/mint.d.ts +74 -0
- package/lib/typescript/src/core/payments/mint.d.ts.map +1 -0
- package/lib/typescript/src/core/payments/plan.d.ts +69 -0
- package/lib/typescript/src/core/payments/plan.d.ts.map +1 -0
- package/lib/typescript/src/core/payments/refusals.d.ts +12 -0
- package/lib/typescript/src/core/payments/refusals.d.ts.map +1 -0
- package/lib/typescript/src/core/payments/secure-fields.d.ts +33 -0
- package/lib/typescript/src/core/payments/secure-fields.d.ts.map +1 -0
- package/lib/typescript/src/core/payments/tax-id-catalog.d.ts +481 -0
- package/lib/typescript/src/core/payments/tax-id-catalog.d.ts.map +1 -0
- package/lib/typescript/src/core/payments/wallet-contact.d.ts +40 -0
- package/lib/typescript/src/core/payments/wallet-contact.d.ts.map +1 -0
- package/lib/typescript/src/elements/address.d.ts +55 -0
- package/lib/typescript/src/elements/address.d.ts.map +1 -0
- package/lib/typescript/src/elements/branding.d.ts +18 -0
- package/lib/typescript/src/elements/branding.d.ts.map +1 -0
- package/lib/typescript/src/elements/card-fields/context.d.ts +67 -0
- package/lib/typescript/src/elements/card-fields/context.d.ts.map +1 -0
- package/lib/typescript/src/elements/card-fields/fields.d.ts +15 -0
- package/lib/typescript/src/elements/card-fields/fields.d.ts.map +1 -0
- package/lib/typescript/src/elements/card-fields/index.d.ts +21 -0
- package/lib/typescript/src/elements/card-fields/index.d.ts.map +1 -0
- package/lib/typescript/src/elements/card.d.ts +21 -0
- package/lib/typescript/src/elements/card.d.ts.map +1 -0
- package/lib/typescript/src/elements/email.d.ts +31 -0
- package/lib/typescript/src/elements/email.d.ts.map +1 -0
- package/lib/typescript/src/elements/payment/declared-fields.d.ts +43 -0
- package/lib/typescript/src/elements/payment/declared-fields.d.ts.map +1 -0
- package/lib/typescript/src/elements/payment/index.d.ts +37 -0
- package/lib/typescript/src/elements/payment/index.d.ts.map +1 -0
- package/lib/typescript/src/elements/payment/wallet.d.ts +39 -0
- package/lib/typescript/src/elements/payment/wallet.d.ts.map +1 -0
- package/lib/typescript/src/elements/tax-id.d.ts +41 -0
- package/lib/typescript/src/elements/tax-id.d.ts.map +1 -0
- package/lib/typescript/src/i18n/catalogs.d.ts +7 -0
- package/lib/typescript/src/i18n/catalogs.d.ts.map +1 -0
- package/lib/typescript/src/i18n/index.d.ts +17 -0
- package/lib/typescript/src/i18n/index.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +42 -0
- package/lib/typescript/src/index.d.ts.map +1 -0
- package/lib/typescript/src/namespace.d.ts +36 -0
- package/lib/typescript/src/namespace.d.ts.map +1 -0
- package/lib/typescript/src/native/index.d.ts +62 -0
- package/lib/typescript/src/native/index.d.ts.map +1 -0
- package/lib/typescript/src/provider.d.ts +37 -0
- package/lib/typescript/src/provider.d.ts.map +1 -0
- package/lib/typescript/src/specs/NativeWhopAddressSuggestions.d.ts +13 -0
- package/lib/typescript/src/specs/NativeWhopAddressSuggestions.d.ts.map +1 -0
- package/lib/typescript/src/specs/NativeWhopAuthSession.d.ts +20 -0
- package/lib/typescript/src/specs/NativeWhopAuthSession.d.ts.map +1 -0
- package/lib/typescript/src/specs/NativeWhopPlatformPay.d.ts +24 -0
- package/lib/typescript/src/specs/NativeWhopPlatformPay.d.ts.map +1 -0
- package/lib/typescript/src/specs/WhopPayButtonNativeComponent.d.ts +21 -0
- package/lib/typescript/src/specs/WhopPayButtonNativeComponent.d.ts.map +1 -0
- package/lib/typescript/src/theme/appearance.d.ts +71 -0
- package/lib/typescript/src/theme/appearance.d.ts.map +1 -0
- package/lib/typescript/src/theme/provider.d.ts +11 -0
- package/lib/typescript/src/theme/provider.d.ts.map +1 -0
- package/lib/typescript/src/theme/resolve.d.ts +19 -0
- package/lib/typescript/src/theme/resolve.d.ts.map +1 -0
- package/lib/typescript/src/theme/scales.generated.d.ts +18 -0
- package/lib/typescript/src/theme/scales.generated.d.ts.map +1 -0
- package/lib/typescript/src/ui/element-frame.d.ts +32 -0
- package/lib/typescript/src/ui/element-frame.d.ts.map +1 -0
- package/lib/typescript/src/ui/payment-method-icon.d.ts +21 -0
- package/lib/typescript/src/ui/payment-method-icon.d.ts.map +1 -0
- package/lib/typescript/src/ui/primitives.d.ts +94 -0
- package/lib/typescript/src/ui/primitives.d.ts.map +1 -0
- package/lib/typescript/src/ui/select.d.ts +25 -0
- package/lib/typescript/src/ui/select.d.ts.map +1 -0
- package/lib/typescript/src/ui/suggestions.d.ts +15 -0
- package/lib/typescript/src/ui/suggestions.d.ts.map +1 -0
- package/lib/typescript/src/ui/whop-logo.d.ts +4 -0
- package/lib/typescript/src/ui/whop-logo.d.ts.map +1 -0
- package/package.json +121 -0
- package/scripts/check-swift.sh +27 -0
- package/scripts/codegen-shims.mjs +409 -0
- package/scripts/gen-country-names.mjs +58 -0
- package/scripts/gen-theme.mjs +124 -0
- package/scripts/gen-wordmark.mjs +68 -0
- package/scripts/mirror.mjs +112 -0
- package/src/api/client.ts +202 -0
- package/src/api/types.ts +166 -0
- package/src/controller/actions.ts +197 -0
- package/src/controller/store.ts +201 -0
- package/src/core/address/country-data.ts +927 -0
- package/src/core/address/country-name.ts +36 -0
- package/src/core/address/country-names.generated.ts +246 -0
- package/src/core/address/engine.ts +349 -0
- package/src/core/address/form-state.ts +479 -0
- package/src/core/address/places.ts +39 -0
- package/src/core/address/suggest.ts +153 -0
- package/src/core/address/use-suggestions.ts +37 -0
- package/src/core/payments/address-change.ts +121 -0
- package/src/core/payments/billing-merge.ts +91 -0
- package/src/core/payments/browser-info.ts +43 -0
- package/src/core/payments/bt.ts +176 -0
- package/src/core/payments/currency.ts +54 -0
- package/src/core/payments/detail.ts +204 -0
- package/src/core/payments/errors.ts +171 -0
- package/src/core/payments/mint.ts +130 -0
- package/src/core/payments/plan.ts +198 -0
- package/src/core/payments/refusals.ts +24 -0
- package/src/core/payments/secure-fields.ts +85 -0
- package/src/core/payments/tax-id-catalog.ts +320 -0
- package/src/core/payments/wallet-contact.ts +56 -0
- package/src/elements/address.tsx +570 -0
- package/src/elements/branding.tsx +87 -0
- package/src/elements/card-fields/context.tsx +310 -0
- package/src/elements/card-fields/fields.tsx +281 -0
- package/src/elements/card-fields/index.tsx +37 -0
- package/src/elements/card.tsx +101 -0
- package/src/elements/email.tsx +100 -0
- package/src/elements/payment/declared-fields.tsx +238 -0
- package/src/elements/payment/index.tsx +497 -0
- package/src/elements/payment/wallet.tsx +155 -0
- package/src/elements/tax-id.tsx +143 -0
- package/src/i18n/catalogs.ts +100 -0
- package/src/i18n/index.tsx +46 -0
- package/src/index.ts +68 -0
- package/src/namespace.tsx +231 -0
- package/src/native/index.ts +173 -0
- package/src/provider.tsx +76 -0
- package/src/specs/NativeWhopAddressSuggestions.ts +14 -0
- package/src/specs/NativeWhopAuthSession.ts +21 -0
- package/src/specs/NativeWhopPlatformPay.ts +25 -0
- package/src/specs/WhopPayButtonNativeComponent.ts +22 -0
- package/src/theme/appearance.ts +150 -0
- package/src/theme/provider.tsx +28 -0
- package/src/theme/resolve.ts +68 -0
- package/src/theme/scales.generated.ts +427 -0
- package/src/ui/element-frame.tsx +94 -0
- package/src/ui/payment-method-icon.tsx +55 -0
- package/src/ui/primitives.tsx +269 -0
- package/src/ui/select.tsx +255 -0
- package/src/ui/suggestions.tsx +69 -0
- package/src/ui/whop-logo.tsx +37 -0
|
@@ -0,0 +1,309 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useEffect, useRef, useState } from 'react';
|
|
4
|
+
import { StyleSheet, Text, View } from 'react-native';
|
|
5
|
+
import { CardExpirationDateElement, CardNumberElement as BtCardNumberElement, CardVerificationCodeElement } from '@basis-theory/react-native-elements';
|
|
6
|
+
import { useT } from "../../i18n/index.js";
|
|
7
|
+
import { alphaStep, step, useTheme } from "../../theme/provider.js";
|
|
8
|
+
import { ElementFrame } from "../../ui/element-frame.js";
|
|
9
|
+
import { FieldSkeleton, part, useFieldStyles } from "../../ui/primitives.js";
|
|
10
|
+
import { useCardComposed, useCardFields } from "./context.js";
|
|
11
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
/**
|
|
13
|
+
* Which corners a slot rounds depends on how the composing unit arranged it. A separately mounted
|
|
14
|
+
* field ignores the unit's layout and draws fully independent chrome, which is what the web
|
|
15
|
+
* element documents.
|
|
16
|
+
*/
|
|
17
|
+
function corners(slot, layout, standalone, radius) {
|
|
18
|
+
if (standalone) return {
|
|
19
|
+
borderRadius: radius
|
|
20
|
+
};
|
|
21
|
+
if (layout === 'compact') {
|
|
22
|
+
if (slot === 'number') return {
|
|
23
|
+
borderTopLeftRadius: radius,
|
|
24
|
+
borderBottomLeftRadius: radius
|
|
25
|
+
};
|
|
26
|
+
if (slot === 'cvc') return {
|
|
27
|
+
borderTopRightRadius: radius,
|
|
28
|
+
borderBottomRightRadius: radius
|
|
29
|
+
};
|
|
30
|
+
return {};
|
|
31
|
+
}
|
|
32
|
+
if (slot === 'number') return {
|
|
33
|
+
borderTopLeftRadius: radius,
|
|
34
|
+
borderTopRightRadius: radius
|
|
35
|
+
};
|
|
36
|
+
if (slot === 'expiry') return {
|
|
37
|
+
borderBottomLeftRadius: radius
|
|
38
|
+
};
|
|
39
|
+
return {
|
|
40
|
+
borderBottomRightRadius: radius
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
function SlotShell({
|
|
44
|
+
slot,
|
|
45
|
+
label,
|
|
46
|
+
error,
|
|
47
|
+
focused,
|
|
48
|
+
children,
|
|
49
|
+
trailing,
|
|
50
|
+
partName
|
|
51
|
+
}) {
|
|
52
|
+
const t = useT();
|
|
53
|
+
const s = useFieldStyles();
|
|
54
|
+
const theme = s.theme;
|
|
55
|
+
const unit = useCardFields();
|
|
56
|
+
const standalone = !useCardComposed();
|
|
57
|
+
const invalid = Boolean(error);
|
|
58
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
59
|
+
style: {
|
|
60
|
+
gap: theme.tokens.spacing
|
|
61
|
+
},
|
|
62
|
+
children: [standalone ? /*#__PURE__*/_jsx(Text, {
|
|
63
|
+
style: [s.label, part(theme, 'whop-Label')],
|
|
64
|
+
children: label
|
|
65
|
+
}) : null, /*#__PURE__*/_jsxs(View, {
|
|
66
|
+
style: [s.box({
|
|
67
|
+
focused,
|
|
68
|
+
invalid,
|
|
69
|
+
disabled: false
|
|
70
|
+
}), corners(slot, unit.layout, standalone, theme.tokens.radius), styles.row, part(theme, 'whop-Input'), focused ? part(theme, 'whop-InputFocused') : null, invalid ? part(theme, 'whop-InputInvalid') : null, part(theme, partName)],
|
|
71
|
+
children: [/*#__PURE__*/_jsx(View, {
|
|
72
|
+
style: styles.grow,
|
|
73
|
+
children: children
|
|
74
|
+
}), trailing]
|
|
75
|
+
}), invalid ? /*#__PURE__*/_jsx(Text, {
|
|
76
|
+
style: [s.error, part(theme, 'whop-ErrorText')],
|
|
77
|
+
children: error === 'incomplete' ? t('Complete this field') : t("That doesn't look right")
|
|
78
|
+
}) : null]
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/** The Basis Theory element owns its own text; the chrome around it is ours. */
|
|
83
|
+
function useBtInputStyle() {
|
|
84
|
+
const s = useFieldStyles();
|
|
85
|
+
return {
|
|
86
|
+
color: s.input.color,
|
|
87
|
+
fontSize: s.input.fontSize,
|
|
88
|
+
fontFamily: s.input.fontFamily,
|
|
89
|
+
height: s.theme.tokens.controlHeight - 2,
|
|
90
|
+
padding: 0
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
function useSlot(assign) {
|
|
94
|
+
const unit = useCardFields();
|
|
95
|
+
const [focused, setFocused] = useState(false);
|
|
96
|
+
const btRef = useRef(null);
|
|
97
|
+
|
|
98
|
+
// The Basis Theory ref settles after the component's own first commit, so assigning on every
|
|
99
|
+
// render is what keeps the unit's handle live across a re-render.
|
|
100
|
+
useEffect(() => {
|
|
101
|
+
assign(unit, btRef.current);
|
|
102
|
+
});
|
|
103
|
+
return {
|
|
104
|
+
unit,
|
|
105
|
+
btRef,
|
|
106
|
+
focused,
|
|
107
|
+
setFocused,
|
|
108
|
+
ready: Boolean(unit.bt) || Boolean(unit.loadError),
|
|
109
|
+
error: unit.loadError ? {
|
|
110
|
+
message: unit.loadError,
|
|
111
|
+
code: 'CARD_TOKENIZER_UNAVAILABLE'
|
|
112
|
+
} : null
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
export function CardNumberElement({
|
|
116
|
+
style,
|
|
117
|
+
fallback,
|
|
118
|
+
onReady,
|
|
119
|
+
onError
|
|
120
|
+
}) {
|
|
121
|
+
const t = useT();
|
|
122
|
+
const theme = useTheme();
|
|
123
|
+
const inputStyle = useBtInputStyle();
|
|
124
|
+
const {
|
|
125
|
+
unit,
|
|
126
|
+
btRef,
|
|
127
|
+
focused,
|
|
128
|
+
setFocused,
|
|
129
|
+
ready,
|
|
130
|
+
error
|
|
131
|
+
} = useSlot((u, ref) => {
|
|
132
|
+
u.refs.current.number = ref;
|
|
133
|
+
});
|
|
134
|
+
return /*#__PURE__*/_jsx(ElementFrame, {
|
|
135
|
+
style: style,
|
|
136
|
+
fallback: fallback,
|
|
137
|
+
skeleton: /*#__PURE__*/_jsx(FieldSkeleton, {}),
|
|
138
|
+
ready: ready,
|
|
139
|
+
error: error,
|
|
140
|
+
onReady: onReady,
|
|
141
|
+
onError: onError,
|
|
142
|
+
children: /*#__PURE__*/_jsx(SlotShell, {
|
|
143
|
+
slot: "number",
|
|
144
|
+
label: t('Card number'),
|
|
145
|
+
error: unit.errors.number,
|
|
146
|
+
focused: focused,
|
|
147
|
+
partName: "whop-CardNumberField",
|
|
148
|
+
trailing: /*#__PURE__*/_jsx(BrandArt, {
|
|
149
|
+
brand: unit.brand
|
|
150
|
+
}),
|
|
151
|
+
children: /*#__PURE__*/_jsx(BtCardNumberElement, {
|
|
152
|
+
btRef: btRef,
|
|
153
|
+
placeholder: "1234 1234 1234 1234",
|
|
154
|
+
placeholderTextColor: alphaStep(theme.gray, 10),
|
|
155
|
+
style: inputStyle,
|
|
156
|
+
onFocus: () => setFocused(true),
|
|
157
|
+
onBlur: () => setFocused(false),
|
|
158
|
+
onChange: event => unit.report('number', {
|
|
159
|
+
complete: event.complete,
|
|
160
|
+
brand: event.brand,
|
|
161
|
+
funding: event.binInfo?.funding ?? null
|
|
162
|
+
})
|
|
163
|
+
})
|
|
164
|
+
})
|
|
165
|
+
});
|
|
166
|
+
}
|
|
167
|
+
export function CardExpiryElement({
|
|
168
|
+
style,
|
|
169
|
+
fallback,
|
|
170
|
+
onReady,
|
|
171
|
+
onError
|
|
172
|
+
}) {
|
|
173
|
+
const t = useT();
|
|
174
|
+
const theme = useTheme();
|
|
175
|
+
const inputStyle = useBtInputStyle();
|
|
176
|
+
const {
|
|
177
|
+
unit,
|
|
178
|
+
btRef,
|
|
179
|
+
focused,
|
|
180
|
+
setFocused,
|
|
181
|
+
ready,
|
|
182
|
+
error
|
|
183
|
+
} = useSlot((u, ref) => {
|
|
184
|
+
u.refs.current.expiryDate = ref;
|
|
185
|
+
});
|
|
186
|
+
return /*#__PURE__*/_jsx(ElementFrame, {
|
|
187
|
+
style: style,
|
|
188
|
+
fallback: fallback,
|
|
189
|
+
skeleton: /*#__PURE__*/_jsx(FieldSkeleton, {}),
|
|
190
|
+
ready: ready,
|
|
191
|
+
error: error,
|
|
192
|
+
onReady: onReady,
|
|
193
|
+
onError: onError,
|
|
194
|
+
children: /*#__PURE__*/_jsx(SlotShell, {
|
|
195
|
+
slot: "expiry",
|
|
196
|
+
label: t('Expiration'),
|
|
197
|
+
error: unit.errors.expiry,
|
|
198
|
+
focused: focused,
|
|
199
|
+
partName: "whop-CardExpiryField",
|
|
200
|
+
children: /*#__PURE__*/_jsx(CardExpirationDateElement, {
|
|
201
|
+
btRef: btRef,
|
|
202
|
+
placeholder: "MM / YY",
|
|
203
|
+
placeholderTextColor: alphaStep(theme.gray, 10),
|
|
204
|
+
style: inputStyle,
|
|
205
|
+
onFocus: () => setFocused(true),
|
|
206
|
+
onBlur: () => setFocused(false),
|
|
207
|
+
onChange: event => unit.report('expiry', {
|
|
208
|
+
complete: event.complete
|
|
209
|
+
})
|
|
210
|
+
})
|
|
211
|
+
})
|
|
212
|
+
});
|
|
213
|
+
}
|
|
214
|
+
export function CardCvcElement({
|
|
215
|
+
style,
|
|
216
|
+
fallback,
|
|
217
|
+
onReady,
|
|
218
|
+
onError
|
|
219
|
+
}) {
|
|
220
|
+
const t = useT();
|
|
221
|
+
const theme = useTheme();
|
|
222
|
+
const inputStyle = useBtInputStyle();
|
|
223
|
+
const {
|
|
224
|
+
unit,
|
|
225
|
+
btRef,
|
|
226
|
+
focused,
|
|
227
|
+
setFocused,
|
|
228
|
+
ready,
|
|
229
|
+
error
|
|
230
|
+
} = useSlot((u, ref) => {
|
|
231
|
+
u.refs.current.cvc = ref;
|
|
232
|
+
});
|
|
233
|
+
return /*#__PURE__*/_jsx(ElementFrame, {
|
|
234
|
+
style: style,
|
|
235
|
+
fallback: fallback,
|
|
236
|
+
skeleton: /*#__PURE__*/_jsx(FieldSkeleton, {}),
|
|
237
|
+
ready: ready,
|
|
238
|
+
error: error,
|
|
239
|
+
onReady: onReady,
|
|
240
|
+
onError: onError,
|
|
241
|
+
children: /*#__PURE__*/_jsx(SlotShell, {
|
|
242
|
+
slot: "cvc",
|
|
243
|
+
label: t('Security code'),
|
|
244
|
+
error: unit.errors.cvc,
|
|
245
|
+
focused: focused,
|
|
246
|
+
partName: "whop-CardCvcField",
|
|
247
|
+
children: /*#__PURE__*/_jsx(CardVerificationCodeElement, {
|
|
248
|
+
btRef: btRef
|
|
249
|
+
// amex prints a four-digit code; every other network prints three.
|
|
250
|
+
,
|
|
251
|
+
placeholder: unit.brand === 'american-express' ? '1234' : '123',
|
|
252
|
+
placeholderTextColor: alphaStep(theme.gray, 10),
|
|
253
|
+
style: inputStyle,
|
|
254
|
+
onFocus: () => setFocused(true),
|
|
255
|
+
onBlur: () => setFocused(false),
|
|
256
|
+
onChange: event => unit.report('cvc', {
|
|
257
|
+
complete: event.complete
|
|
258
|
+
})
|
|
259
|
+
})
|
|
260
|
+
})
|
|
261
|
+
});
|
|
262
|
+
}
|
|
263
|
+
function BrandArt({
|
|
264
|
+
brand
|
|
265
|
+
}) {
|
|
266
|
+
const theme = useTheme();
|
|
267
|
+
if (!brand || brand === 'unknown') return null;
|
|
268
|
+
const label = BRAND_LABELS[brand] ?? brand.slice(0, 4).toUpperCase();
|
|
269
|
+
return /*#__PURE__*/_jsx(View, {
|
|
270
|
+
style: {
|
|
271
|
+
paddingHorizontal: 6,
|
|
272
|
+
paddingVertical: 2,
|
|
273
|
+
borderRadius: 4,
|
|
274
|
+
backgroundColor: alphaStep(theme.gray, 3)
|
|
275
|
+
},
|
|
276
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
277
|
+
style: {
|
|
278
|
+
fontSize: 11,
|
|
279
|
+
fontWeight: '600',
|
|
280
|
+
color: step(theme.gray, 11)
|
|
281
|
+
},
|
|
282
|
+
children: label
|
|
283
|
+
})
|
|
284
|
+
});
|
|
285
|
+
}
|
|
286
|
+
const BRAND_LABELS = {
|
|
287
|
+
visa: 'VISA',
|
|
288
|
+
mastercard: 'MC',
|
|
289
|
+
'american-express': 'AMEX',
|
|
290
|
+
discover: 'DISC',
|
|
291
|
+
'diners-club': 'DINERS',
|
|
292
|
+
jcb: 'JCB',
|
|
293
|
+
unionpay: 'UP',
|
|
294
|
+
maestro: 'MAESTRO',
|
|
295
|
+
elo: 'ELO',
|
|
296
|
+
mir: 'MIR',
|
|
297
|
+
hiper: 'HIPER',
|
|
298
|
+
hipercard: 'HIPER'
|
|
299
|
+
};
|
|
300
|
+
const styles = StyleSheet.create({
|
|
301
|
+
row: {
|
|
302
|
+
flexDirection: 'row',
|
|
303
|
+
alignItems: 'center'
|
|
304
|
+
},
|
|
305
|
+
grow: {
|
|
306
|
+
flex: 1
|
|
307
|
+
}
|
|
308
|
+
});
|
|
309
|
+
//# sourceMappingURL=fields.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","useState","StyleSheet","Text","View","CardExpirationDateElement","CardNumberElement","BtCardNumberElement","CardVerificationCodeElement","useT","alphaStep","step","useTheme","ElementFrame","FieldSkeleton","part","useFieldStyles","useCardComposed","useCardFields","jsx","_jsx","jsxs","_jsxs","corners","slot","layout","standalone","radius","borderRadius","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","SlotShell","label","error","focused","children","trailing","partName","t","s","theme","unit","invalid","Boolean","style","gap","tokens","spacing","box","disabled","styles","row","grow","useBtInputStyle","color","input","fontSize","fontFamily","height","controlHeight","padding","useSlot","assign","setFocused","btRef","current","ready","bt","loadError","message","code","fallback","onReady","onError","inputStyle","u","ref","refs","number","skeleton","errors","BrandArt","brand","placeholder","placeholderTextColor","gray","onFocus","onBlur","onChange","event","report","complete","funding","binInfo","CardExpiryElement","expiryDate","expiry","CardCvcElement","cvc","BRAND_LABELS","slice","toUpperCase","paddingHorizontal","paddingVertical","backgroundColor","fontWeight","visa","mastercard","discover","jcb","unionpay","maestro","elo","mir","hiper","hipercard","create","flexDirection","alignItems","flex"],"sourceRoot":"../../../../src","sources":["elements/card-fields/fields.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { CardFieldsProvider, useCardCollection } from "./context.js";
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
/**
|
|
6
|
+
* Three separately mountable, PCI-isolated card fields for custom layouts. Place each field where
|
|
7
|
+
* the design wants it, enable the pay button from `onChange`, and confirm with
|
|
8
|
+
* `payments.createConfirmationToken()`.
|
|
9
|
+
*/
|
|
10
|
+
export function CardFields({
|
|
11
|
+
publicKey,
|
|
12
|
+
layout = 'stacked',
|
|
13
|
+
children,
|
|
14
|
+
onChange
|
|
15
|
+
}) {
|
|
16
|
+
return /*#__PURE__*/_jsxs(CardFieldsProvider, {
|
|
17
|
+
publicKey: publicKey,
|
|
18
|
+
layout: layout,
|
|
19
|
+
onChange: onChange,
|
|
20
|
+
children: [/*#__PURE__*/_jsx(CardFieldsCollection, {}), children]
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/** Registration lives in a child so it runs under the provider it registers for. */
|
|
25
|
+
function CardFieldsCollection() {
|
|
26
|
+
useCardCollection('cardFields');
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
export { CardCvcElement, CardExpiryElement, CardNumberElement } from "./fields.js";
|
|
30
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["CardFieldsProvider","useCardCollection","jsx","_jsx","jsxs","_jsxs","CardFields","publicKey","layout","children","onChange","CardFieldsCollection","CardCvcElement","CardExpiryElement","CardNumberElement"],"sourceRoot":"../../../../src","sources":["elements/card-fields/index.tsx"],"mappings":";;AAEA,SAASA,kBAAkB,EAAgCC,iBAAiB,QAAQ,cAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAYhG;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAAC;EAAEC,SAAS;EAAEC,MAAM,GAAG,SAAS;EAAEC,QAAQ;EAAEC;AAA0B,CAAC,EAAE;EAClG,oBACCL,KAAA,CAACL,kBAAkB;IAACO,SAAS,EAAEA,SAAU;IAACC,MAAM,EAAEA,MAAO;IAACE,QAAQ,EAAEA,QAAS;IAAAD,QAAA,gBAC5EN,IAAA,CAACQ,oBAAoB,IAAE,CAAC,EACvBF,QAAQ;EAAA,CACU,CAAC;AAEvB;;AAEA;AACA,SAASE,oBAAoBA,CAAA,EAAG;EAC/BV,iBAAiB,CAAC,YAAY,CAAC;EAC/B,OAAO,IAAI;AACZ;AAEA,SAASW,cAAc,EAAEC,iBAAiB,EAAEC,iBAAiB,QAAQ,aAAU","ignoreList":[]}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { StyleSheet, View } from 'react-native';
|
|
4
|
+
import { useTheme } from "../theme/provider.js";
|
|
5
|
+
import { part } from "../ui/primitives.js";
|
|
6
|
+
import { CardComposed, CardFieldsProvider, useCardCollection } from "./card-fields/context.js";
|
|
7
|
+
import { CardCvcElement, CardExpiryElement, CardNumberElement } from "./card-fields/fields.js";
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
+
/**
|
|
10
|
+
* Prearranged fields for card number, expiration, and security code. Card numbers stay inside the
|
|
11
|
+
* PCI-isolated Basis Theory components; this element only arranges them.
|
|
12
|
+
*/
|
|
13
|
+
export function CardElement({
|
|
14
|
+
layout = 'stacked',
|
|
15
|
+
style,
|
|
16
|
+
fallback,
|
|
17
|
+
onChange,
|
|
18
|
+
onReady,
|
|
19
|
+
onError
|
|
20
|
+
}) {
|
|
21
|
+
return /*#__PURE__*/_jsx(CardFieldsProvider, {
|
|
22
|
+
layout: layout,
|
|
23
|
+
onChange: onChange,
|
|
24
|
+
children: /*#__PURE__*/_jsxs(CardComposed, {
|
|
25
|
+
children: [/*#__PURE__*/_jsx(CardCollection, {}), /*#__PURE__*/_jsx(CardGroup, {
|
|
26
|
+
layout: layout,
|
|
27
|
+
style: style,
|
|
28
|
+
fallback: fallback,
|
|
29
|
+
onReady: onReady,
|
|
30
|
+
onError: onError
|
|
31
|
+
})]
|
|
32
|
+
})
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
function CardCollection() {
|
|
36
|
+
useCardCollection('card');
|
|
37
|
+
return null;
|
|
38
|
+
}
|
|
39
|
+
function CardGroup({
|
|
40
|
+
layout,
|
|
41
|
+
style,
|
|
42
|
+
fallback,
|
|
43
|
+
onReady,
|
|
44
|
+
onError
|
|
45
|
+
}) {
|
|
46
|
+
const theme = useTheme();
|
|
47
|
+
|
|
48
|
+
// Every field draws its own rounded border, so the group needs a real gap between them: flush
|
|
49
|
+
// fields read as one mis-rendered box rather than three inputs.
|
|
50
|
+
const seam = {
|
|
51
|
+
gap: theme.tokens.spacing * 2
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
// Only the number reports ready for the group; the other two settle with it, and reporting all
|
|
55
|
+
// three would make the grouped latch wait on three identical signals.
|
|
56
|
+
if (layout === 'compact') {
|
|
57
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
58
|
+
style: [styles.row, seam, part(theme, 'whop-CardFieldGroup'), style],
|
|
59
|
+
children: [/*#__PURE__*/_jsx(View, {
|
|
60
|
+
style: styles.number,
|
|
61
|
+
children: /*#__PURE__*/_jsx(CardNumberElement, {
|
|
62
|
+
fallback: fallback,
|
|
63
|
+
onReady: onReady,
|
|
64
|
+
onError: onError
|
|
65
|
+
})
|
|
66
|
+
}), /*#__PURE__*/_jsx(View, {
|
|
67
|
+
style: styles.short,
|
|
68
|
+
children: /*#__PURE__*/_jsx(CardExpiryElement, {})
|
|
69
|
+
}), /*#__PURE__*/_jsx(View, {
|
|
70
|
+
style: styles.short,
|
|
71
|
+
children: /*#__PURE__*/_jsx(CardCvcElement, {})
|
|
72
|
+
})]
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
76
|
+
style: [seam, part(theme, 'whop-CardFieldGroup'), style],
|
|
77
|
+
children: [/*#__PURE__*/_jsx(CardNumberElement, {
|
|
78
|
+
fallback: fallback,
|
|
79
|
+
onReady: onReady,
|
|
80
|
+
onError: onError
|
|
81
|
+
}), /*#__PURE__*/_jsxs(View, {
|
|
82
|
+
style: [styles.row, seam],
|
|
83
|
+
children: [/*#__PURE__*/_jsx(View, {
|
|
84
|
+
style: styles.grow,
|
|
85
|
+
children: /*#__PURE__*/_jsx(CardExpiryElement, {})
|
|
86
|
+
}), /*#__PURE__*/_jsx(View, {
|
|
87
|
+
style: styles.grow,
|
|
88
|
+
children: /*#__PURE__*/_jsx(CardCvcElement, {})
|
|
89
|
+
})]
|
|
90
|
+
})]
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
const styles = StyleSheet.create({
|
|
94
|
+
row: {
|
|
95
|
+
flexDirection: 'row'
|
|
96
|
+
},
|
|
97
|
+
grow: {
|
|
98
|
+
flex: 1
|
|
99
|
+
},
|
|
100
|
+
number: {
|
|
101
|
+
flex: 2
|
|
102
|
+
},
|
|
103
|
+
short: {
|
|
104
|
+
flex: 1
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
//# sourceMappingURL=card.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["StyleSheet","View","useTheme","part","CardComposed","CardFieldsProvider","useCardCollection","CardCvcElement","CardExpiryElement","CardNumberElement","jsx","_jsx","jsxs","_jsxs","CardElement","layout","style","fallback","onChange","onReady","onError","children","CardCollection","CardGroup","theme","seam","gap","tokens","spacing","styles","row","number","short","grow","create","flexDirection","flex"],"sourceRoot":"../../../src","sources":["elements/card.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useEffect, useRef, useState } from 'react';
|
|
4
|
+
import { useT } from "../i18n/index.js";
|
|
5
|
+
import { usePaymentsStore } from "../namespace.js";
|
|
6
|
+
import { ElementFrame } from "../ui/element-frame.js";
|
|
7
|
+
import { Field, FieldSkeleton } from "../ui/primitives.js";
|
|
8
|
+
|
|
9
|
+
/** The same plausibility bar the web element applies — a shape check, never a deliverability one. */
|
|
10
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
+
const PLAUSIBLE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
|
|
12
|
+
/**
|
|
13
|
+
* Collects the buyer's email and feeds it to `createConfirmationToken()` while mounted. An explicit
|
|
14
|
+
* `billingDetails.email` still wins.
|
|
15
|
+
*
|
|
16
|
+
* Account recognition and code sign-in are not in this release, so no sign-in affordance renders —
|
|
17
|
+
* nothing appears that cannot work.
|
|
18
|
+
*/
|
|
19
|
+
export function EmailElement({
|
|
20
|
+
defaultValue = '',
|
|
21
|
+
label = true,
|
|
22
|
+
placeholder = '',
|
|
23
|
+
style,
|
|
24
|
+
fallback,
|
|
25
|
+
onChange,
|
|
26
|
+
onReady,
|
|
27
|
+
onError
|
|
28
|
+
}) {
|
|
29
|
+
const t = useT();
|
|
30
|
+
const store = usePaymentsStore();
|
|
31
|
+
const [value, setValue] = useState(defaultValue);
|
|
32
|
+
const [touched, setTouched] = useState(false);
|
|
33
|
+
const latestChange = useRef(onChange);
|
|
34
|
+
latestChange.current = onChange;
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
const email = value.trim();
|
|
37
|
+
const complete = PLAUSIBLE.test(email);
|
|
38
|
+
// Only a plausible address counts as collected. Publishing every keystroke meant a half-typed
|
|
39
|
+
// address read as an email the form had: the wallet sheet stopped asking for one, and the
|
|
40
|
+
// mint sent the fragment.
|
|
41
|
+
store.patch({
|
|
42
|
+
buyerEmail: complete ? email : ''
|
|
43
|
+
});
|
|
44
|
+
latestChange.current?.({
|
|
45
|
+
email,
|
|
46
|
+
complete
|
|
47
|
+
});
|
|
48
|
+
}, [value, store]);
|
|
49
|
+
|
|
50
|
+
// The value must not outlive the element. Left behind, an unmounted email element still answers
|
|
51
|
+
// for a form that no longer collects one.
|
|
52
|
+
useEffect(() => () => store.patch({
|
|
53
|
+
buyerEmail: ''
|
|
54
|
+
}), [store]);
|
|
55
|
+
const invalid = touched && value.trim().length > 0 && !PLAUSIBLE.test(value.trim());
|
|
56
|
+
return /*#__PURE__*/_jsx(ElementFrame, {
|
|
57
|
+
style: style,
|
|
58
|
+
fallback: fallback,
|
|
59
|
+
skeleton: /*#__PURE__*/_jsx(FieldSkeleton, {
|
|
60
|
+
label: label
|
|
61
|
+
}),
|
|
62
|
+
ready: true,
|
|
63
|
+
onReady: onReady,
|
|
64
|
+
onError: onError,
|
|
65
|
+
children: /*#__PURE__*/_jsx(Field, {
|
|
66
|
+
label: label ? t('Email') : undefined,
|
|
67
|
+
accessibilityLabel: t('Email'),
|
|
68
|
+
value: value,
|
|
69
|
+
onChangeText: setValue,
|
|
70
|
+
onBlur: () => setTouched(true),
|
|
71
|
+
placeholder: placeholder || 'you@example.com',
|
|
72
|
+
error: invalid ? t('Enter a valid email address') : undefined,
|
|
73
|
+
keyboardType: "email-address",
|
|
74
|
+
autoCapitalize: "none",
|
|
75
|
+
autoCorrect: false,
|
|
76
|
+
autoComplete: "email",
|
|
77
|
+
textContentType: "username",
|
|
78
|
+
inputMode: "email",
|
|
79
|
+
returnKeyType: "next",
|
|
80
|
+
partName: "whop-Input"
|
|
81
|
+
})
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
//# sourceMappingURL=email.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","useState","useT","usePaymentsStore","ElementFrame","Field","FieldSkeleton","jsx","_jsx","PLAUSIBLE","EmailElement","defaultValue","label","placeholder","style","fallback","onChange","onReady","onError","t","store","value","setValue","touched","setTouched","latestChange","current","email","trim","complete","test","patch","buyerEmail","invalid","length","skeleton","ready","children","undefined","accessibilityLabel","onChangeText","onBlur","error","keyboardType","autoCapitalize","autoCorrect","autoComplete","textContentType","inputMode","returnKeyType","partName"],"sourceRoot":"../../../src","sources":["elements/email.tsx"],"mappings":"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","ignoreList":[]}
|