@sikka/hawa 0.47.0-next → 0.48.0-next

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.
@@ -17,7 +17,7 @@ import {
17
17
  TabsList,
18
18
  TabsTrigger,
19
19
  Textarea
20
- } from "../chunk-342KIV4R.mjs";
20
+ } from "../chunk-GBLWUEYN.mjs";
21
21
  import {
22
22
  getHotkeyHandler
23
23
  } from "../chunk-WL7C2A5D.mjs";
@@ -483,6 +483,12 @@ var LoginForm = ({
483
483
  import React3, { useState as useState2 } from "react";
484
484
  import { Controller as Controller2, FormProvider, useForm as useForm2 } from "react-hook-form";
485
485
  import { zodResolver as zodResolver2 } from "@hookform/resolvers/zod";
486
+ import {
487
+ isPossiblePhoneNumber as isPossiblePhoneNumber2,
488
+ isValidPhoneNumber as isValidPhoneNumber2,
489
+ parsePhoneNumber as parsePhoneNumber2,
490
+ validatePhoneNumberLength as validatePhoneNumberLength2
491
+ } from "libphonenumber-js";
486
492
  import * as z2 from "zod";
487
493
  var RegisterForm = ({
488
494
  texts,
@@ -490,10 +496,15 @@ var RegisterForm = ({
490
496
  minPasswordLength = 8,
491
497
  showTermsOption = false,
492
498
  showNewsletterOption = false,
499
+ registerTypes,
493
500
  ...props
494
501
  }) => {
495
- var _a, _b, _c, _d, _e, _f, _g, _h, _i;
502
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
496
503
  const [passwordVisible, setPasswordVisible] = useState2(false);
504
+ const [selectedRegisterType, setSelectedRegisterType] = useState2({
505
+ value: ((_a = registerTypes == null ? void 0 : registerTypes[0]) == null ? void 0 : _a.value) || "password",
506
+ label: ((_b = registerTypes == null ? void 0 : registerTypes[0]) == null ? void 0 : _b.label) || "Password"
507
+ });
497
508
  const thirdPartyAuthTexts = {
498
509
  continueWithGoogle: texts == null ? void 0 : texts.continueWithGoogle,
499
510
  continueWithTwitter: texts == null ? void 0 : texts.continueWithTwitter,
@@ -505,8 +516,12 @@ var RegisterForm = ({
505
516
  };
506
517
  const methods = useForm2();
507
518
  let fieldSchemas = {};
519
+ const hasPhoneType = registerTypes == null ? void 0 : registerTypes.some((type) => type.value === "phone");
520
+ if (hasPhoneType && selectedRegisterType.value === "phone") {
521
+ registerFields = ["phone"];
522
+ }
508
523
  registerFields.forEach((field) => {
509
- var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
524
+ var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
510
525
  switch (field) {
511
526
  case "fullname":
512
527
  fieldSchemas["fullName"] = z2.string().optional();
@@ -531,55 +546,85 @@ var RegisterForm = ({
531
546
  { message: ((_g2 = texts == null ? void 0 : texts.username) == null ? void 0 : _g2.invalid) || "Invalid username" }
532
547
  );
533
548
  break;
549
+ case "phone":
550
+ fieldSchemas["phone"] = z2.string({
551
+ required_error: ((_h2 = texts == null ? void 0 : texts.phone) == null ? void 0 : _h2.required) || "Phone Number Required"
552
+ }).refine(
553
+ (value) => {
554
+ let isPhoneValid = isPossiblePhoneNumber2(value) && isValidPhoneNumber2(value) && validatePhoneNumberLength2(value) === void 0;
555
+ return isPhoneValid;
556
+ },
557
+ { message: ((_i2 = texts == null ? void 0 : texts.phone) == null ? void 0 : _i2.invalid) || "Phone Number Invalid" }
558
+ );
559
+ break;
534
560
  }
535
561
  });
536
- const formSchema = z2.object({
537
- ...fieldSchemas,
538
- password: z2.string({
539
- required_error: ((_a = texts == null ? void 0 : texts.password) == null ? void 0 : _a.required) || "Password is required"
540
- }).min(minPasswordLength, {
541
- message: ((_b = texts == null ? void 0 : texts.password) == null ? void 0 : _b.tooShort) || "Password is too short"
542
- }).refine((value) => value !== "", {
543
- message: ((_c = texts == null ? void 0 : texts.password) == null ? void 0 : _c.required) || "Password is required"
544
- }),
545
- confirm_password: z2.string({
546
- required_error: ((_d = texts == null ? void 0 : texts.confirm) == null ? void 0 : _d.required) || "Confirm password required"
547
- }).min(minPasswordLength, {
548
- message: ((_e = texts == null ? void 0 : texts.password) == null ? void 0 : _e.tooShort) || "Password is too short"
549
- }).refine((value) => value !== "", {
550
- message: ((_f = texts == null ? void 0 : texts.password) == null ? void 0 : _f.required) || "Confirm password is required"
551
- }),
552
- refCode: z2.string().optional(),
553
- reference: z2.string().optional(),
554
- terms_accepted: z2.boolean({ required_error: (texts == null ? void 0 : texts.termsRequired) || "Terms required" }).refine((value) => value, {
555
- message: (texts == null ? void 0 : texts.termsRequired) || "Terms required"
556
- }),
557
- newsletter_accepted: z2.boolean().optional()
558
- }).refine((data) => data.password === data.confirm_password, {
559
- message: ((_g = texts == null ? void 0 : texts.confirm) == null ? void 0 : _g.dontMatch) || "Passwords don't match",
560
- path: ["confirm_password"]
561
- });
562
+ let formSchema;
563
+ if (selectedRegisterType.value === "phone") {
564
+ formSchema = z2.object({
565
+ phone: z2.string({
566
+ required_error: ((_c = texts == null ? void 0 : texts.phone) == null ? void 0 : _c.required) || "Phone Number Required"
567
+ }).refine(
568
+ (value) => {
569
+ let isPhoneValid = isPossiblePhoneNumber2(value) && isValidPhoneNumber2(value) && validatePhoneNumberLength2(value) === void 0;
570
+ return isPhoneValid;
571
+ },
572
+ { message: ((_d = texts == null ? void 0 : texts.phone) == null ? void 0 : _d.invalid) || "Phone Number Invalid" }
573
+ ),
574
+ refCode: z2.string().optional(),
575
+ reference: z2.string().optional(),
576
+ terms_accepted: z2.boolean({ required_error: (texts == null ? void 0 : texts.termsRequired) || "Terms required" }).refine((value) => value, {
577
+ message: (texts == null ? void 0 : texts.termsRequired) || "Terms required"
578
+ }),
579
+ newsletter_accepted: z2.boolean().optional()
580
+ });
581
+ } else {
582
+ formSchema = z2.object({
583
+ ...fieldSchemas,
584
+ password: z2.string({
585
+ required_error: ((_e = texts == null ? void 0 : texts.password) == null ? void 0 : _e.required) || "Password is required"
586
+ }).min(minPasswordLength, {
587
+ message: ((_f = texts == null ? void 0 : texts.password) == null ? void 0 : _f.tooShort) || "Password is too short"
588
+ }).refine((value) => value !== "", {
589
+ message: ((_g = texts == null ? void 0 : texts.password) == null ? void 0 : _g.required) || "Password is required"
590
+ }),
591
+ confirm_password: z2.string({
592
+ required_error: ((_h = texts == null ? void 0 : texts.confirm) == null ? void 0 : _h.required) || "Confirm password required"
593
+ }).min(minPasswordLength, {
594
+ message: ((_i = texts == null ? void 0 : texts.password) == null ? void 0 : _i.tooShort) || "Password is too short"
595
+ }).refine((value) => value !== "", {
596
+ message: ((_j = texts == null ? void 0 : texts.password) == null ? void 0 : _j.required) || "Confirm password is required"
597
+ }),
598
+ refCode: z2.string().optional(),
599
+ reference: z2.string().optional(),
600
+ terms_accepted: z2.boolean({ required_error: (texts == null ? void 0 : texts.termsRequired) || "Terms required" }).refine((value) => value, {
601
+ message: (texts == null ? void 0 : texts.termsRequired) || "Terms required"
602
+ }),
603
+ newsletter_accepted: z2.boolean().optional()
604
+ }).refine((data) => data.password === data.confirm_password, {
605
+ message: ((_k = texts == null ? void 0 : texts.confirm) == null ? void 0 : _k.dontMatch) || "Passwords don't match",
606
+ path: ["confirm_password"]
607
+ });
608
+ }
562
609
  const { handleSubmit, control, formState } = useForm2({
563
610
  resolver: zodResolver2(formSchema)
564
611
  });
565
- return /* @__PURE__ */ React3.createElement(
566
- "div",
612
+ return /* @__PURE__ */ React3.createElement("div", { className: cn("hawa-flex hawa-flex-col", (_l = props.classNames) == null ? void 0 : _l.root) }, /* @__PURE__ */ React3.createElement(
613
+ Card,
567
614
  {
615
+ dir: props.direction,
568
616
  className: cn(
569
- "hawa-flex hawa-flex-col hawa-gap-4",
570
- (_h = props.classNames) == null ? void 0 : _h.root
617
+ (_m = props.classNames) == null ? void 0 : _m.card,
618
+ props.cardless && "hawa-border-none hawa-bg-transparent !hawa-shadow-none !hawa-drop-shadow-none"
571
619
  )
572
620
  },
573
621
  /* @__PURE__ */ React3.createElement(
574
- Card,
622
+ CardContent,
575
623
  {
576
- dir: props.direction,
577
- className: cn(
578
- (_i = props.classNames) == null ? void 0 : _i.card,
579
- props.cardless && "hawa-border-none hawa-bg-transparent !hawa-shadow-none !hawa-drop-shadow-none"
580
- )
624
+ headless: registerTypes ? registerTypes.length <= 1 : true,
625
+ noPadding: props.cardless
581
626
  },
582
- /* @__PURE__ */ React3.createElement(CardContent, { headless: true, noPadding: props.cardless }, /* @__PURE__ */ React3.createElement("div", null, props.showError && /* @__PURE__ */ React3.createElement(
627
+ /* @__PURE__ */ React3.createElement("div", null, props.showError && /* @__PURE__ */ React3.createElement(
583
628
  Alert,
584
629
  {
585
630
  direction: props.direction,
@@ -600,240 +645,352 @@ var RegisterForm = ({
600
645
  if (props.onRegister) {
601
646
  return props.onRegister(e);
602
647
  } else {
603
- console.log(
604
- "Form is submitted but onRegister prop is missing"
605
- );
648
+ console.log("Form is submitted but onRegister prop is missing");
606
649
  }
607
650
  }),
608
651
  className: "hawa-flex hawa-flex-col hawa-gap-4"
609
652
  },
610
- /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4" }, registerFields.map((fld, i) => {
611
- if (fld === "fullname") {
612
- return /* @__PURE__ */ React3.createElement(
653
+ /* @__PURE__ */ React3.createElement(
654
+ Tabs,
655
+ {
656
+ dir: props.direction,
657
+ value: selectedRegisterType.value,
658
+ onValueChange: (e) => setSelectedRegisterType(
659
+ (registerTypes == null ? void 0 : registerTypes.find((r) => r.value === e)) || registerTypes && registerTypes[0] || {
660
+ label: "Password",
661
+ value: "password"
662
+ }
663
+ )
664
+ },
665
+ registerTypes && registerTypes.length > 1 && /* @__PURE__ */ React3.createElement(CardHeader, { className: "hawa-w-full hawa-px-0 hawa-py-0 hawa-my-4 hawa-mt-6" }, /* @__PURE__ */ React3.createElement(TabsList, { className: "hawa-w-full" }, registerTypes.map((registerType) => /* @__PURE__ */ React3.createElement(TabsTrigger, { value: registerType.value }, registerType.label)))),
666
+ /* @__PURE__ */ React3.createElement(
667
+ TabsContent,
668
+ {
669
+ value: "password",
670
+ className: cn(
671
+ "hawa-flex hawa-flex-col hawa-gap-4",
672
+ selectedRegisterType.value === "password" ? "hawa-block" : "hawa-hidden"
673
+ ),
674
+ dir: props.direction
675
+ },
676
+ /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-4" }, registerFields.map((fld, i) => {
677
+ if (fld === "fullname") {
678
+ return /* @__PURE__ */ React3.createElement(
679
+ Controller2,
680
+ {
681
+ key: i,
682
+ control,
683
+ name: "fullName",
684
+ render: ({ field }) => {
685
+ var _a2, _b2, _c2;
686
+ return /* @__PURE__ */ React3.createElement(
687
+ Input,
688
+ {
689
+ width: "full",
690
+ label: ((_a2 = texts == null ? void 0 : texts.fullName) == null ? void 0 : _a2.label) || "Full Name",
691
+ placeholder: (_b2 = texts == null ? void 0 : texts.fullName) == null ? void 0 : _b2.placeholder,
692
+ helperText: (_c2 = formState.errors.fullName) == null ? void 0 : _c2.message,
693
+ ...field
694
+ }
695
+ );
696
+ }
697
+ }
698
+ );
699
+ }
700
+ if (fld === "email") {
701
+ return /* @__PURE__ */ React3.createElement(
702
+ Controller2,
703
+ {
704
+ key: i,
705
+ control,
706
+ name: "email",
707
+ render: ({ field }) => {
708
+ var _a2, _b2, _c2;
709
+ return /* @__PURE__ */ React3.createElement(
710
+ Input,
711
+ {
712
+ dir: "ltr",
713
+ inputProps: {
714
+ className: props.direction === "rtl" ? "hawa-text-right" : "hawa-text-left"
715
+ },
716
+ width: "full",
717
+ autoComplete: "email",
718
+ label: ((_a2 = texts == null ? void 0 : texts.email) == null ? void 0 : _a2.label) || "Email",
719
+ helperText: (_b2 = formState.errors.email) == null ? void 0 : _b2.message,
720
+ placeholder: ((_c2 = texts == null ? void 0 : texts.email) == null ? void 0 : _c2.placeholder) || "Enter your email",
721
+ ...field,
722
+ onChange: (e) => {
723
+ field.onChange(e.target.value.toLowerCase().trim());
724
+ }
725
+ }
726
+ );
727
+ }
728
+ }
729
+ );
730
+ }
731
+ if (fld === "username") {
732
+ return /* @__PURE__ */ React3.createElement(
733
+ Controller2,
734
+ {
735
+ key: i,
736
+ control,
737
+ name: "username",
738
+ render: ({ field }) => {
739
+ var _a2, _b2, _c2, _d2;
740
+ return /* @__PURE__ */ React3.createElement(
741
+ Input,
742
+ {
743
+ width: "full",
744
+ autoComplete: "username",
745
+ label: ((_a2 = texts == null ? void 0 : texts.username) == null ? void 0 : _a2.label) || "Username",
746
+ labelProps: {
747
+ ...(_b2 = props.usernameOptions) == null ? void 0 : _b2.label
748
+ },
749
+ helperText: (_c2 = formState.errors.username) == null ? void 0 : _c2.message,
750
+ placeholder: (_d2 = texts == null ? void 0 : texts.username) == null ? void 0 : _d2.placeholder,
751
+ ...field
752
+ }
753
+ );
754
+ }
755
+ }
756
+ );
757
+ }
758
+ })),
759
+ /* @__PURE__ */ React3.createElement(
613
760
  Controller2,
614
761
  {
615
- key: i,
616
762
  control,
617
- name: "fullName",
763
+ name: "password",
618
764
  render: ({ field }) => {
619
765
  var _a2, _b2, _c2;
620
766
  return /* @__PURE__ */ React3.createElement(
621
767
  Input,
622
768
  {
623
769
  width: "full",
624
- label: ((_a2 = texts == null ? void 0 : texts.fullName) == null ? void 0 : _a2.label) || "Full Name",
625
- placeholder: (_b2 = texts == null ? void 0 : texts.fullName) == null ? void 0 : _b2.placeholder,
626
- helperText: (_c2 = formState.errors.fullName) == null ? void 0 : _c2.message,
770
+ type: passwordVisible ? "text" : "password",
771
+ autoComplete: "new-password",
772
+ label: ((_a2 = texts == null ? void 0 : texts.password) == null ? void 0 : _a2.label) || "Password",
773
+ placeholder: (_b2 = texts == null ? void 0 : texts.password) == null ? void 0 : _b2.placeholder,
774
+ helperText: (_c2 = formState.errors.password) == null ? void 0 : _c2.message,
775
+ endIcon: /* @__PURE__ */ React3.createElement(
776
+ "div",
777
+ {
778
+ className: "hawa-cursor-pointer",
779
+ onClick: () => setPasswordVisible(!passwordVisible)
780
+ },
781
+ passwordVisible ? /* @__PURE__ */ React3.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React3.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
782
+ " "
783
+ ),
627
784
  ...field
628
785
  }
629
786
  );
630
787
  }
631
788
  }
632
- );
633
- }
634
- if (fld === "email") {
635
- return /* @__PURE__ */ React3.createElement(
789
+ ),
790
+ /* @__PURE__ */ React3.createElement(
636
791
  Controller2,
637
792
  {
638
- key: i,
639
793
  control,
640
- name: "email",
794
+ name: "confirm_password",
641
795
  render: ({ field }) => {
642
796
  var _a2, _b2, _c2;
643
797
  return /* @__PURE__ */ React3.createElement(
644
798
  Input,
645
799
  {
646
- dir: "ltr",
647
- inputProps: {
648
- className: props.direction === "rtl" ? "hawa-text-right" : "hawa-text-left"
649
- },
650
800
  width: "full",
651
- autoComplete: "email",
652
- label: ((_a2 = texts == null ? void 0 : texts.email) == null ? void 0 : _a2.label) || "Email",
653
- helperText: (_b2 = formState.errors.email) == null ? void 0 : _b2.message,
654
- placeholder: ((_c2 = texts == null ? void 0 : texts.email) == null ? void 0 : _c2.placeholder) || "Enter your email",
655
- ...field,
656
- onChange: (e) => {
657
- field.onChange(
658
- e.target.value.toLowerCase().trim()
659
- );
660
- }
801
+ type: passwordVisible ? "text" : "password",
802
+ autoComplete: "new-password",
803
+ label: ((_a2 = texts == null ? void 0 : texts.confirm) == null ? void 0 : _a2.label) || "Confirm Password",
804
+ placeholder: ((_b2 = texts == null ? void 0 : texts.confirm) == null ? void 0 : _b2.placeholder) || "Confirm your Password",
805
+ helperText: (_c2 = formState.errors.confirm_password) == null ? void 0 : _c2.message,
806
+ endIcon: /* @__PURE__ */ React3.createElement(
807
+ "div",
808
+ {
809
+ className: "hawa-cursor-pointer",
810
+ onClick: () => setPasswordVisible(!passwordVisible)
811
+ },
812
+ passwordVisible ? /* @__PURE__ */ React3.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React3.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
813
+ " "
814
+ ),
815
+ ...field
661
816
  }
662
817
  );
663
818
  }
664
819
  }
665
- );
666
- }
667
- if (fld === "username") {
668
- return /* @__PURE__ */ React3.createElement(
820
+ ),
821
+ props.additionalInputs,
822
+ props.showRefCode && /* @__PURE__ */ React3.createElement(
669
823
  Controller2,
670
824
  {
671
- key: i,
672
825
  control,
673
- name: "username",
826
+ name: "refCode",
674
827
  render: ({ field }) => {
675
- var _a2, _b2, _c2, _d2;
828
+ var _a2;
676
829
  return /* @__PURE__ */ React3.createElement(
677
830
  Input,
678
831
  {
679
832
  width: "full",
680
- autoComplete: "username",
681
- label: ((_a2 = texts == null ? void 0 : texts.username) == null ? void 0 : _a2.label) || "Username",
682
- labelProps: {
683
- ...(_b2 = props.usernameOptions) == null ? void 0 : _b2.label
684
- },
685
- helperText: (_c2 = formState.errors.username) == null ? void 0 : _c2.message,
686
- placeholder: (_d2 = texts == null ? void 0 : texts.username) == null ? void 0 : _d2.placeholder,
833
+ label: texts == null ? void 0 : texts.refCode,
834
+ placeholder: (texts == null ? void 0 : texts.refCodePlaceholder) || "Enter the referral code",
835
+ helperText: (_a2 = formState.errors.refCode) == null ? void 0 : _a2.message,
687
836
  ...field
688
837
  }
689
838
  );
690
839
  }
691
840
  }
692
- );
693
- }
694
- })),
695
- /* @__PURE__ */ React3.createElement(
696
- Controller2,
697
- {
698
- control,
699
- name: "password",
700
- render: ({ field }) => {
701
- var _a2, _b2, _c2;
702
- return /* @__PURE__ */ React3.createElement(
703
- Input,
704
- {
705
- width: "full",
706
- type: passwordVisible ? "text" : "password",
707
- endIcon: /* @__PURE__ */ React3.createElement(
708
- "div",
841
+ ),
842
+ props.showUserSource && /* @__PURE__ */ React3.createElement(
843
+ Controller2,
844
+ {
845
+ control,
846
+ name: "reference",
847
+ render: ({ field }) => {
848
+ var _a2, _b2;
849
+ return /* @__PURE__ */ React3.createElement(
850
+ Select,
709
851
  {
710
- className: "hawa-cursor-pointer",
711
- onClick: () => setPasswordVisible(!passwordVisible)
712
- },
713
- passwordVisible ? /* @__PURE__ */ React3.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React3.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
714
- " "
715
- ),
716
- autoComplete: "new-password",
717
- label: ((_a2 = texts == null ? void 0 : texts.password) == null ? void 0 : _a2.label) || "Password",
718
- placeholder: (_b2 = texts == null ? void 0 : texts.password) == null ? void 0 : _b2.placeholder,
719
- helperText: (_c2 = formState.errors.password) == null ? void 0 : _c2.message,
720
- ...field
852
+ label: ((_a2 = texts == null ? void 0 : texts.userReference) == null ? void 0 : _a2.label) || "How did you learn about us?",
853
+ placeholder: (_b2 = texts == null ? void 0 : texts.userReference) == null ? void 0 : _b2.placeholder,
854
+ isCreatable: false,
855
+ isMulti: false,
856
+ isSearchable: false,
857
+ isClearable: false,
858
+ options: props.userReferenceOptions || [],
859
+ onChange: (e) => field.onChange(e)
860
+ }
861
+ );
721
862
  }
722
- );
723
- }
724
- }
725
- ),
726
- /* @__PURE__ */ React3.createElement(
727
- Controller2,
728
- {
729
- control,
730
- name: "confirm_password",
731
- render: ({ field }) => {
732
- var _a2, _b2, _c2;
733
- return /* @__PURE__ */ React3.createElement(
734
- Input,
735
- {
736
- width: "full",
737
- type: "password",
738
- autoComplete: "new-password",
739
- label: ((_a2 = texts == null ? void 0 : texts.confirm) == null ? void 0 : _a2.label) || "Confirm Password",
740
- placeholder: ((_b2 = texts == null ? void 0 : texts.confirm) == null ? void 0 : _b2.placeholder) || "Confirm your Password",
741
- helperText: (_c2 = formState.errors.confirm_password) == null ? void 0 : _c2.message,
742
- ...field
863
+ }
864
+ )
865
+ ),
866
+ /* @__PURE__ */ React3.createElement(
867
+ TabsContent,
868
+ {
869
+ value: "phone",
870
+ className: cn(
871
+ "hawa-flex hawa-flex-col hawa-gap-4",
872
+ selectedRegisterType.value === "phone" ? "hawa-block" : "hawa-hidden"
873
+ ),
874
+ dir: props.direction
875
+ },
876
+ /* @__PURE__ */ React3.createElement(
877
+ Controller2,
878
+ {
879
+ control,
880
+ name: "phone",
881
+ render: ({ field }) => {
882
+ var _a2, _b2;
883
+ return /* @__PURE__ */ React3.createElement(
884
+ PhoneInput,
885
+ {
886
+ label: ((_a2 = texts == null ? void 0 : texts.phone) == null ? void 0 : _a2.label) || "Phone Number",
887
+ helperText: (_b2 = formState.errors.phone) == null ? void 0 : _b2.message,
888
+ preferredCountry: { label: "+966" },
889
+ ...props.phoneInputProps,
890
+ handleChange: (e) => {
891
+ if (isValidPhoneNumber2(e) && isPossiblePhoneNumber2(e) && validatePhoneNumberLength2(e) === void 0) {
892
+ let parsed = parsePhoneNumber2(e);
893
+ field.onChange(parsed.number);
894
+ } else {
895
+ field.onChange(e);
896
+ }
897
+ }
898
+ }
899
+ );
743
900
  }
744
- );
745
- }
746
- }
747
- ),
748
- props.additionalInputs,
749
- props.showRefCode && /* @__PURE__ */ React3.createElement(
750
- Controller2,
751
- {
752
- control,
753
- name: "refCode",
754
- render: ({ field }) => {
755
- var _a2;
756
- return /* @__PURE__ */ React3.createElement(
757
- Input,
758
- {
759
- width: "full",
760
- label: texts == null ? void 0 : texts.refCode,
761
- placeholder: (texts == null ? void 0 : texts.refCodePlaceholder) || "Enter the referral code",
762
- helperText: (_a2 = formState.errors.refCode) == null ? void 0 : _a2.message,
763
- ...field
901
+ }
902
+ ),
903
+ props.additionalInputs,
904
+ props.showRefCode && /* @__PURE__ */ React3.createElement(
905
+ Controller2,
906
+ {
907
+ control,
908
+ name: "refCode",
909
+ render: ({ field }) => {
910
+ var _a2;
911
+ return /* @__PURE__ */ React3.createElement(
912
+ Input,
913
+ {
914
+ width: "full",
915
+ label: texts == null ? void 0 : texts.refCode,
916
+ placeholder: (texts == null ? void 0 : texts.refCodePlaceholder) || "Enter the referral code",
917
+ helperText: (_a2 = formState.errors.refCode) == null ? void 0 : _a2.message,
918
+ ...field
919
+ }
920
+ );
764
921
  }
765
- );
766
- }
767
- }
768
- ),
769
- props.showUserSource && /* @__PURE__ */ React3.createElement(
770
- Controller2,
771
- {
772
- control,
773
- name: "reference",
774
- render: ({ field }) => {
775
- var _a2, _b2;
776
- return /* @__PURE__ */ React3.createElement(
777
- Select,
778
- {
779
- label: ((_a2 = texts == null ? void 0 : texts.userReference) == null ? void 0 : _a2.label) || "How did you learn about us?",
780
- placeholder: (_b2 = texts == null ? void 0 : texts.userReference) == null ? void 0 : _b2.placeholder,
781
- isCreatable: false,
782
- isMulti: false,
783
- isSearchable: false,
784
- isClearable: false,
785
- options: props.userReferenceOptions || [],
786
- onChange: (e) => field.onChange(e)
922
+ }
923
+ ),
924
+ props.showUserSource && /* @__PURE__ */ React3.createElement(
925
+ Controller2,
926
+ {
927
+ control,
928
+ name: "reference",
929
+ render: ({ field }) => {
930
+ var _a2, _b2;
931
+ return /* @__PURE__ */ React3.createElement(
932
+ Select,
933
+ {
934
+ label: ((_a2 = texts == null ? void 0 : texts.userReference) == null ? void 0 : _a2.label) || "How did you learn about us?",
935
+ placeholder: (_b2 = texts == null ? void 0 : texts.userReference) == null ? void 0 : _b2.placeholder,
936
+ isCreatable: false,
937
+ isMulti: false,
938
+ isSearchable: false,
939
+ isClearable: false,
940
+ options: props.userReferenceOptions || [],
941
+ onChange: (e) => field.onChange(e)
942
+ }
943
+ );
787
944
  }
788
- );
945
+ }
946
+ )
947
+ ),
948
+ showTermsOption || showNewsletterOption ? /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-3 hawa-mb-2" }, showTermsOption && /* @__PURE__ */ React3.createElement(
949
+ Controller2,
950
+ {
951
+ control,
952
+ name: "terms_accepted",
953
+ render: ({ field }) => {
954
+ var _a2, _b2;
955
+ return /* @__PURE__ */ React3.createElement(
956
+ Checkbox,
957
+ {
958
+ id: "terms_accepted",
959
+ helperText: (_b2 = (_a2 = formState.errors.terms_accepted) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString(),
960
+ onCheckedChange: (e) => field.onChange(e),
961
+ label: /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-0.5 hawa-whitespace-nowrap hawa-flex-wrap" }, (texts == null ? void 0 : texts.iAcceptText) || "I accept the", " ", /* @__PURE__ */ React3.createElement(StopPropagationWrapper, null, /* @__PURE__ */ React3.createElement(
962
+ "span",
963
+ {
964
+ onClick: (e) => {
965
+ e.preventDefault();
966
+ if (props.onRouteToTOS) {
967
+ props.onRouteToTOS();
968
+ }
969
+ },
970
+ className: "clickable-link"
971
+ },
972
+ (texts == null ? void 0 : texts.termsText) || "Terms of Service"
973
+ )))
974
+ }
975
+ );
976
+ }
789
977
  }
790
- }
791
- ),
792
- showTermsOption || showNewsletterOption ? /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-3 hawa-mb-2" }, showTermsOption && /* @__PURE__ */ React3.createElement(
793
- Controller2,
794
- {
795
- control,
796
- name: "terms_accepted",
797
- render: ({ field }) => {
798
- var _a2, _b2;
799
- return /* @__PURE__ */ React3.createElement(
978
+ ), showNewsletterOption && /* @__PURE__ */ React3.createElement(
979
+ Controller2,
980
+ {
981
+ control,
982
+ name: "newsletter_accepted",
983
+ render: ({ field }) => /* @__PURE__ */ React3.createElement(
800
984
  Checkbox,
801
985
  {
802
- id: "terms_accepted",
803
- helperText: (_b2 = (_a2 = formState.errors.terms_accepted) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString(),
804
- onCheckedChange: (e) => field.onChange(e),
805
- label: /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-0.5 hawa-whitespace-nowrap hawa-flex-wrap" }, (texts == null ? void 0 : texts.iAcceptText) || "I accept the", " ", /* @__PURE__ */ React3.createElement(StopPropagationWrapper, null, /* @__PURE__ */ React3.createElement(
806
- "span",
807
- {
808
- onClick: (e) => {
809
- e.preventDefault();
810
- if (props.onRouteToTOS) {
811
- props.onRouteToTOS();
812
- }
813
- },
814
- className: "clickable-link"
815
- },
816
- (texts == null ? void 0 : texts.termsText) || "Terms of Service"
817
- )))
986
+ id: "newsletter_accepted",
987
+ label: (texts == null ? void 0 : texts.subscribeToNewsletter) || "Subscribe to our newsletter",
988
+ onCheckedChange: field.onChange
818
989
  }
819
- );
990
+ )
820
991
  }
821
- }
822
- ), showNewsletterOption && /* @__PURE__ */ React3.createElement(
823
- Controller2,
824
- {
825
- control,
826
- name: "newsletter_accepted",
827
- render: ({ field }) => /* @__PURE__ */ React3.createElement(
828
- Checkbox,
829
- {
830
- id: "newsletter_accepted",
831
- label: (texts == null ? void 0 : texts.subscribeToNewsletter) || "Subscribe to our newsletter",
832
- onCheckedChange: field.onChange
833
- }
834
- )
835
- }
836
- )) : null,
992
+ )) : null
993
+ ),
837
994
  /* @__PURE__ */ React3.createElement(
838
995
  Button,
839
996
  {
@@ -845,33 +1002,33 @@ var RegisterForm = ({
845
1002
  (texts == null ? void 0 : texts.registerText) || "Register"
846
1003
  ),
847
1004
  props.additionalButtons
848
- )), props.onRouteToLogin && /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-1 hawa-p-3 hawa-text-center hawa-text-sm hawa-font-normal dark:hawa-text-white" }, /* @__PURE__ */ React3.createElement("span", null, (texts == null ? void 0 : texts.existingUserText) || "Already have an account?"), /* @__PURE__ */ React3.createElement("span", { onClick: props.onRouteToLogin, className: "clickable-link" }, (texts == null ? void 0 : texts.loginText) || "Login")))),
849
- props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React3.createElement(
850
- CardFooter,
851
- {
852
- noPadding: props.cardless,
853
- className: cn(
854
- props.logosOnly ? "hawa-flex hawa-flex-row hawa-justify-center hawa-gap-2" : "hawa-grid hawa-grid-cols-1 hawa-gap-2"
855
- )
856
- },
857
- /* @__PURE__ */ React3.createElement(
858
- AuthButtons,
859
- {
860
- texts: thirdPartyAuthTexts,
861
- viaGoogle: props.viaGoogle,
862
- viaGithub: props.viaGithub,
863
- viaTwitter: props.viaTwitter,
864
- isGoogleLoading: props.isGoogleLoading,
865
- isGithubLoading: props.isGithubLoading,
866
- isTwitterLoading: props.isTwitterLoading,
867
- handleGoogle: props.onGoogleRegister,
868
- handleGithub: props.onGithubRegister,
869
- handleTwitter: props.onTwitterRegister
870
- }
1005
+ )), props.onRouteToLogin && /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-1 hawa-p-3 hawa-text-center hawa-text-sm hawa-font-normal dark:hawa-text-white" }, /* @__PURE__ */ React3.createElement("span", null, (texts == null ? void 0 : texts.existingUserText) || "Already have an account?"), /* @__PURE__ */ React3.createElement("span", { onClick: props.onRouteToLogin, className: "clickable-link" }, (texts == null ? void 0 : texts.loginText) || "Login")))
1006
+ ),
1007
+ props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React3.createElement(
1008
+ CardFooter,
1009
+ {
1010
+ noPadding: props.cardless,
1011
+ className: cn(
1012
+ props.logosOnly ? "hawa-flex hawa-flex-row hawa-justify-center hawa-gap-2" : "hawa-grid hawa-grid-cols-1 hawa-gap-2"
871
1013
  )
872
- ) : null
873
- )
874
- );
1014
+ },
1015
+ /* @__PURE__ */ React3.createElement(
1016
+ AuthButtons,
1017
+ {
1018
+ texts: thirdPartyAuthTexts,
1019
+ viaGoogle: props.viaGoogle,
1020
+ viaGithub: props.viaGithub,
1021
+ viaTwitter: props.viaTwitter,
1022
+ isGoogleLoading: props.isGoogleLoading,
1023
+ isGithubLoading: props.isGithubLoading,
1024
+ isTwitterLoading: props.isTwitterLoading,
1025
+ handleGoogle: props.onGoogleRegister,
1026
+ handleGithub: props.onGithubRegister,
1027
+ handleTwitter: props.onTwitterRegister
1028
+ }
1029
+ )
1030
+ ) : null
1031
+ ));
875
1032
  };
876
1033
 
877
1034
  // blocks/auth/AppLanding.tsx