Skip to content

update(ui): update validation of phone to be globally #1138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
moalidv wants to merge 1 commit into
base: master
Choose a base branch
from
Open

update(ui): update validation of phone to be globally #1138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions apps/web/src/components/Checkout/Forms/Fawry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import React, { useCallback } from "react";
import { TxTypeData } from "@/components/Checkout/types";
import { useOnError } from "@/hooks/error";
import { track } from "@/lib/analytics";
import { usePayWithFawry } from "@litespace/headless/fawry";
import { useForm } from "@litespace/headless/form";
import { useCreateLessonWithFawry } from "@litespace/headless/lessons";
import { Void } from "@litespace/types";
import { Button } from "@litespace/ui/Button";
import { useFormatMessage } from "@litespace/ui/hooks/intl";
import { useMakeValidators } from "@litespace/ui/hooks/validation";
import { Typography } from "@litespace/ui/Typography";
import { useForm } from "@litespace/headless/form";
import { validatePhone } from "@litespace/ui/lib/validate";
import { PatternInput } from "@litespace/ui/PatternInput";
import { Void } from "@litespace/types";
import { useOnError } from "@/hooks/error";
import { usePayWithFawry } from "@litespace/headless/fawry";
import { useToast } from "@litespace/ui/Toast";
import { TxTypeData } from "@/components/Checkout/types";
import { useCreateLessonWithFawry } from "@litespace/headless/lessons";
import { track } from "@/lib/analytics";
import { Typography } from "@litespace/ui/Typography";
import React, { useCallback } from "react";

type Form = {
phone: string;
Expand Down
3 changes: 3 additions & 0 deletions packages/types/src/validation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,10 @@ export enum FieldError {
InvalidInvoiceNote = "invoice-note-invalid-html",
TooLongInvoiceNote = "invoice-note-too-long",
InvalidInvoiceMethod = "invalid-invoice-method",
InvalidRegion = "invalid-region",
InvalidPhone = "invalid-phone",
PhoneNotValidForRegion = "phone-not-valid-for-region",
PhoneParsingError = "phone-parsing-error",
InvalidInstapayIPA = "instapay-username-invalid",
EmptyBankName = "empty-bank-name",
InvalidBankName = "invalid-bank-name",
Expand Down
3 changes: 3 additions & 0 deletions packages/ui/src/constants/error.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,9 @@ export const apiErrorMap: Record<ApiErrorCode, LocalId> = {
[FieldError.InvalidInvoiceNote]: "error.field.invalid-invoice-note",
[FieldError.TooLongInvoiceNote]: "error.field.too-long-invoice-note",
[FieldError.InvalidPhone]: "error.field.invalid-phone-number",
[FieldError.InvalidRegion]: "error.field.invalid-phone-region",
[FieldError.PhoneParsingError]: "error.field.invalid-parsing-phone",
[FieldError.PhoneNotValidForRegion]: "error.field.invalid-phone-for-region",
[FieldError.InvalidInstapayIPA]: "error.field.invalid-instapay-ipa",
[FieldError.EmptyBankName]: "error.field.empty-bank-name",
[FieldError.InvalidBankName]: "error.field.invalid-bank-name",
Expand Down
15 changes: 15 additions & 0 deletions packages/ui/src/lib/validate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,21 @@ export function validatePhone(phone: string): LocalId | null {
return "error.phone-number.invlaid";
}

export function validatePhoneGlobally(
phone: string,
region?: string
Copy link
Collaborator

@mmoehabb mmoehabb Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the region is optional?
I think we should make it required in order to be able to spot the places where it must be modified allover the codebase. Moreover, it should have a more specific type rather than 'string'.

): LocalId | null {
const valid = isValidPhoneBase(phone, region);

if (valid === true) return null;
if (valid === FieldError.InvalidRegion) return "error.phone-region.invalid";
if (valid === FieldError.InvalidPhone) return "error.phone-number.invlaid";
if (valid === FieldError.PhoneNotValidForRegion)
return "error.phone-number.not-valid-for-region";

return "error.phone.parsing.error";
}

export function validateCvv(cvv: string): LocalId | null {
const valid = isValidCvvBase(cvv);
return !valid ? "error.invlaid-cvv" : null;
Expand Down
6 changes: 6 additions & 0 deletions packages/ui/src/locales/ar-eg.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1320,7 +1320,10 @@
"error.name.invalid": "إسم غير مناسب",
"error.tutor-name.invalid": "إسم غير مناسب، تأكد من ادخاله باللغة العربية.",
"error.email.invalid": "عنوان بريد اليكتروني غير صحيح",
"error.phone-region.invalid": "كود المنطقة غير صحيح",
"error.phone-number.invlaid": "رقم الهاتف غير صحيح",
"error.phone-number.not-valid-for-region": "رقم الهاتف غير مناسب لكود المنطقة",
"error.phone.parsing.error": "حدث خطأ أثناء قراءة رقم الهاتف",
"error.text.short": "النص قصير جدا",
"error.text.long": "النص طويل جدا",
"error.birth-year-out-of-range": "يبدو أن هناك مشكلة في العمر الذي أدخلته. الرجاء مراجعته والتأكد من أنه ضمن النطاق الصحيح؟",
Expand Down Expand Up @@ -1381,6 +1384,9 @@
"error.field.invalid-invoice-method": "عذرا، وسيلة السحب غير صحيحة",
"error.field.too-long-invoice-note": "ملاحظة الفاتورة طويلة جدًا، برجاء التعديل.",
"error.field.invalid-phone-number": "رقم الهاتف غير صالح، برجاء التحقق.",
"error.field.invalid-phone-region": "كود المنطقة غير صحيح",
"error.field.invalid-phone-for-region": "هذا الرقم غير مناسب لكود المنطقة",
"error.field.invalid-parsing-phone": "تعذر قراءة رقم الهاتف",
"error.field.invalid-instapay-ipa": "اسم مستخدم Instapay غير صالح، برجاء التحقق.",
"error.field.empty-bank-name": "اسم البنك غير مدخل، برجاء التحقق.",
"error.field.invalid-bank-name": "اسم البنك غير صالح، برجاء التحقق.",
Expand Down
2 changes: 2 additions & 0 deletions packages/utils/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@
"@faker-js/faker": "^9.6.0",
"@jest/globals": "^29.7.0",
"@types/chai": "^4.3.16",
"@types/google-libphonenumber": "^7.4.30",
"@types/jest": "^29.5.12",
"babel-jest": "^29.7.0",
"chai": "^5.1.1",
Expand All @@ -148,6 +149,7 @@
"dependencies": {
"@litespace/types": "workspace:^",
"dayjs": "^1.11.13",
"google-libphonenumber": "^3.2.43",
"rrule": "^2.8.1",
"uuid": "^11.0.3",
"zod": "^3.23.8",
Expand Down
Loading
Loading