@retinalabsllc/zairusjs 14.0.80 → 14.0.90
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/dist/index.d.mts +8 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.js +128 -5
- package/dist/index.mjs +127 -5
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -900,4 +900,11 @@ interface UniversalCardActionPageProps {
|
|
|
900
900
|
}
|
|
901
901
|
declare const UniversalCardActionPage: React.FC<UniversalCardActionPageProps>;
|
|
902
902
|
|
|
903
|
-
|
|
903
|
+
interface CardCreationDialogProps {
|
|
904
|
+
isOpen: boolean;
|
|
905
|
+
onClose: () => void;
|
|
906
|
+
onSuccess: () => void;
|
|
907
|
+
}
|
|
908
|
+
declare const CardCreationDialog: React.FC<CardCreationDialogProps>;
|
|
909
|
+
|
|
910
|
+
export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, CardCreationDialog, type CardCreationDialogProps, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingFeature2, type PricingPlan, type PricingTab, type ProjectItem, type ReferralProfile, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, type TierOption, UniversalCardActionPage, type UniversalCardActionPageProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, type UniversalReferralItem, UniversalReferralPage, type UniversalReferralPageProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -900,4 +900,11 @@ interface UniversalCardActionPageProps {
|
|
|
900
900
|
}
|
|
901
901
|
declare const UniversalCardActionPage: React.FC<UniversalCardActionPageProps>;
|
|
902
902
|
|
|
903
|
-
|
|
903
|
+
interface CardCreationDialogProps {
|
|
904
|
+
isOpen: boolean;
|
|
905
|
+
onClose: () => void;
|
|
906
|
+
onSuccess: () => void;
|
|
907
|
+
}
|
|
908
|
+
declare const CardCreationDialog: React.FC<CardCreationDialogProps>;
|
|
909
|
+
|
|
910
|
+
export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, CardCreationDialog, type CardCreationDialogProps, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingFeature2, type PricingPlan, type PricingTab, type ProjectItem, type ReferralProfile, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, type TierOption, UniversalCardActionPage, type UniversalCardActionPageProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, type UniversalReferralItem, UniversalReferralPage, type UniversalReferralPageProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };
|
package/dist/index.js
CHANGED
|
@@ -32,6 +32,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
32
32
|
var index_exports = {};
|
|
33
33
|
__export(index_exports, {
|
|
34
34
|
AppBento2: () => AppBento2,
|
|
35
|
+
CardCreationDialog: () => CardCreationDialog,
|
|
35
36
|
ConsultantShowcase: () => ConsultantShowcase,
|
|
36
37
|
ContentGridBlock: () => ContentGridBlock,
|
|
37
38
|
Faq: () => Faq,
|
|
@@ -232,8 +233,7 @@ var ThreeDActionButton = ({
|
|
|
232
233
|
disabled = false,
|
|
233
234
|
isLoading = false,
|
|
234
235
|
children,
|
|
235
|
-
className = ""
|
|
236
|
-
ariaLabel
|
|
236
|
+
className = ""
|
|
237
237
|
}) => {
|
|
238
238
|
const isInteractionDisabled = disabled || isLoading;
|
|
239
239
|
const baseShadow = `
|
|
@@ -1120,7 +1120,6 @@ var UniversalProfileSettings = ({
|
|
|
1120
1120
|
{
|
|
1121
1121
|
type: "button",
|
|
1122
1122
|
onClick: () => setIsPinModalOpen(true),
|
|
1123
|
-
"aria-label": "PIN Settings",
|
|
1124
1123
|
className: "w-9 h-9 flex items-center justify-center border border-neutral-200 rounded-full text-black hover:bg-neutral-50 transition-colors outline-none"
|
|
1125
1124
|
},
|
|
1126
1125
|
/* @__PURE__ */ import_react17.default.createElement(import_react18.HugeiconsIcon, { icon: import_core_free_icons4.LockKeyIcon, size: 17, className: "text-black" })
|
|
@@ -2167,8 +2166,7 @@ var UniversalCardPage = ({
|
|
|
2167
2166
|
onClick: () => {
|
|
2168
2167
|
if (onCreateCard) onCreateCard();
|
|
2169
2168
|
},
|
|
2170
|
-
className: "w-
|
|
2171
|
-
"aria-label": "Create New Card"
|
|
2169
|
+
className: "w-9 h-9 rounded-full bg-white flex items-center justify-center text-neutral-500 hover:text-black transition-colors shrink-0 outline-none"
|
|
2172
2170
|
},
|
|
2173
2171
|
/* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons12.PlusSignIcon, size: 18 })
|
|
2174
2172
|
)), /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center" }, /* @__PURE__ */ import_react33.default.createElement(
|
|
@@ -4440,9 +4438,134 @@ var UniversalCardActionPage = ({
|
|
|
4440
4438
|
}
|
|
4441
4439
|
));
|
|
4442
4440
|
};
|
|
4441
|
+
|
|
4442
|
+
// src/components/CardCreationDialog.tsx
|
|
4443
|
+
var import_react75 = __toESM(require("react"));
|
|
4444
|
+
var import_axios2 = __toESM(require("axios"));
|
|
4445
|
+
var import_react_hot_toast11 = __toESM(require("react-hot-toast"));
|
|
4446
|
+
var import_react76 = require("@hugeicons/react");
|
|
4447
|
+
var import_core_free_icons26 = require("@hugeicons/core-free-icons");
|
|
4448
|
+
var CheckIcon3 = ({ className = "" }) => /* @__PURE__ */ import_react75.default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react75.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "black" }), /* @__PURE__ */ import_react75.default.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
4449
|
+
var CrossIcon3 = ({ className = "" }) => /* @__PURE__ */ import_react75.default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react75.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "#F5F5F5" }), /* @__PURE__ */ import_react75.default.createElement("path", { d: "M15 9L9 15M9 9l6 6", stroke: "#D4D4D4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
4450
|
+
var formatTierName2 = (name) => {
|
|
4451
|
+
if (!name) return "";
|
|
4452
|
+
return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
|
|
4453
|
+
};
|
|
4454
|
+
var CardCreationDialog = ({ isOpen, onClose, onSuccess }) => {
|
|
4455
|
+
const [step, setStep] = (0, import_react75.useState)("INPUT");
|
|
4456
|
+
const [activationCode, setActivationCode] = (0, import_react75.useState)("");
|
|
4457
|
+
const [isProcessing, setIsProcessing] = (0, import_react75.useState)(false);
|
|
4458
|
+
const [cardConfig, setCardConfig] = (0, import_react75.useState)(null);
|
|
4459
|
+
const [useKyc, setUseKyc] = (0, import_react75.useState)(true);
|
|
4460
|
+
const [agreedToTerms, setAgreedToTerms] = (0, import_react75.useState)(false);
|
|
4461
|
+
if (!isOpen) return null;
|
|
4462
|
+
const handleVerifyCode = async (e) => {
|
|
4463
|
+
e.preventDefault();
|
|
4464
|
+
const code = activationCode.trim().toUpperCase();
|
|
4465
|
+
if (code.length < 3) return import_react_hot_toast11.default.error("Please enter a valid activation code.");
|
|
4466
|
+
setIsProcessing(true);
|
|
4467
|
+
try {
|
|
4468
|
+
const res = await import_axios2.default.post("/api/cards/create", { activation_code: code });
|
|
4469
|
+
if (res.data.success && res.data.payload?.config) {
|
|
4470
|
+
setCardConfig(res.data.payload.config);
|
|
4471
|
+
setStep("CONFIG");
|
|
4472
|
+
setUseKyc(true);
|
|
4473
|
+
setAgreedToTerms(false);
|
|
4474
|
+
}
|
|
4475
|
+
} catch (err) {
|
|
4476
|
+
import_react_hot_toast11.default.error(err.response?.data?.error || "Invalid or expired activation code.");
|
|
4477
|
+
} finally {
|
|
4478
|
+
setIsProcessing(false);
|
|
4479
|
+
}
|
|
4480
|
+
};
|
|
4481
|
+
const handleCreateCard = async () => {
|
|
4482
|
+
if (!agreedToTerms) return import_react_hot_toast11.default.error("You must agree to the Terms and Privacy Policy.");
|
|
4483
|
+
setIsProcessing(true);
|
|
4484
|
+
try {
|
|
4485
|
+
const res = await import_axios2.default.post("/api/beta/create", {
|
|
4486
|
+
activation_code: activationCode.trim().toUpperCase(),
|
|
4487
|
+
useKyc
|
|
4488
|
+
});
|
|
4489
|
+
if (res.data.success) {
|
|
4490
|
+
import_react_hot_toast11.default.success("Card created successfully!");
|
|
4491
|
+
onSuccess();
|
|
4492
|
+
}
|
|
4493
|
+
} catch (err) {
|
|
4494
|
+
import_react_hot_toast11.default.error(err.response?.data?.error || "Failed to create card. Please try again.");
|
|
4495
|
+
} finally {
|
|
4496
|
+
setIsProcessing(false);
|
|
4497
|
+
}
|
|
4498
|
+
};
|
|
4499
|
+
const currentPrice = cardConfig ? useKyc ? cardConfig.priceUSD : cardConfig.priceIfKycSkippedUSD : 0;
|
|
4500
|
+
const canSkipKyc = cardConfig?.canSkipKyc && cardConfig?.priceIfKycSkippedUSD !== void 0;
|
|
4501
|
+
const currentDescription = cardConfig ? useKyc ? cardConfig.description : cardConfig.descriptionIfKycSkipped : "";
|
|
4502
|
+
const currentLimit = cardConfig ? useKyc ? cardConfig.cardBalanceLimit : cardConfig.cardBalanceLimitIfKycSkipped : "-";
|
|
4503
|
+
const currentCashbackRate = cardConfig ? useKyc ? cardConfig.cashbackPercent : cardConfig.cashbackPercentIfKycSkipped : "-";
|
|
4504
|
+
const currentFxFeeObj = cardConfig ? useKyc ? cardConfig.fxFee : cardConfig.fxFeeIfKycSkipped : null;
|
|
4505
|
+
const fxFeeDisplay = currentFxFeeObj ? `$${currentFxFeeObj.fixedUSD} + ${currentFxFeeObj.percentage}%` : "Standard";
|
|
4506
|
+
const instantCashback = cardConfig?.instantCashbackAmount || 0;
|
|
4507
|
+
return /* @__PURE__ */ import_react75.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => !isProcessing && onClose() }), /* @__PURE__ */ import_react75.default.createElement("div", { className: "relative w-full max-w-md bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 max-h-[90vh]" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 relative z-10" }, /* @__PURE__ */ import_react75.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, step === "INPUT" ? "Activate Card" : "Configure Your Card"), /* @__PURE__ */ import_react75.default.createElement(
|
|
4508
|
+
"button",
|
|
4509
|
+
{
|
|
4510
|
+
disabled: isProcessing,
|
|
4511
|
+
onClick: onClose,
|
|
4512
|
+
className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50"
|
|
4513
|
+
},
|
|
4514
|
+
/* @__PURE__ */ import_react75.default.createElement(import_react76.HugeiconsIcon, { icon: import_core_free_icons26.CancelCircleIcon, size: 18 })
|
|
4515
|
+
)), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 pt-2 relative z-10" }, step === "INPUT" && /* @__PURE__ */ import_react75.default.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ import_react75.default.createElement("p", { className: "text-sm text-neutral-500 mb-6" }, "Enter your secure invitation or activation code to begin the provisioning process."), /* @__PURE__ */ import_react75.default.createElement("form", { onSubmit: handleVerifyCode, className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react75.default.createElement(
|
|
4516
|
+
TextInput,
|
|
4517
|
+
{
|
|
4518
|
+
label: "Activation Code",
|
|
4519
|
+
value: activationCode,
|
|
4520
|
+
onChange: (val) => setActivationCode(val.toUpperCase().replace(/[^A-Z0-9]/g, "")),
|
|
4521
|
+
placeholder: "Code",
|
|
4522
|
+
disabled: isProcessing
|
|
4523
|
+
}
|
|
4524
|
+
), /* @__PURE__ */ import_react75.default.createElement(
|
|
4525
|
+
ThreeDActionButton,
|
|
4526
|
+
{
|
|
4527
|
+
type: "submit",
|
|
4528
|
+
disabled: activationCode.length < 3 || isProcessing,
|
|
4529
|
+
isLoading: isProcessing,
|
|
4530
|
+
className: "w-full mt-2"
|
|
4531
|
+
},
|
|
4532
|
+
"Verify Code"
|
|
4533
|
+
))), step === "CONFIG" && cardConfig && /* @__PURE__ */ import_react75.default.createElement("div", { className: "animate-in fade-in slide-in-from-right-4 duration-300 flex flex-col gap-5" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "relative bg-neutral-50 rounded-xl p-5 overflow-hidden flex flex-col" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: `absolute -top-10 -right-10 w-40 h-40 bg-linear-to-bl from-[#ceff8a] to-transparent opacity-40 blur-2xl rounded-full pointer-events-none` }), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex justify-between items-start mb-2 relative z-10" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-black text-sm tracking-widest " }, cardConfig.name || `${formatTierName2(cardConfig.cardTier)} Card`), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[10px] tracking-widest px-2.5 py-1 rounded-full bg-white text-black uppercase" }, cardConfig.cardBrand || "VISA")), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-baseline justify-between mt-2 relative z-10 flex-wrap gap-2" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-baseline gap-1" }, /* @__PURE__ */ import_react75.default.createElement("h3", { className: "text-3xl font-light text-black" }, currentPrice === 0 ? "Free" : `$${currentPrice.toFixed(2)}`), currentPrice > 0 && /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-xs text-neutral-500" }, "issuance")), instantCashback > 0 && /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[11px] text-white bg-[#143731] px-2.5 py-1 rounded-full" }, "+$", instantCashback.toFixed(2), " Instant Cashback")), /* @__PURE__ */ import_react75.default.createElement("p", { className: "text-[12px] text-neutral-500 mt-2 leading-relaxed relative z-10" }, currentDescription || "Premium global spending card.")), canSkipKyc && /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-center justify-between p-3.5 border border-neutral-200 rounded-xl bg-white" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "pr-4" }, /* @__PURE__ */ import_react75.default.createElement("p", { className: "text-[13px] text-black mb-0.5" }, "Use Verified Identity (KYC)"), /* @__PURE__ */ import_react75.default.createElement("p", { className: "text-[11px] text-neutral-500 leading-snug" }, "Turn off to issue card anonymously via synthetic proxy.")), /* @__PURE__ */ import_react75.default.createElement(
|
|
4534
|
+
"button",
|
|
4535
|
+
{
|
|
4536
|
+
type: "button",
|
|
4537
|
+
onClick: () => setUseKyc(!useKyc),
|
|
4538
|
+
className: `relative w-11 h-6 rounded-full transition-colors duration-300 shrink-0 ${useKyc ? "bg-black" : "bg-neutral-200"}`
|
|
4539
|
+
},
|
|
4540
|
+
/* @__PURE__ */ import_react75.default.createElement("div", { className: `absolute top-1 left-1 w-4 h-4 rounded-full bg-white shadow-xs transition-transform duration-300 flex items-center justify-center ${useKyc ? "translate-x-5" : "translate-x-0"}` })
|
|
4541
|
+
)), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-3 bg-neutral-50 p-4 rounded-xl" }, /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[10px] tracking-wider text-neutral-500 uppercase" }, "Balance Limit"), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[12px] text-black" }, currentLimit)), /* @__PURE__ */ import_react75.default.createElement("div", { className: "w-full h-px bg-neutral-200/60" }), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[10px] tracking-wider text-neutral-500 uppercase" }, "Cashback Rate"), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[12px] text-black" }, currentCashbackRate)), /* @__PURE__ */ import_react75.default.createElement("div", { className: "w-full h-px bg-neutral-200/60" }), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[10px] tracking-wider text-neutral-500 uppercase" }, "FX Fee"), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[12px] text-black" }, fxFeeDisplay))), cardConfig.features && cardConfig.features.length > 0 && /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex flex-col gap-2.5 my-1" }, cardConfig.features.map((feature, idx) => {
|
|
4542
|
+
const isAvailable = feature.value !== false;
|
|
4543
|
+
const valueText = typeof feature.value === "string" ? feature.value : "";
|
|
4544
|
+
return /* @__PURE__ */ import_react75.default.createElement("div", { key: idx, className: "flex items-center gap-3" }, isAvailable ? /* @__PURE__ */ import_react75.default.createElement(CheckIcon3, null) : /* @__PURE__ */ import_react75.default.createElement(CrossIcon3, null), /* @__PURE__ */ import_react75.default.createElement("span", { className: `text-[12px] truncate ${isAvailable ? "text-neutral-800" : "text-neutral-400"}` }, feature.name, valueText && /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-neutral-500 ml-1" }, valueText)));
|
|
4545
|
+
})), /* @__PURE__ */ import_react75.default.createElement("div", { className: "flex items-start gap-3 mt-1" }, /* @__PURE__ */ import_react75.default.createElement(
|
|
4546
|
+
"input",
|
|
4547
|
+
{
|
|
4548
|
+
type: "checkbox",
|
|
4549
|
+
id: "card-terms",
|
|
4550
|
+
checked: agreedToTerms,
|
|
4551
|
+
onChange: (e) => setAgreedToTerms(e.target.checked),
|
|
4552
|
+
className: "mt-0.5 w-4 h-4 bg-white border-neutral-300 rounded text-black focus:ring-black cursor-pointer shrink-0"
|
|
4553
|
+
}
|
|
4554
|
+
), /* @__PURE__ */ import_react75.default.createElement("label", { htmlFor: "card-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to the ", /* @__PURE__ */ import_react75.default.createElement("a", { href: "https://aeona.finance/terms", target: "_blank", className: "text-black underline" }, "Terms of Service"), " and ", /* @__PURE__ */ import_react75.default.createElement("a", { href: "https://aeona.finance/privacy", target: "_blank", className: "text-black underline" }, "Privacy Policy"), " governing card issuance.")), /* @__PURE__ */ import_react75.default.createElement("div", { className: "bg-neutral-50 rounded-lg p-30" }, /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1 uppercase" }, "Payment Notice"), /* @__PURE__ */ import_react75.default.createElement("span", { className: "text-[11px] text-neutral-600 leading-relaxed block" }, "By confirming, $", currentPrice.toFixed(2), " will be securely deducted from your USD asset balance to guarantee your order.")), /* @__PURE__ */ import_react75.default.createElement("div", { className: "mt-1" }, /* @__PURE__ */ import_react75.default.createElement(
|
|
4555
|
+
ThreeDActionButton,
|
|
4556
|
+
{
|
|
4557
|
+
onClick: handleCreateCard,
|
|
4558
|
+
isLoading: isProcessing,
|
|
4559
|
+
disabled: !agreedToTerms || isProcessing,
|
|
4560
|
+
className: "w-full"
|
|
4561
|
+
},
|
|
4562
|
+
"Create Card"
|
|
4563
|
+
))))));
|
|
4564
|
+
};
|
|
4443
4565
|
// Annotate the CommonJS export names for ESM import in node:
|
|
4444
4566
|
0 && (module.exports = {
|
|
4445
4567
|
AppBento2,
|
|
4568
|
+
CardCreationDialog,
|
|
4446
4569
|
ConsultantShowcase,
|
|
4447
4570
|
ContentGridBlock,
|
|
4448
4571
|
Faq,
|
package/dist/index.mjs
CHANGED
|
@@ -156,8 +156,7 @@ var ThreeDActionButton = ({
|
|
|
156
156
|
disabled = false,
|
|
157
157
|
isLoading = false,
|
|
158
158
|
children,
|
|
159
|
-
className = ""
|
|
160
|
-
ariaLabel
|
|
159
|
+
className = ""
|
|
161
160
|
}) => {
|
|
162
161
|
const isInteractionDisabled = disabled || isLoading;
|
|
163
162
|
const baseShadow = `
|
|
@@ -1058,7 +1057,6 @@ var UniversalProfileSettings = ({
|
|
|
1058
1057
|
{
|
|
1059
1058
|
type: "button",
|
|
1060
1059
|
onClick: () => setIsPinModalOpen(true),
|
|
1061
|
-
"aria-label": "PIN Settings",
|
|
1062
1060
|
className: "w-9 h-9 flex items-center justify-center border border-neutral-200 rounded-full text-black hover:bg-neutral-50 transition-colors outline-none"
|
|
1063
1061
|
},
|
|
1064
1062
|
/* @__PURE__ */ React12.createElement(HugeiconsIcon6, { icon: LockKeyIcon, size: 17, className: "text-black" })
|
|
@@ -2142,8 +2140,7 @@ var UniversalCardPage = ({
|
|
|
2142
2140
|
onClick: () => {
|
|
2143
2141
|
if (onCreateCard) onCreateCard();
|
|
2144
2142
|
},
|
|
2145
|
-
className: "w-
|
|
2146
|
-
"aria-label": "Create New Card"
|
|
2143
|
+
className: "w-9 h-9 rounded-full bg-white flex items-center justify-center text-neutral-500 hover:text-black transition-colors shrink-0 outline-none"
|
|
2147
2144
|
},
|
|
2148
2145
|
/* @__PURE__ */ React20.createElement(HugeiconsIcon14, { icon: PlusSignIcon2, size: 18 })
|
|
2149
2146
|
)), /* @__PURE__ */ React20.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center" }, /* @__PURE__ */ React20.createElement(
|
|
@@ -4458,8 +4455,133 @@ var UniversalCardActionPage = ({
|
|
|
4458
4455
|
}
|
|
4459
4456
|
));
|
|
4460
4457
|
};
|
|
4458
|
+
|
|
4459
|
+
// src/components/CardCreationDialog.tsx
|
|
4460
|
+
import React45, { useState as useState30 } from "react";
|
|
4461
|
+
import axios2 from "axios";
|
|
4462
|
+
import toast10 from "react-hot-toast";
|
|
4463
|
+
import { HugeiconsIcon as HugeiconsIcon31 } from "@hugeicons/react";
|
|
4464
|
+
import { CancelCircleIcon as CancelCircleIcon8 } from "@hugeicons/core-free-icons";
|
|
4465
|
+
var CheckIcon3 = ({ className = "" }) => /* @__PURE__ */ React45.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React45.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "black" }), /* @__PURE__ */ React45.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
4466
|
+
var CrossIcon3 = ({ className = "" }) => /* @__PURE__ */ React45.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React45.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "#F5F5F5" }), /* @__PURE__ */ React45.createElement("path", { d: "M15 9L9 15M9 9l6 6", stroke: "#D4D4D4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
4467
|
+
var formatTierName2 = (name) => {
|
|
4468
|
+
if (!name) return "";
|
|
4469
|
+
return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
|
|
4470
|
+
};
|
|
4471
|
+
var CardCreationDialog = ({ isOpen, onClose, onSuccess }) => {
|
|
4472
|
+
const [step, setStep] = useState30("INPUT");
|
|
4473
|
+
const [activationCode, setActivationCode] = useState30("");
|
|
4474
|
+
const [isProcessing, setIsProcessing] = useState30(false);
|
|
4475
|
+
const [cardConfig, setCardConfig] = useState30(null);
|
|
4476
|
+
const [useKyc, setUseKyc] = useState30(true);
|
|
4477
|
+
const [agreedToTerms, setAgreedToTerms] = useState30(false);
|
|
4478
|
+
if (!isOpen) return null;
|
|
4479
|
+
const handleVerifyCode = async (e) => {
|
|
4480
|
+
e.preventDefault();
|
|
4481
|
+
const code = activationCode.trim().toUpperCase();
|
|
4482
|
+
if (code.length < 3) return toast10.error("Please enter a valid activation code.");
|
|
4483
|
+
setIsProcessing(true);
|
|
4484
|
+
try {
|
|
4485
|
+
const res = await axios2.post("/api/cards/create", { activation_code: code });
|
|
4486
|
+
if (res.data.success && res.data.payload?.config) {
|
|
4487
|
+
setCardConfig(res.data.payload.config);
|
|
4488
|
+
setStep("CONFIG");
|
|
4489
|
+
setUseKyc(true);
|
|
4490
|
+
setAgreedToTerms(false);
|
|
4491
|
+
}
|
|
4492
|
+
} catch (err) {
|
|
4493
|
+
toast10.error(err.response?.data?.error || "Invalid or expired activation code.");
|
|
4494
|
+
} finally {
|
|
4495
|
+
setIsProcessing(false);
|
|
4496
|
+
}
|
|
4497
|
+
};
|
|
4498
|
+
const handleCreateCard = async () => {
|
|
4499
|
+
if (!agreedToTerms) return toast10.error("You must agree to the Terms and Privacy Policy.");
|
|
4500
|
+
setIsProcessing(true);
|
|
4501
|
+
try {
|
|
4502
|
+
const res = await axios2.post("/api/beta/create", {
|
|
4503
|
+
activation_code: activationCode.trim().toUpperCase(),
|
|
4504
|
+
useKyc
|
|
4505
|
+
});
|
|
4506
|
+
if (res.data.success) {
|
|
4507
|
+
toast10.success("Card created successfully!");
|
|
4508
|
+
onSuccess();
|
|
4509
|
+
}
|
|
4510
|
+
} catch (err) {
|
|
4511
|
+
toast10.error(err.response?.data?.error || "Failed to create card. Please try again.");
|
|
4512
|
+
} finally {
|
|
4513
|
+
setIsProcessing(false);
|
|
4514
|
+
}
|
|
4515
|
+
};
|
|
4516
|
+
const currentPrice = cardConfig ? useKyc ? cardConfig.priceUSD : cardConfig.priceIfKycSkippedUSD : 0;
|
|
4517
|
+
const canSkipKyc = cardConfig?.canSkipKyc && cardConfig?.priceIfKycSkippedUSD !== void 0;
|
|
4518
|
+
const currentDescription = cardConfig ? useKyc ? cardConfig.description : cardConfig.descriptionIfKycSkipped : "";
|
|
4519
|
+
const currentLimit = cardConfig ? useKyc ? cardConfig.cardBalanceLimit : cardConfig.cardBalanceLimitIfKycSkipped : "-";
|
|
4520
|
+
const currentCashbackRate = cardConfig ? useKyc ? cardConfig.cashbackPercent : cardConfig.cashbackPercentIfKycSkipped : "-";
|
|
4521
|
+
const currentFxFeeObj = cardConfig ? useKyc ? cardConfig.fxFee : cardConfig.fxFeeIfKycSkipped : null;
|
|
4522
|
+
const fxFeeDisplay = currentFxFeeObj ? `$${currentFxFeeObj.fixedUSD} + ${currentFxFeeObj.percentage}%` : "Standard";
|
|
4523
|
+
const instantCashback = cardConfig?.instantCashbackAmount || 0;
|
|
4524
|
+
return /* @__PURE__ */ React45.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React45.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => !isProcessing && onClose() }), /* @__PURE__ */ React45.createElement("div", { className: "relative w-full max-w-md bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 max-h-[90vh]" }, /* @__PURE__ */ React45.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 relative z-10" }, /* @__PURE__ */ React45.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, step === "INPUT" ? "Activate Card" : "Configure Your Card"), /* @__PURE__ */ React45.createElement(
|
|
4525
|
+
"button",
|
|
4526
|
+
{
|
|
4527
|
+
disabled: isProcessing,
|
|
4528
|
+
onClick: onClose,
|
|
4529
|
+
className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50"
|
|
4530
|
+
},
|
|
4531
|
+
/* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: CancelCircleIcon8, size: 18 })
|
|
4532
|
+
)), /* @__PURE__ */ React45.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 pt-2 relative z-10" }, step === "INPUT" && /* @__PURE__ */ React45.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React45.createElement("p", { className: "text-sm text-neutral-500 mb-6" }, "Enter your secure invitation or activation code to begin the provisioning process."), /* @__PURE__ */ React45.createElement("form", { onSubmit: handleVerifyCode, className: "flex flex-col gap-6" }, /* @__PURE__ */ React45.createElement(
|
|
4533
|
+
TextInput,
|
|
4534
|
+
{
|
|
4535
|
+
label: "Activation Code",
|
|
4536
|
+
value: activationCode,
|
|
4537
|
+
onChange: (val) => setActivationCode(val.toUpperCase().replace(/[^A-Z0-9]/g, "")),
|
|
4538
|
+
placeholder: "Code",
|
|
4539
|
+
disabled: isProcessing
|
|
4540
|
+
}
|
|
4541
|
+
), /* @__PURE__ */ React45.createElement(
|
|
4542
|
+
ThreeDActionButton,
|
|
4543
|
+
{
|
|
4544
|
+
type: "submit",
|
|
4545
|
+
disabled: activationCode.length < 3 || isProcessing,
|
|
4546
|
+
isLoading: isProcessing,
|
|
4547
|
+
className: "w-full mt-2"
|
|
4548
|
+
},
|
|
4549
|
+
"Verify Code"
|
|
4550
|
+
))), step === "CONFIG" && cardConfig && /* @__PURE__ */ React45.createElement("div", { className: "animate-in fade-in slide-in-from-right-4 duration-300 flex flex-col gap-5" }, /* @__PURE__ */ React45.createElement("div", { className: "relative bg-neutral-50 rounded-xl p-5 overflow-hidden flex flex-col" }, /* @__PURE__ */ React45.createElement("div", { className: `absolute -top-10 -right-10 w-40 h-40 bg-linear-to-bl from-[#ceff8a] to-transparent opacity-40 blur-2xl rounded-full pointer-events-none` }), /* @__PURE__ */ React45.createElement("div", { className: "flex justify-between items-start mb-2 relative z-10" }, /* @__PURE__ */ React45.createElement("span", { className: "text-black text-sm tracking-widest " }, cardConfig.name || `${formatTierName2(cardConfig.cardTier)} Card`), /* @__PURE__ */ React45.createElement("span", { className: "text-[10px] tracking-widest px-2.5 py-1 rounded-full bg-white text-black uppercase" }, cardConfig.cardBrand || "VISA")), /* @__PURE__ */ React45.createElement("div", { className: "flex items-baseline justify-between mt-2 relative z-10 flex-wrap gap-2" }, /* @__PURE__ */ React45.createElement("div", { className: "flex items-baseline gap-1" }, /* @__PURE__ */ React45.createElement("h3", { className: "text-3xl font-light text-black" }, currentPrice === 0 ? "Free" : `$${currentPrice.toFixed(2)}`), currentPrice > 0 && /* @__PURE__ */ React45.createElement("span", { className: "text-xs text-neutral-500" }, "issuance")), instantCashback > 0 && /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] text-white bg-[#143731] px-2.5 py-1 rounded-full" }, "+$", instantCashback.toFixed(2), " Instant Cashback")), /* @__PURE__ */ React45.createElement("p", { className: "text-[12px] text-neutral-500 mt-2 leading-relaxed relative z-10" }, currentDescription || "Premium global spending card.")), canSkipKyc && /* @__PURE__ */ React45.createElement("div", { className: "flex items-center justify-between p-3.5 border border-neutral-200 rounded-xl bg-white" }, /* @__PURE__ */ React45.createElement("div", { className: "pr-4" }, /* @__PURE__ */ React45.createElement("p", { className: "text-[13px] text-black mb-0.5" }, "Use Verified Identity (KYC)"), /* @__PURE__ */ React45.createElement("p", { className: "text-[11px] text-neutral-500 leading-snug" }, "Turn off to issue card anonymously via synthetic proxy.")), /* @__PURE__ */ React45.createElement(
|
|
4551
|
+
"button",
|
|
4552
|
+
{
|
|
4553
|
+
type: "button",
|
|
4554
|
+
onClick: () => setUseKyc(!useKyc),
|
|
4555
|
+
className: `relative w-11 h-6 rounded-full transition-colors duration-300 shrink-0 ${useKyc ? "bg-black" : "bg-neutral-200"}`
|
|
4556
|
+
},
|
|
4557
|
+
/* @__PURE__ */ React45.createElement("div", { className: `absolute top-1 left-1 w-4 h-4 rounded-full bg-white shadow-xs transition-transform duration-300 flex items-center justify-center ${useKyc ? "translate-x-5" : "translate-x-0"}` })
|
|
4558
|
+
)), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-3 bg-neutral-50 p-4 rounded-xl" }, /* @__PURE__ */ React45.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[10px] tracking-wider text-neutral-500 uppercase" }, "Balance Limit"), /* @__PURE__ */ React45.createElement("span", { className: "text-[12px] text-black" }, currentLimit)), /* @__PURE__ */ React45.createElement("div", { className: "w-full h-px bg-neutral-200/60" }), /* @__PURE__ */ React45.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[10px] tracking-wider text-neutral-500 uppercase" }, "Cashback Rate"), /* @__PURE__ */ React45.createElement("span", { className: "text-[12px] text-black" }, currentCashbackRate)), /* @__PURE__ */ React45.createElement("div", { className: "w-full h-px bg-neutral-200/60" }), /* @__PURE__ */ React45.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[10px] tracking-wider text-neutral-500 uppercase" }, "FX Fee"), /* @__PURE__ */ React45.createElement("span", { className: "text-[12px] text-black" }, fxFeeDisplay))), cardConfig.features && cardConfig.features.length > 0 && /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-2.5 my-1" }, cardConfig.features.map((feature, idx) => {
|
|
4559
|
+
const isAvailable = feature.value !== false;
|
|
4560
|
+
const valueText = typeof feature.value === "string" ? feature.value : "";
|
|
4561
|
+
return /* @__PURE__ */ React45.createElement("div", { key: idx, className: "flex items-center gap-3" }, isAvailable ? /* @__PURE__ */ React45.createElement(CheckIcon3, null) : /* @__PURE__ */ React45.createElement(CrossIcon3, null), /* @__PURE__ */ React45.createElement("span", { className: `text-[12px] truncate ${isAvailable ? "text-neutral-800" : "text-neutral-400"}` }, feature.name, valueText && /* @__PURE__ */ React45.createElement("span", { className: "text-neutral-500 ml-1" }, valueText)));
|
|
4562
|
+
})), /* @__PURE__ */ React45.createElement("div", { className: "flex items-start gap-3 mt-1" }, /* @__PURE__ */ React45.createElement(
|
|
4563
|
+
"input",
|
|
4564
|
+
{
|
|
4565
|
+
type: "checkbox",
|
|
4566
|
+
id: "card-terms",
|
|
4567
|
+
checked: agreedToTerms,
|
|
4568
|
+
onChange: (e) => setAgreedToTerms(e.target.checked),
|
|
4569
|
+
className: "mt-0.5 w-4 h-4 bg-white border-neutral-300 rounded text-black focus:ring-black cursor-pointer shrink-0"
|
|
4570
|
+
}
|
|
4571
|
+
), /* @__PURE__ */ React45.createElement("label", { htmlFor: "card-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to the ", /* @__PURE__ */ React45.createElement("a", { href: "https://aeona.finance/terms", target: "_blank", className: "text-black underline" }, "Terms of Service"), " and ", /* @__PURE__ */ React45.createElement("a", { href: "https://aeona.finance/privacy", target: "_blank", className: "text-black underline" }, "Privacy Policy"), " governing card issuance.")), /* @__PURE__ */ React45.createElement("div", { className: "bg-neutral-50 rounded-lg p-30" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1 uppercase" }, "Payment Notice"), /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] text-neutral-600 leading-relaxed block" }, "By confirming, $", currentPrice.toFixed(2), " will be securely deducted from your USD asset balance to guarantee your order.")), /* @__PURE__ */ React45.createElement("div", { className: "mt-1" }, /* @__PURE__ */ React45.createElement(
|
|
4572
|
+
ThreeDActionButton,
|
|
4573
|
+
{
|
|
4574
|
+
onClick: handleCreateCard,
|
|
4575
|
+
isLoading: isProcessing,
|
|
4576
|
+
disabled: !agreedToTerms || isProcessing,
|
|
4577
|
+
className: "w-full"
|
|
4578
|
+
},
|
|
4579
|
+
"Create Card"
|
|
4580
|
+
))))));
|
|
4581
|
+
};
|
|
4461
4582
|
export {
|
|
4462
4583
|
AppBento2,
|
|
4584
|
+
CardCreationDialog,
|
|
4463
4585
|
ConsultantShowcase,
|
|
4464
4586
|
ContentGridBlock,
|
|
4465
4587
|
Faq,
|