@retinalabsllc/zairusjs 14.0.85 → 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 +127 -1
- package/dist/index.mjs +126 -1
- 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,
|
|
@@ -2165,7 +2166,7 @@ var UniversalCardPage = ({
|
|
|
2165
2166
|
onClick: () => {
|
|
2166
2167
|
if (onCreateCard) onCreateCard();
|
|
2167
2168
|
},
|
|
2168
|
-
className: "w-
|
|
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"
|
|
2169
2170
|
},
|
|
2170
2171
|
/* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons12.PlusSignIcon, size: 18 })
|
|
2171
2172
|
)), /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center" }, /* @__PURE__ */ import_react33.default.createElement(
|
|
@@ -4437,9 +4438,134 @@ var UniversalCardActionPage = ({
|
|
|
4437
4438
|
}
|
|
4438
4439
|
));
|
|
4439
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
|
+
};
|
|
4440
4565
|
// Annotate the CommonJS export names for ESM import in node:
|
|
4441
4566
|
0 && (module.exports = {
|
|
4442
4567
|
AppBento2,
|
|
4568
|
+
CardCreationDialog,
|
|
4443
4569
|
ConsultantShowcase,
|
|
4444
4570
|
ContentGridBlock,
|
|
4445
4571
|
Faq,
|
package/dist/index.mjs
CHANGED
|
@@ -2140,7 +2140,7 @@ var UniversalCardPage = ({
|
|
|
2140
2140
|
onClick: () => {
|
|
2141
2141
|
if (onCreateCard) onCreateCard();
|
|
2142
2142
|
},
|
|
2143
|
-
className: "w-
|
|
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"
|
|
2144
2144
|
},
|
|
2145
2145
|
/* @__PURE__ */ React20.createElement(HugeiconsIcon14, { icon: PlusSignIcon2, size: 18 })
|
|
2146
2146
|
)), /* @__PURE__ */ React20.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center" }, /* @__PURE__ */ React20.createElement(
|
|
@@ -4455,8 +4455,133 @@ var UniversalCardActionPage = ({
|
|
|
4455
4455
|
}
|
|
4456
4456
|
));
|
|
4457
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
|
+
};
|
|
4458
4582
|
export {
|
|
4459
4583
|
AppBento2,
|
|
4584
|
+
CardCreationDialog,
|
|
4460
4585
|
ConsultantShowcase,
|
|
4461
4586
|
ContentGridBlock,
|
|
4462
4587
|
Faq,
|