@retinalabsllc/zairusjs 15.1.1 → 15.1.13
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 +17 -1
- package/dist/index.d.ts +17 -1
- package/dist/index.js +75 -26
- package/dist/index.mjs +73 -26
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -328,6 +328,22 @@ interface UniversalCardPageProps {
|
|
|
328
328
|
onFundCard?: (cardId: string) => void;
|
|
329
329
|
}
|
|
330
330
|
declare const UniversalCardPage: React.FC<UniversalCardPageProps>;
|
|
331
|
+
interface CardInfoDialogProps {
|
|
332
|
+
isOpen: boolean;
|
|
333
|
+
onClose: () => void;
|
|
334
|
+
cardDetails: {
|
|
335
|
+
card_number: string;
|
|
336
|
+
expiry: string;
|
|
337
|
+
cvv: string;
|
|
338
|
+
} | null;
|
|
339
|
+
}
|
|
340
|
+
declare const CardInfoDialog: React.FC<CardInfoDialogProps>;
|
|
341
|
+
interface FundCardDialogProps {
|
|
342
|
+
isOpen: boolean;
|
|
343
|
+
onClose: () => void;
|
|
344
|
+
onSubmit: (amount: string) => Promise<void>;
|
|
345
|
+
}
|
|
346
|
+
declare const FundCardDialog: React.FC<FundCardDialogProps>;
|
|
331
347
|
|
|
332
348
|
interface UniversalProfilePageProps {
|
|
333
349
|
avatarSrc?: string;
|
|
@@ -905,4 +921,4 @@ interface PinDialerBottomSheetProps {
|
|
|
905
921
|
}
|
|
906
922
|
declare const PinDialerBottomSheet: React.FC<PinDialerBottomSheetProps>;
|
|
907
923
|
|
|
908
|
-
export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CardData, 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, PinDialerBottomSheet, type PinDialerBottomSheetProps, 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 };
|
|
924
|
+
export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CardData, CardInfoDialog, type CardInfoDialogProps, 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, FundCardDialog, type FundCardDialogProps, 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, PinDialerBottomSheet, type PinDialerBottomSheetProps, 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
|
@@ -328,6 +328,22 @@ interface UniversalCardPageProps {
|
|
|
328
328
|
onFundCard?: (cardId: string) => void;
|
|
329
329
|
}
|
|
330
330
|
declare const UniversalCardPage: React.FC<UniversalCardPageProps>;
|
|
331
|
+
interface CardInfoDialogProps {
|
|
332
|
+
isOpen: boolean;
|
|
333
|
+
onClose: () => void;
|
|
334
|
+
cardDetails: {
|
|
335
|
+
card_number: string;
|
|
336
|
+
expiry: string;
|
|
337
|
+
cvv: string;
|
|
338
|
+
} | null;
|
|
339
|
+
}
|
|
340
|
+
declare const CardInfoDialog: React.FC<CardInfoDialogProps>;
|
|
341
|
+
interface FundCardDialogProps {
|
|
342
|
+
isOpen: boolean;
|
|
343
|
+
onClose: () => void;
|
|
344
|
+
onSubmit: (amount: string) => Promise<void>;
|
|
345
|
+
}
|
|
346
|
+
declare const FundCardDialog: React.FC<FundCardDialogProps>;
|
|
331
347
|
|
|
332
348
|
interface UniversalProfilePageProps {
|
|
333
349
|
avatarSrc?: string;
|
|
@@ -905,4 +921,4 @@ interface PinDialerBottomSheetProps {
|
|
|
905
921
|
}
|
|
906
922
|
declare const PinDialerBottomSheet: React.FC<PinDialerBottomSheetProps>;
|
|
907
923
|
|
|
908
|
-
export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CardData, 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, PinDialerBottomSheet, type PinDialerBottomSheetProps, 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 };
|
|
924
|
+
export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CardData, CardInfoDialog, type CardInfoDialogProps, 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, FundCardDialog, type FundCardDialogProps, 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, PinDialerBottomSheet, type PinDialerBottomSheetProps, 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,11 +32,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
32
32
|
var index_exports = {};
|
|
33
33
|
__export(index_exports, {
|
|
34
34
|
AppBento2: () => AppBento2,
|
|
35
|
+
CardInfoDialog: () => CardInfoDialog,
|
|
35
36
|
ConsultantShowcase: () => ConsultantShowcase,
|
|
36
37
|
ContentGridBlock: () => ContentGridBlock,
|
|
37
38
|
Faq: () => Faq,
|
|
38
39
|
FeatureScroll: () => FeatureScroll,
|
|
39
40
|
Footer: () => Footer,
|
|
41
|
+
FundCardDialog: () => FundCardDialog,
|
|
40
42
|
GifFeatureCard: () => GifFeatureCard,
|
|
41
43
|
Header: () => Header,
|
|
42
44
|
HeroSection: () => HeroSection,
|
|
@@ -381,7 +383,7 @@ var import_react6 = __toESM(require("react"));
|
|
|
381
383
|
var InputSpinner = () => /* @__PURE__ */ import_react6.default.createElement("svg", { className: "animate-spin h-3 w-3 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react6.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react6.default.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
|
|
382
384
|
var FlagImage = ({ countryCode }) => {
|
|
383
385
|
const [loaded, setLoaded] = (0, import_react6.useState)(false);
|
|
384
|
-
return /* @__PURE__ */ import_react6.default.createElement("div", { className: "relative w-6 h-6 rounded-full overflow-hidden flex items-center justify-center bg-neutral-100 shrink-0
|
|
386
|
+
return /* @__PURE__ */ import_react6.default.createElement("div", { className: "relative w-6 h-6 rounded-full overflow-hidden flex items-center justify-center bg-neutral-100 shrink-0" }, !loaded && /* @__PURE__ */ import_react6.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ import_react6.default.createElement(InputSpinner, null)), /* @__PURE__ */ import_react6.default.createElement(
|
|
385
387
|
"img",
|
|
386
388
|
{
|
|
387
389
|
src: `https://flagcdn.com/w40/${countryCode.toLowerCase()}.png`,
|
|
@@ -482,7 +484,7 @@ var SUPPORTED_COUNTRIES = [
|
|
|
482
484
|
{ code: "GH", dialCode: "+233", name: "Ghana" },
|
|
483
485
|
{ code: "KE", dialCode: "+254", name: "Kenya" }
|
|
484
486
|
];
|
|
485
|
-
var InputSpinner2 = () => /* @__PURE__ */ import_react7.default.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react7.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react7.default.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0
|
|
487
|
+
var InputSpinner2 = () => /* @__PURE__ */ import_react7.default.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react7.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react7.default.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
|
|
486
488
|
var CountrySelectorDialog = ({ isOpen, onClose, onSelect }) => {
|
|
487
489
|
if (!isOpen) return null;
|
|
488
490
|
return /* @__PURE__ */ import_react7.default.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "absolute inset-0", onClick: onClose }), /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full max-w-sm bg-white rounded-2xl shadow-2xl overflow-hidden relative z-10 animate-in fade-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react7.default.createElement(
|
|
@@ -504,7 +506,7 @@ var CountrySelectorDialog = ({ isOpen, onClose, onSelect }) => {
|
|
|
504
506
|
},
|
|
505
507
|
/* @__PURE__ */ import_react7.default.createElement(FlagImage, { countryCode: c.code }),
|
|
506
508
|
/* @__PURE__ */ import_react7.default.createElement("span", { className: "text-sm text-black flex-1 font-medium" }, c.name),
|
|
507
|
-
/* @__PURE__ */ import_react7.default.createElement("span", { className: "text-sm text-neutral-
|
|
509
|
+
/* @__PURE__ */ import_react7.default.createElement("span", { className: "text-sm text-neutral-400 " }, c.dialCode)
|
|
508
510
|
))))));
|
|
509
511
|
};
|
|
510
512
|
function AuthFormInner({
|
|
@@ -524,7 +526,11 @@ function AuthFormInner({
|
|
|
524
526
|
const captchaContext = useRecaptcha ? (0, import_react_google_recaptcha_v3.useGoogleReCaptcha)() : null;
|
|
525
527
|
const [mode, setMode] = (0, import_react7.useState)("LOGIN");
|
|
526
528
|
const [step, setStep] = (0, import_react7.useState)("INPUT");
|
|
527
|
-
const getInitialSignupStep = () =>
|
|
529
|
+
const getInitialSignupStep = () => {
|
|
530
|
+
if (requireNames) return "NAME";
|
|
531
|
+
if (requireOrganization) return "ORGANIZATION";
|
|
532
|
+
return "PHONE_ID";
|
|
533
|
+
};
|
|
528
534
|
const [signupStep, setSignupStep] = (0, import_react7.useState)(getInitialSignupStep());
|
|
529
535
|
const [isSubmitting, setIsSubmitting] = (0, import_react7.useState)(false);
|
|
530
536
|
const [countdown, setCountdown] = (0, import_react7.useState)(0);
|
|
@@ -656,25 +662,23 @@ function AuthFormInner({
|
|
|
656
662
|
}
|
|
657
663
|
};
|
|
658
664
|
const handleNextSignupStep = () => {
|
|
659
|
-
if (signupStep === "
|
|
660
|
-
if (requireNames) setSignupStep("NAME");
|
|
661
|
-
else if (requireOrganization) setSignupStep("ORGANIZATION");
|
|
662
|
-
else setSignupStep("PHONE_ID");
|
|
663
|
-
} else if (signupStep === "NAME") {
|
|
665
|
+
if (signupStep === "NAME") {
|
|
664
666
|
if (requireOrganization) setSignupStep("ORGANIZATION");
|
|
665
667
|
else setSignupStep("PHONE_ID");
|
|
666
668
|
} else if (signupStep === "ORGANIZATION") {
|
|
667
669
|
setSignupStep("PHONE_ID");
|
|
670
|
+
} else if (signupStep === "PHONE_ID") {
|
|
671
|
+
setSignupStep("INVITATION");
|
|
668
672
|
}
|
|
669
673
|
};
|
|
670
674
|
const isContinueDisabled = () => {
|
|
671
675
|
if (isSubmitting) return true;
|
|
672
676
|
if (mode === "LOGIN") return phoneNumber.length < 5;
|
|
673
677
|
if (mode === "SIGNUP") {
|
|
674
|
-
if (signupStep === "INVITATION") return invitationCode.trim().length > 0 && invitationCode.trim().length < 3;
|
|
675
678
|
if (signupStep === "NAME") return firstName.trim() === "" || lastName.trim() === "";
|
|
676
679
|
if (signupStep === "ORGANIZATION") return orgName.trim().length < 3;
|
|
677
680
|
if (signupStep === "PHONE_ID") return phoneNumber.length < 5 || !agreedToTerms;
|
|
681
|
+
if (signupStep === "INVITATION") return invitationCode.trim().length > 0 && invitationCode.trim().length < 3;
|
|
678
682
|
}
|
|
679
683
|
return false;
|
|
680
684
|
};
|
|
@@ -685,26 +689,16 @@ function AuthFormInner({
|
|
|
685
689
|
onClose: () => setIsCountryDialogOpen(false),
|
|
686
690
|
onSelect: setSelectedCountry
|
|
687
691
|
}
|
|
688
|
-
), /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full max-w-md mx-auto flex flex-col items-center gap-4 relative z-10 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "p-8 md:p-12" }, step === "INPUT" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "mb-12
|
|
692
|
+
), /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full max-w-md mx-auto flex flex-col items-center gap-4 relative z-10 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "p-8 md:p-12" }, step === "INPUT" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "mb-12 mt-2 text-left" }, /* @__PURE__ */ import_react7.default.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, mode === "LOGIN" ? `${companyName} ${workspaceLabel}` : "Create Account"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-[13px] text-neutral-500" }, mode === "LOGIN" ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, "Don't have an account? ", /* @__PURE__ */ import_react7.default.createElement("button", { type: "button", onClick: () => {
|
|
689
693
|
setMode("SIGNUP");
|
|
690
694
|
setSignupStep(getInitialSignupStep());
|
|
691
|
-
}, className: "text-black transition-colors ml-1" }, "Sign up")) : /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, "Already have an account? ", /* @__PURE__ */ import_react7.default.createElement("button", { type: "button", onClick: () => setMode("LOGIN"), className: "text-black transition-colors ml-1" }, "Log in")))), /* @__PURE__ */ import_react7.default.createElement("form", { className: "space-y-6", autoComplete: "off", onSubmit: (e) => {
|
|
695
|
+
}, className: "text-black transition-colors ml-1 font-medium" }, "Sign up")) : /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, "Already have an account? ", /* @__PURE__ */ import_react7.default.createElement("button", { type: "button", onClick: () => setMode("LOGIN"), className: "text-black transition-colors ml-1 font-medium" }, "Log in")))), /* @__PURE__ */ import_react7.default.createElement("form", { className: "space-y-6", autoComplete: "off", onSubmit: (e) => {
|
|
692
696
|
e.preventDefault();
|
|
693
|
-
if (mode === "SIGNUP" && signupStep === "
|
|
694
|
-
else if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
|
|
697
|
+
if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
|
|
695
698
|
else if (mode === "SIGNUP" && signupStep === "ORGANIZATION") handleNextSignupStep();
|
|
699
|
+
else if (mode === "SIGNUP" && signupStep === "PHONE_ID") handleNextSignupStep();
|
|
696
700
|
else handleAuthRequestSubmit();
|
|
697
|
-
} }, mode === "SIGNUP" && signupStep === "
|
|
698
|
-
"input",
|
|
699
|
-
{
|
|
700
|
-
type: "text",
|
|
701
|
-
value: invitationCode,
|
|
702
|
-
onChange: (e) => setInvitationCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "")),
|
|
703
|
-
autoFocus: true,
|
|
704
|
-
className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300 tracking-widest",
|
|
705
|
-
placeholder: "Referral Code (Optional)"
|
|
706
|
-
}
|
|
707
|
-
))), mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react7.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ import_react7.default.createElement("input", { type: "text", value: firstName, onChange: (e) => setFirstName(cleanAlpha(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "First name" })), /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react7.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ import_react7.default.createElement("input", { type: "text", value: lastName, onChange: (e) => setLastName(cleanAlpha(e.target.value)), required: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Last name" }))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ import_react7.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ import_react7.default.createElement("input", { type: "text", value: orgName, onChange: (e) => setOrgName(cleanOrgName(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Acme Corporation" }))), (mode === "LOGIN" || mode === "SIGNUP" && signupStep === "PHONE_ID") && /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-6 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react7.default.createElement(
|
|
701
|
+
} }, mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in slide-in-from-right-4 duration-300" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react7.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ import_react7.default.createElement("input", { type: "text", value: firstName, onChange: (e) => setFirstName(cleanAlpha(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "First name" })), /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react7.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ import_react7.default.createElement("input", { type: "text", value: lastName, onChange: (e) => setLastName(cleanAlpha(e.target.value)), required: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Last name" }))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in slide-in-from-right-4 duration-300" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ import_react7.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ import_react7.default.createElement("input", { type: "text", value: orgName, onChange: (e) => setOrgName(cleanOrgName(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Acme Corporation" }))), (mode === "LOGIN" || mode === "SIGNUP" && signupStep === "PHONE_ID") && /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-6 animate-in fade-in slide-in-from-right-4 duration-300" }, /* @__PURE__ */ import_react7.default.createElement(
|
|
708
702
|
PhoneInput,
|
|
709
703
|
{
|
|
710
704
|
label: "Phone Number",
|
|
@@ -714,7 +708,17 @@ function AuthFormInner({
|
|
|
714
708
|
onCountryClick: () => setIsCountryDialogOpen(true),
|
|
715
709
|
disabled: isSubmitting
|
|
716
710
|
}
|
|
717
|
-
), mode === "SIGNUP" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ import_react7.default.createElement("input", { type: "checkbox", id: "zairus-terms", checked: agreedToTerms, onChange: (e) => setAgreedToTerms(e.target.checked), className: "mt-0.5 w-4 h-4 bg-white border-neutral-300 rounded text-black focus:ring-black cursor-pointer", required: true }), /* @__PURE__ */ import_react7.default.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ import_react7.default.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Terms of Service"), " and ", /* @__PURE__ */ import_react7.default.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Privacy Policy"), "."))),
|
|
711
|
+
), mode === "SIGNUP" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ import_react7.default.createElement("input", { type: "checkbox", id: "zairus-terms", checked: agreedToTerms, onChange: (e) => setAgreedToTerms(e.target.checked), className: "mt-0.5 w-4 h-4 bg-white border-neutral-300 rounded text-black focus:ring-black cursor-pointer", required: true }), /* @__PURE__ */ import_react7.default.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ import_react7.default.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline font-medium" }, "Terms of Service"), " and ", /* @__PURE__ */ import_react7.default.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline font-medium" }, "Privacy Policy"), "."))), mode === "SIGNUP" && signupStep === "INVITATION" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in slide-in-from-right-4 duration-300" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ import_react7.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Referral Code"), /* @__PURE__ */ import_react7.default.createElement(
|
|
712
|
+
"input",
|
|
713
|
+
{
|
|
714
|
+
type: "text",
|
|
715
|
+
value: invitationCode,
|
|
716
|
+
onChange: (e) => setInvitationCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "")),
|
|
717
|
+
autoFocus: true,
|
|
718
|
+
className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300 tracking-widest",
|
|
719
|
+
placeholder: "Referral Code (Optional)"
|
|
720
|
+
}
|
|
721
|
+
))), /* @__PURE__ */ import_react7.default.createElement(ThreeDActionButton, { type: "submit", disabled: isContinueDisabled(), isLoading: isSubmitting, className: "w-full mt-10" }, mode === "SIGNUP" && signupStep === "INVITATION" ? "Complete Setup" : "Continue"))), step === "OTP" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-left mb-10 mt-2" }, /* @__PURE__ */ import_react7.default.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-[13px] text-neutral-500" }, "Enter your 6-digit verification code.")), /* @__PURE__ */ import_react7.default.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
|
|
718
722
|
e.preventDefault();
|
|
719
723
|
verifyOtpCode(otp.join(""));
|
|
720
724
|
} }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ import_react7.default.createElement(
|
|
@@ -2195,6 +2199,49 @@ var UniversalCardPage = ({
|
|
|
2195
2199
|
));
|
|
2196
2200
|
};
|
|
2197
2201
|
var MenuRow = ({ icon, title, subtitle, onClick, isLast = false, isToggle = false, toggleState = false, toggleLoading = false, disabled = false }) => /* @__PURE__ */ import_react31.default.createElement("div", { onClick: disabled ? void 0 : onClick, className: `flex items-center p-3 transition-colors ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-neutral-50"}` }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon, size: 16, className: "text-black" })), /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react31.default.createElement("p", { className: "text-[13px] truncate text-black" }, title), /* @__PURE__ */ import_react31.default.createElement("p", { className: "text-[11px] text-neutral-500 truncate" }, subtitle)), isToggle ? /* @__PURE__ */ import_react31.default.createElement("div", { className: `relative w-11 h-6 rounded-full transition-colors duration-300 ml-2 shrink-0 ${toggleState ? "bg-black" : "bg-neutral-100"} ${disabled ? "opacity-50" : ""}` }, /* @__PURE__ */ import_react31.default.createElement("div", { className: `absolute top-1 left-1 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-300 flex items-center justify-center ${toggleState ? "translate-x-5" : "translate-x-0"}` }, toggleLoading && /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.Loading03Icon, size: 10, className: "animate-spin text-black" }))) : /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.ArrowRight01Icon, size: 18, className: "text-neutral-400 shrink-0 ml-2" }));
|
|
2202
|
+
var CardInfoDialog = ({ isOpen, onClose, cardDetails }) => {
|
|
2203
|
+
if (!isOpen || !cardDetails) return null;
|
|
2204
|
+
const handleCopy = (text, label) => {
|
|
2205
|
+
navigator.clipboard.writeText(text);
|
|
2206
|
+
import_react_hot_toast7.default.success(`${label} copied to clipboard`);
|
|
2207
|
+
};
|
|
2208
|
+
const formattedCardNumber = cardDetails.card_number.replace(/(.{4})/g, "$1 ").trim();
|
|
2209
|
+
return /* @__PURE__ */ import_react31.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: onClose }), /* @__PURE__ */ import_react31.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ import_react31.default.createElement("h3", { className: "text-[15px] text-black tracking-tight " }, "Secure Card Details"), /* @__PURE__ */ import_react31.default.createElement("button", { onClick: onClose, className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react31.default.createElement("div", { className: "p-6" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "grid grid-cols-1 gap-y-6 mb-6" }, /* @__PURE__ */ import_react31.default.createElement("div", null, /* @__PURE__ */ import_react31.default.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1.5 " }, "Card Number"), /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-center justify-between p-3 rounded-full border border-neutral-200" }, /* @__PURE__ */ import_react31.default.createElement("span", { className: "text-[15px] tracking-widest text-black block" }, formattedCardNumber), /* @__PURE__ */ import_react31.default.createElement("button", { onClick: () => handleCopy(cardDetails.card_number, "Card Number"), className: "text-neutral-400 hover:text-black outline-none shrink-0 ml-3" }, /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.Copy01Icon, size: 16 })))), /* @__PURE__ */ import_react31.default.createElement("div", { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ import_react31.default.createElement("div", null, /* @__PURE__ */ import_react31.default.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1.5 " }, "Expiry Date"), /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-center justify-between p-3 rounded-full border border-neutral-200" }, /* @__PURE__ */ import_react31.default.createElement("span", { className: "text-[14px] text-black block" }, cardDetails.expiry), /* @__PURE__ */ import_react31.default.createElement("button", { onClick: () => handleCopy(cardDetails.expiry, "Expiry Date"), className: "text-neutral-400 hover:text-black outline-none shrink-0 ml-2" }, /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.Copy01Icon, size: 16 })))), /* @__PURE__ */ import_react31.default.createElement("div", null, /* @__PURE__ */ import_react31.default.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1.5 " }, "CVV"), /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-center justify-between p-3 rounded-full border border-neutral-200" }, /* @__PURE__ */ import_react31.default.createElement("span", { className: "text-[14px] text-black block" }, cardDetails.cvv), /* @__PURE__ */ import_react31.default.createElement("button", { onClick: () => handleCopy(cardDetails.cvv, "CVV"), className: "text-neutral-400 hover:text-black outline-none shrink-0 ml-2" }, /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.Copy01Icon, size: 16 })))))))));
|
|
2210
|
+
};
|
|
2211
|
+
var FundCardDialog = ({ isOpen, onClose, onSubmit }) => {
|
|
2212
|
+
const [amount, setAmount] = (0, import_react31.useState)("");
|
|
2213
|
+
const [isProcessing, setIsProcessing] = (0, import_react31.useState)(false);
|
|
2214
|
+
(0, import_react31.useEffect)(() => {
|
|
2215
|
+
if (isOpen) {
|
|
2216
|
+
setAmount("");
|
|
2217
|
+
}
|
|
2218
|
+
}, [isOpen]);
|
|
2219
|
+
if (!isOpen) return null;
|
|
2220
|
+
const handleFundCard = async (e) => {
|
|
2221
|
+
e.preventDefault();
|
|
2222
|
+
const numericAmount = parseFloat(amount) || 0;
|
|
2223
|
+
if (numericAmount <= 0) return import_react_hot_toast7.default.error("Please enter a valid amount.");
|
|
2224
|
+
setIsProcessing(true);
|
|
2225
|
+
try {
|
|
2226
|
+
await onSubmit(amount);
|
|
2227
|
+
onClose();
|
|
2228
|
+
} catch (err) {
|
|
2229
|
+
} finally {
|
|
2230
|
+
setIsProcessing(false);
|
|
2231
|
+
}
|
|
2232
|
+
};
|
|
2233
|
+
return /* @__PURE__ */ import_react31.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => !isProcessing && onClose() }), /* @__PURE__ */ import_react31.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react31.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Fund Card"), /* @__PURE__ */ import_react31.default.createElement("button", { disabled: isProcessing, onClick: onClose, className: "text-neutral-400 hover:text-black outline-none disabled:opacity-50" }, /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex-1 p-6" }, /* @__PURE__ */ import_react31.default.createElement("form", { onSubmit: handleFundCard, className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react31.default.createElement(
|
|
2234
|
+
NumberInput,
|
|
2235
|
+
{
|
|
2236
|
+
label: "Amount to Add",
|
|
2237
|
+
value: amount,
|
|
2238
|
+
onChange: setAmount,
|
|
2239
|
+
placeholder: "0.00",
|
|
2240
|
+
disabled: isProcessing,
|
|
2241
|
+
maxLength: 8
|
|
2242
|
+
}
|
|
2243
|
+
), /* @__PURE__ */ import_react31.default.createElement(ThreeDActionButton, { type: "submit", disabled: isProcessing || !amount, isLoading: isProcessing, className: "w-full" }, "Confirm Funding")))));
|
|
2244
|
+
};
|
|
2198
2245
|
|
|
2199
2246
|
// src/components/UniversalProfilePage.tsx
|
|
2200
2247
|
var import_react33 = __toESM(require("react"));
|
|
@@ -4292,11 +4339,13 @@ var PinDialerBottomSheet = ({
|
|
|
4292
4339
|
// Annotate the CommonJS export names for ESM import in node:
|
|
4293
4340
|
0 && (module.exports = {
|
|
4294
4341
|
AppBento2,
|
|
4342
|
+
CardInfoDialog,
|
|
4295
4343
|
ConsultantShowcase,
|
|
4296
4344
|
ContentGridBlock,
|
|
4297
4345
|
Faq,
|
|
4298
4346
|
FeatureScroll,
|
|
4299
4347
|
Footer,
|
|
4348
|
+
FundCardDialog,
|
|
4300
4349
|
GifFeatureCard,
|
|
4301
4350
|
Header,
|
|
4302
4351
|
HeroSection,
|
package/dist/index.mjs
CHANGED
|
@@ -304,7 +304,7 @@ import React5, { useState as useState3 } from "react";
|
|
|
304
304
|
var InputSpinner = () => /* @__PURE__ */ React5.createElement("svg", { className: "animate-spin h-3 w-3 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React5.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React5.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
|
|
305
305
|
var FlagImage = ({ countryCode }) => {
|
|
306
306
|
const [loaded, setLoaded] = useState3(false);
|
|
307
|
-
return /* @__PURE__ */ React5.createElement("div", { className: "relative w-6 h-6 rounded-full overflow-hidden flex items-center justify-center bg-neutral-100 shrink-0
|
|
307
|
+
return /* @__PURE__ */ React5.createElement("div", { className: "relative w-6 h-6 rounded-full overflow-hidden flex items-center justify-center bg-neutral-100 shrink-0" }, !loaded && /* @__PURE__ */ React5.createElement("div", { className: "absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ React5.createElement(InputSpinner, null)), /* @__PURE__ */ React5.createElement(
|
|
308
308
|
"img",
|
|
309
309
|
{
|
|
310
310
|
src: `https://flagcdn.com/w40/${countryCode.toLowerCase()}.png`,
|
|
@@ -405,7 +405,7 @@ var SUPPORTED_COUNTRIES = [
|
|
|
405
405
|
{ code: "GH", dialCode: "+233", name: "Ghana" },
|
|
406
406
|
{ code: "KE", dialCode: "+254", name: "Kenya" }
|
|
407
407
|
];
|
|
408
|
-
var InputSpinner2 = () => /* @__PURE__ */ React6.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React6.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React6.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0
|
|
408
|
+
var InputSpinner2 = () => /* @__PURE__ */ React6.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React6.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React6.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
|
|
409
409
|
var CountrySelectorDialog = ({ isOpen, onClose, onSelect }) => {
|
|
410
410
|
if (!isOpen) return null;
|
|
411
411
|
return /* @__PURE__ */ React6.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40" }, /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0", onClick: onClose }), /* @__PURE__ */ React6.createElement("div", { className: "w-full max-w-sm bg-white rounded-2xl shadow-2xl overflow-hidden relative z-10 animate-in fade-in zoom-in-95 duration-200" }, /* @__PURE__ */ React6.createElement(
|
|
@@ -427,7 +427,7 @@ var CountrySelectorDialog = ({ isOpen, onClose, onSelect }) => {
|
|
|
427
427
|
},
|
|
428
428
|
/* @__PURE__ */ React6.createElement(FlagImage, { countryCode: c.code }),
|
|
429
429
|
/* @__PURE__ */ React6.createElement("span", { className: "text-sm text-black flex-1 font-medium" }, c.name),
|
|
430
|
-
/* @__PURE__ */ React6.createElement("span", { className: "text-sm text-neutral-
|
|
430
|
+
/* @__PURE__ */ React6.createElement("span", { className: "text-sm text-neutral-400 " }, c.dialCode)
|
|
431
431
|
))))));
|
|
432
432
|
};
|
|
433
433
|
function AuthFormInner({
|
|
@@ -447,7 +447,11 @@ function AuthFormInner({
|
|
|
447
447
|
const captchaContext = useRecaptcha ? useGoogleReCaptcha() : null;
|
|
448
448
|
const [mode, setMode] = useState4("LOGIN");
|
|
449
449
|
const [step, setStep] = useState4("INPUT");
|
|
450
|
-
const getInitialSignupStep = () =>
|
|
450
|
+
const getInitialSignupStep = () => {
|
|
451
|
+
if (requireNames) return "NAME";
|
|
452
|
+
if (requireOrganization) return "ORGANIZATION";
|
|
453
|
+
return "PHONE_ID";
|
|
454
|
+
};
|
|
451
455
|
const [signupStep, setSignupStep] = useState4(getInitialSignupStep());
|
|
452
456
|
const [isSubmitting, setIsSubmitting] = useState4(false);
|
|
453
457
|
const [countdown, setCountdown] = useState4(0);
|
|
@@ -579,25 +583,23 @@ function AuthFormInner({
|
|
|
579
583
|
}
|
|
580
584
|
};
|
|
581
585
|
const handleNextSignupStep = () => {
|
|
582
|
-
if (signupStep === "
|
|
583
|
-
if (requireNames) setSignupStep("NAME");
|
|
584
|
-
else if (requireOrganization) setSignupStep("ORGANIZATION");
|
|
585
|
-
else setSignupStep("PHONE_ID");
|
|
586
|
-
} else if (signupStep === "NAME") {
|
|
586
|
+
if (signupStep === "NAME") {
|
|
587
587
|
if (requireOrganization) setSignupStep("ORGANIZATION");
|
|
588
588
|
else setSignupStep("PHONE_ID");
|
|
589
589
|
} else if (signupStep === "ORGANIZATION") {
|
|
590
590
|
setSignupStep("PHONE_ID");
|
|
591
|
+
} else if (signupStep === "PHONE_ID") {
|
|
592
|
+
setSignupStep("INVITATION");
|
|
591
593
|
}
|
|
592
594
|
};
|
|
593
595
|
const isContinueDisabled = () => {
|
|
594
596
|
if (isSubmitting) return true;
|
|
595
597
|
if (mode === "LOGIN") return phoneNumber.length < 5;
|
|
596
598
|
if (mode === "SIGNUP") {
|
|
597
|
-
if (signupStep === "INVITATION") return invitationCode.trim().length > 0 && invitationCode.trim().length < 3;
|
|
598
599
|
if (signupStep === "NAME") return firstName.trim() === "" || lastName.trim() === "";
|
|
599
600
|
if (signupStep === "ORGANIZATION") return orgName.trim().length < 3;
|
|
600
601
|
if (signupStep === "PHONE_ID") return phoneNumber.length < 5 || !agreedToTerms;
|
|
602
|
+
if (signupStep === "INVITATION") return invitationCode.trim().length > 0 && invitationCode.trim().length < 3;
|
|
601
603
|
}
|
|
602
604
|
return false;
|
|
603
605
|
};
|
|
@@ -608,26 +610,16 @@ function AuthFormInner({
|
|
|
608
610
|
onClose: () => setIsCountryDialogOpen(false),
|
|
609
611
|
onSelect: setSelectedCountry
|
|
610
612
|
}
|
|
611
|
-
), /* @__PURE__ */ React6.createElement("div", { className: "w-full max-w-md mx-auto flex flex-col items-center gap-4 relative z-10 animate-in fade-in duration-300" }, /* @__PURE__ */ React6.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React6.createElement("div", { className: "p-8 md:p-12" }, step === "INPUT" && /* @__PURE__ */ React6.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React6.createElement("div", { className: "mb-12
|
|
613
|
+
), /* @__PURE__ */ React6.createElement("div", { className: "w-full max-w-md mx-auto flex flex-col items-center gap-4 relative z-10 animate-in fade-in duration-300" }, /* @__PURE__ */ React6.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React6.createElement("div", { className: "p-8 md:p-12" }, step === "INPUT" && /* @__PURE__ */ React6.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React6.createElement("div", { className: "mb-12 mt-2 text-left" }, /* @__PURE__ */ React6.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, mode === "LOGIN" ? `${companyName} ${workspaceLabel}` : "Create Account"), /* @__PURE__ */ React6.createElement("div", { className: "text-[13px] text-neutral-500" }, mode === "LOGIN" ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, "Don't have an account? ", /* @__PURE__ */ React6.createElement("button", { type: "button", onClick: () => {
|
|
612
614
|
setMode("SIGNUP");
|
|
613
615
|
setSignupStep(getInitialSignupStep());
|
|
614
|
-
}, className: "text-black transition-colors ml-1" }, "Sign up")) : /* @__PURE__ */ React6.createElement(React6.Fragment, null, "Already have an account? ", /* @__PURE__ */ React6.createElement("button", { type: "button", onClick: () => setMode("LOGIN"), className: "text-black transition-colors ml-1" }, "Log in")))), /* @__PURE__ */ React6.createElement("form", { className: "space-y-6", autoComplete: "off", onSubmit: (e) => {
|
|
616
|
+
}, className: "text-black transition-colors ml-1 font-medium" }, "Sign up")) : /* @__PURE__ */ React6.createElement(React6.Fragment, null, "Already have an account? ", /* @__PURE__ */ React6.createElement("button", { type: "button", onClick: () => setMode("LOGIN"), className: "text-black transition-colors ml-1 font-medium" }, "Log in")))), /* @__PURE__ */ React6.createElement("form", { className: "space-y-6", autoComplete: "off", onSubmit: (e) => {
|
|
615
617
|
e.preventDefault();
|
|
616
|
-
if (mode === "SIGNUP" && signupStep === "
|
|
617
|
-
else if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
|
|
618
|
+
if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
|
|
618
619
|
else if (mode === "SIGNUP" && signupStep === "ORGANIZATION") handleNextSignupStep();
|
|
620
|
+
else if (mode === "SIGNUP" && signupStep === "PHONE_ID") handleNextSignupStep();
|
|
619
621
|
else handleAuthRequestSubmit();
|
|
620
|
-
} }, mode === "SIGNUP" && signupStep === "
|
|
621
|
-
"input",
|
|
622
|
-
{
|
|
623
|
-
type: "text",
|
|
624
|
-
value: invitationCode,
|
|
625
|
-
onChange: (e) => setInvitationCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "")),
|
|
626
|
-
autoFocus: true,
|
|
627
|
-
className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300 tracking-widest",
|
|
628
|
-
placeholder: "Referral Code (Optional)"
|
|
629
|
-
}
|
|
630
|
-
))), mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React6.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React6.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ React6.createElement("input", { type: "text", value: firstName, onChange: (e) => setFirstName(cleanAlpha(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "First name" })), /* @__PURE__ */ React6.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React6.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ React6.createElement("input", { type: "text", value: lastName, onChange: (e) => setLastName(cleanAlpha(e.target.value)), required: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Last name" }))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React6.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ React6.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ React6.createElement("input", { type: "text", value: orgName, onChange: (e) => setOrgName(cleanOrgName(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Acme Corporation" }))), (mode === "LOGIN" || mode === "SIGNUP" && signupStep === "PHONE_ID") && /* @__PURE__ */ React6.createElement("div", { className: "space-y-6 animate-in fade-in duration-300" }, /* @__PURE__ */ React6.createElement(
|
|
622
|
+
} }, mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in slide-in-from-right-4 duration-300" }, /* @__PURE__ */ React6.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React6.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ React6.createElement("input", { type: "text", value: firstName, onChange: (e) => setFirstName(cleanAlpha(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "First name" })), /* @__PURE__ */ React6.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React6.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ React6.createElement("input", { type: "text", value: lastName, onChange: (e) => setLastName(cleanAlpha(e.target.value)), required: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Last name" }))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in slide-in-from-right-4 duration-300" }, /* @__PURE__ */ React6.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ React6.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ React6.createElement("input", { type: "text", value: orgName, onChange: (e) => setOrgName(cleanOrgName(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Acme Corporation" }))), (mode === "LOGIN" || mode === "SIGNUP" && signupStep === "PHONE_ID") && /* @__PURE__ */ React6.createElement("div", { className: "space-y-6 animate-in fade-in slide-in-from-right-4 duration-300" }, /* @__PURE__ */ React6.createElement(
|
|
631
623
|
PhoneInput,
|
|
632
624
|
{
|
|
633
625
|
label: "Phone Number",
|
|
@@ -637,7 +629,17 @@ function AuthFormInner({
|
|
|
637
629
|
onCountryClick: () => setIsCountryDialogOpen(true),
|
|
638
630
|
disabled: isSubmitting
|
|
639
631
|
}
|
|
640
|
-
), mode === "SIGNUP" && /* @__PURE__ */ React6.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ React6.createElement("input", { type: "checkbox", id: "zairus-terms", checked: agreedToTerms, onChange: (e) => setAgreedToTerms(e.target.checked), className: "mt-0.5 w-4 h-4 bg-white border-neutral-300 rounded text-black focus:ring-black cursor-pointer", required: true }), /* @__PURE__ */ React6.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ React6.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Terms of Service"), " and ", /* @__PURE__ */ React6.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Privacy Policy"), "."))),
|
|
632
|
+
), mode === "SIGNUP" && /* @__PURE__ */ React6.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ React6.createElement("input", { type: "checkbox", id: "zairus-terms", checked: agreedToTerms, onChange: (e) => setAgreedToTerms(e.target.checked), className: "mt-0.5 w-4 h-4 bg-white border-neutral-300 rounded text-black focus:ring-black cursor-pointer", required: true }), /* @__PURE__ */ React6.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ React6.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline font-medium" }, "Terms of Service"), " and ", /* @__PURE__ */ React6.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline font-medium" }, "Privacy Policy"), "."))), mode === "SIGNUP" && signupStep === "INVITATION" && /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in slide-in-from-right-4 duration-300" }, /* @__PURE__ */ React6.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ React6.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Referral Code"), /* @__PURE__ */ React6.createElement(
|
|
633
|
+
"input",
|
|
634
|
+
{
|
|
635
|
+
type: "text",
|
|
636
|
+
value: invitationCode,
|
|
637
|
+
onChange: (e) => setInvitationCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "")),
|
|
638
|
+
autoFocus: true,
|
|
639
|
+
className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300 tracking-widest",
|
|
640
|
+
placeholder: "Referral Code (Optional)"
|
|
641
|
+
}
|
|
642
|
+
))), /* @__PURE__ */ React6.createElement(ThreeDActionButton, { type: "submit", disabled: isContinueDisabled(), isLoading: isSubmitting, className: "w-full mt-10" }, mode === "SIGNUP" && signupStep === "INVITATION" ? "Complete Setup" : "Continue"))), step === "OTP" && /* @__PURE__ */ React6.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React6.createElement("div", { className: "text-left mb-10 mt-2" }, /* @__PURE__ */ React6.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ React6.createElement("p", { className: "text-[13px] text-neutral-500" }, "Enter your 6-digit verification code.")), /* @__PURE__ */ React6.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
|
|
641
643
|
e.preventDefault();
|
|
642
644
|
verifyOtpCode(otp.join(""));
|
|
643
645
|
} }, /* @__PURE__ */ React6.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ React6.createElement(
|
|
@@ -2171,6 +2173,49 @@ var UniversalCardPage = ({
|
|
|
2171
2173
|
));
|
|
2172
2174
|
};
|
|
2173
2175
|
var MenuRow = ({ icon, title, subtitle, onClick, isLast = false, isToggle = false, toggleState = false, toggleLoading = false, disabled = false }) => /* @__PURE__ */ React19.createElement("div", { onClick: disabled ? void 0 : onClick, className: `flex items-center p-3 transition-colors ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-neutral-50"}` }, /* @__PURE__ */ React19.createElement("div", { className: "w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon, size: 16, className: "text-black" })), /* @__PURE__ */ React19.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React19.createElement("p", { className: "text-[13px] truncate text-black" }, title), /* @__PURE__ */ React19.createElement("p", { className: "text-[11px] text-neutral-500 truncate" }, subtitle)), isToggle ? /* @__PURE__ */ React19.createElement("div", { className: `relative w-11 h-6 rounded-full transition-colors duration-300 ml-2 shrink-0 ${toggleState ? "bg-black" : "bg-neutral-100"} ${disabled ? "opacity-50" : ""}` }, /* @__PURE__ */ React19.createElement("div", { className: `absolute top-1 left-1 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-300 flex items-center justify-center ${toggleState ? "translate-x-5" : "translate-x-0"}` }, toggleLoading && /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: Loading03Icon8, size: 10, className: "animate-spin text-black" }))) : /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: ArrowRight01Icon3, size: 18, className: "text-neutral-400 shrink-0 ml-2" }));
|
|
2176
|
+
var CardInfoDialog = ({ isOpen, onClose, cardDetails }) => {
|
|
2177
|
+
if (!isOpen || !cardDetails) return null;
|
|
2178
|
+
const handleCopy = (text, label) => {
|
|
2179
|
+
navigator.clipboard.writeText(text);
|
|
2180
|
+
toast6.success(`${label} copied to clipboard`);
|
|
2181
|
+
};
|
|
2182
|
+
const formattedCardNumber = cardDetails.card_number.replace(/(.{4})/g, "$1 ").trim();
|
|
2183
|
+
return /* @__PURE__ */ React19.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React19.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: onClose }), /* @__PURE__ */ React19.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React19.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ React19.createElement("h3", { className: "text-[15px] text-black tracking-tight " }, "Secure Card Details"), /* @__PURE__ */ React19.createElement("button", { onClick: onClose, className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: CancelCircleIcon5, size: 18 }))), /* @__PURE__ */ React19.createElement("div", { className: "p-6" }, /* @__PURE__ */ React19.createElement("div", { className: "grid grid-cols-1 gap-y-6 mb-6" }, /* @__PURE__ */ React19.createElement("div", null, /* @__PURE__ */ React19.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1.5 " }, "Card Number"), /* @__PURE__ */ React19.createElement("div", { className: "flex items-center justify-between p-3 rounded-full border border-neutral-200" }, /* @__PURE__ */ React19.createElement("span", { className: "text-[15px] tracking-widest text-black block" }, formattedCardNumber), /* @__PURE__ */ React19.createElement("button", { onClick: () => handleCopy(cardDetails.card_number, "Card Number"), className: "text-neutral-400 hover:text-black outline-none shrink-0 ml-3" }, /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: Copy01Icon3, size: 16 })))), /* @__PURE__ */ React19.createElement("div", { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ React19.createElement("div", null, /* @__PURE__ */ React19.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1.5 " }, "Expiry Date"), /* @__PURE__ */ React19.createElement("div", { className: "flex items-center justify-between p-3 rounded-full border border-neutral-200" }, /* @__PURE__ */ React19.createElement("span", { className: "text-[14px] text-black block" }, cardDetails.expiry), /* @__PURE__ */ React19.createElement("button", { onClick: () => handleCopy(cardDetails.expiry, "Expiry Date"), className: "text-neutral-400 hover:text-black outline-none shrink-0 ml-2" }, /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: Copy01Icon3, size: 16 })))), /* @__PURE__ */ React19.createElement("div", null, /* @__PURE__ */ React19.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1.5 " }, "CVV"), /* @__PURE__ */ React19.createElement("div", { className: "flex items-center justify-between p-3 rounded-full border border-neutral-200" }, /* @__PURE__ */ React19.createElement("span", { className: "text-[14px] text-black block" }, cardDetails.cvv), /* @__PURE__ */ React19.createElement("button", { onClick: () => handleCopy(cardDetails.cvv, "CVV"), className: "text-neutral-400 hover:text-black outline-none shrink-0 ml-2" }, /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: Copy01Icon3, size: 16 })))))))));
|
|
2184
|
+
};
|
|
2185
|
+
var FundCardDialog = ({ isOpen, onClose, onSubmit }) => {
|
|
2186
|
+
const [amount, setAmount] = useState12("");
|
|
2187
|
+
const [isProcessing, setIsProcessing] = useState12(false);
|
|
2188
|
+
useEffect8(() => {
|
|
2189
|
+
if (isOpen) {
|
|
2190
|
+
setAmount("");
|
|
2191
|
+
}
|
|
2192
|
+
}, [isOpen]);
|
|
2193
|
+
if (!isOpen) return null;
|
|
2194
|
+
const handleFundCard = async (e) => {
|
|
2195
|
+
e.preventDefault();
|
|
2196
|
+
const numericAmount = parseFloat(amount) || 0;
|
|
2197
|
+
if (numericAmount <= 0) return toast6.error("Please enter a valid amount.");
|
|
2198
|
+
setIsProcessing(true);
|
|
2199
|
+
try {
|
|
2200
|
+
await onSubmit(amount);
|
|
2201
|
+
onClose();
|
|
2202
|
+
} catch (err) {
|
|
2203
|
+
} finally {
|
|
2204
|
+
setIsProcessing(false);
|
|
2205
|
+
}
|
|
2206
|
+
};
|
|
2207
|
+
return /* @__PURE__ */ React19.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React19.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => !isProcessing && onClose() }), /* @__PURE__ */ React19.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React19.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React19.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Fund Card"), /* @__PURE__ */ React19.createElement("button", { disabled: isProcessing, onClick: onClose, className: "text-neutral-400 hover:text-black outline-none disabled:opacity-50" }, /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: CancelCircleIcon5, size: 18 }))), /* @__PURE__ */ React19.createElement("div", { className: "flex-1 p-6" }, /* @__PURE__ */ React19.createElement("form", { onSubmit: handleFundCard, className: "flex flex-col gap-6" }, /* @__PURE__ */ React19.createElement(
|
|
2208
|
+
NumberInput,
|
|
2209
|
+
{
|
|
2210
|
+
label: "Amount to Add",
|
|
2211
|
+
value: amount,
|
|
2212
|
+
onChange: setAmount,
|
|
2213
|
+
placeholder: "0.00",
|
|
2214
|
+
disabled: isProcessing,
|
|
2215
|
+
maxLength: 8
|
|
2216
|
+
}
|
|
2217
|
+
), /* @__PURE__ */ React19.createElement(ThreeDActionButton, { type: "submit", disabled: isProcessing || !amount, isLoading: isProcessing, className: "w-full" }, "Confirm Funding")))));
|
|
2218
|
+
};
|
|
2174
2219
|
|
|
2175
2220
|
// src/components/UniversalProfilePage.tsx
|
|
2176
2221
|
import React20, { useState as useState13 } from "react";
|
|
@@ -4310,11 +4355,13 @@ var PinDialerBottomSheet = ({
|
|
|
4310
4355
|
};
|
|
4311
4356
|
export {
|
|
4312
4357
|
AppBento2,
|
|
4358
|
+
CardInfoDialog,
|
|
4313
4359
|
ConsultantShowcase,
|
|
4314
4360
|
ContentGridBlock,
|
|
4315
4361
|
Faq,
|
|
4316
4362
|
FeatureScroll,
|
|
4317
4363
|
Footer,
|
|
4364
|
+
FundCardDialog,
|
|
4318
4365
|
GifFeatureCard,
|
|
4319
4366
|
Header,
|
|
4320
4367
|
HeroSection,
|