@truworth/twc-auth 3.0.7 → 3.0.9

package/build/src/contexts/AuthContext.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import { MEMBER_IMAGES_URL } from '../constants/cdn-url';
+import { createHttpClient } from '../helpers/network';
+/**
+ * Public Auth Authentication Context
+ *
+ * Exposed to consumers of the Auth package.
+ * Provides access to user profile, client info, logout, and helper utilities.
+ */
+const AuthContext = React.createContext(null);
+/**
+ * Package Auth Authentication Context
+ *
+ * Not meant for public use. Contains lower-level auth state such as
+ * token, login/logout functions, and refresh session.
+ */
+const AuthPackageContext = React.createContext(null);
+/**
+ * AuthProvider
+ *
+ * Provides authentication state and actions to children.
+ * Wraps both AuthContext (public) and AuthPackageContext (internal).
+ *
+ * @param children - React children to be rendered inside the provider
+ * @param router - Router adapter for navigation in web apps only
+ * @param basePath - Base path for web routes where the auth module is mounted (default: '')
+ * @param LogoComponent - Optional component for branding/logo in auth flows
+ * @param session - Initial session containing token & sessionTimeout (if available)
+ * @param supportEmail - Optional support email for auth flows
+ * @param appConfig - Optional app config for auth flows
+ * @param onLogin - Optional callback after successful login
+ * @param onLogout - Optional callback after successful logout
+ * @param onLaunchAuthSession - Optional callback after successfully launching the auth session. For example, it can be used to set the Firebase notification token or request Android permissions.
+ * @param onRefreshSession - Optional handler for refreshing user session
+ * @param openChatSupport - Optional callback to open chat support
+ * @param socialLoginConfig - Optional social login configuration
+ */
+const AuthProvider = ({ children, router, basePath = '', LogoComponent, session, appConfig, onLogin, onLogout, onLaunchAuthSession, onRefreshSession, openChatSupport, socialLoginConfig }) => {
+    const [isLoadingProfile, setIsLoadingProfile] = useState(false);
+    const [profile, setProfile] = useState(null);
+    const [client, setClient] = useState(null);
+    const [registrationMethod, setRegistrationMethod] = useState(null);
+    const [token, setToken] = useState(session?.token || '');
+    const [otpValue, setOtpValue] = useState('');
+    const { request } = useMemo(() => createHttpClient({
+        token,
+        onRefreshSession: onRefreshSession
+            ? (t) => onRefreshSession({ token: t })
+            : undefined,
+        onLogout: async () => {
+            onLogout?.();
+            clearSession();
+        },
+    }), [token, onRefreshSession, onLogout]);
+    /**
+     * Sync local token state with session prop
+     */
+    useEffect(() => {
+        if (session?.token) {
+            setToken(session?.token);
+        }
+    }, [session?.token]);
+    /**
+     * fetch user profile if not already loaded.
+     */
+    useEffect(() => {
+        if (token && !profile) {
+            getUserProfile();
+        }
+    }, [token, profile]);
+    /**
+     * Logout user and clear authentication state.
+     * Falls back to default /auth/logout request
+     *
+     * @returns Promise<any> Resolves when logout is completed
+     */
+    const logout = useCallback(() => {
+        return new Promise((resolve, reject) => {
+            request({
+                url: '/auth/logout',
+                method: 'POST',
+            }).then((res) => {
+                clearSession();
+                onLogout?.();
+                resolve(res);
+            }).catch((err) => {
+                reject(err);
+            });
+        });
+    }, [request, onLogout]);
+    /**
+     * Fetch and update user profile and client data.
+     *
+     * @param token - Optional token for API request
+     * @returns Promise<any> Resolves with profile/config response
+     */
+    const getUserProfile = useCallback(() => {
+        if (isLoadingProfile)
+            return Promise.resolve(); // Prevent concurrent calls
+        setIsLoadingProfile(true);
+        return new Promise((resolve, reject) => {
+            request({
+                url: '/auth/config',
+                method: 'GET',
+            }).then((res) => {
+                const data = res?.data;
+                if (!data?.profile) {
+                    console.warn('No profile data received from /auth/config');
+                    return resolve(data);
+                }
+                const formatted = formatUserData(data);
+                setProfile(formatted.profile);
+                setClient(formatted.client);
+                resolve(data);
+            }).catch((err) => {
+                reject(err);
+            });
+        }).finally(() => {
+            setIsLoadingProfile(false);
+        });
+    }, [request, isLoadingProfile]);
+    const clearSession = useCallback(() => {
+        setToken('');
+        setClient(null);
+        setRegistrationMethod(null);
+        setProfile(null);
+    }, []);
+    /**
+   * Helper to normalize and format user profile data
+   * similar to legacy implementation.
+   *
+   * @param data - AuthConfigResponse from API
+   * @returns Object containing client and profile data
+   */
+    const formatUserData = useCallback((data) => {
+        const clientData = {
+            name: data.profile.clientName,
+            clientId: data.profile.clientId,
+            image: data.profile.clientImage,
+            partner: data.profile.partner,
+            directClient: data.profile.directClient
+        };
+        const profileData = {
+            ...data.profile,
+            firstName: data.profile.firstName,
+            lastName: data.profile.lastName,
+            image: data.profile?.image ? `${MEMBER_IMAGES_URL}${data.profile.image}` : '',
+        };
+        return { client: clientData, profile: profileData };
+    }, []);
+    const handleOtpReceived = (otp) => {
+        setOtpValue(otp);
+    };
+    const AuthContextValues = {
+        token,
+        profile,
+        client,
+        isLoadingProfile,
+        logout,
+        onLaunchAuthSession,
+        getUserProfile,
+        onOtpReceived: handleOtpReceived,
+    };
+    const appConfigValue = {
+        appName: appConfig?.appName ?? 'The Wellness Corner',
+        supportEmail: appConfig?.supportEmail ?? 'support@thewellnesscorner.com',
+        privacyPolicyUrl: appConfig?.privacyPolicyUrl ?? 'https://thewellnesscorner.com/privacy-policy',
+        termsAndConditionsUrl: appConfig?.termsAndConditionsUrl ?? 'https://thewellnesscorner.com/privacy-policy'
+    };
+    const AuthPackageContextValues = {
+        token,
+        router,
+        basePath,
+        LogoComponent,
+        appConfig: appConfigValue,
+        registrationMethod,
+        socialLoginConfig,
+        onLaunchAuthSession,
+        onLogin,
+        logout,
+        refreshSession: onRefreshSession,
+        onTokenChange: (token) => setToken(token),
+        onRegistrationMethodChange: (method) => setRegistrationMethod(method),
+        otpValue,
+        openChatSupport
+    };
+    return (_jsx(AuthContext.Provider, { value: AuthContextValues, children: _jsx(AuthPackageContext.Provider, { value: AuthPackageContextValues, children: children }) }));
+};
+export { AuthProvider };
+export default AuthContext;
+export { AuthPackageContext };

package/build/src/contexts/type.js

@@ -0,0 +1 @@
+export {};

package/build/src/enums/index.js

@@ -0,0 +1,3 @@
+export * from './registrationMethod.enum';
+export * from './loginMethod.enum';
+export * from './socialLogins.enum';

package/build/src/enums/loginMethod.enum.js

@@ -0,0 +1,8 @@
+export var LoginMethodCode;
+(function (LoginMethodCode) {
+    LoginMethodCode[LoginMethodCode["Email"] = 1] = "Email";
+    LoginMethodCode[LoginMethodCode["Facebook"] = 2] = "Facebook";
+    LoginMethodCode[LoginMethodCode["Google"] = 3] = "Google";
+    LoginMethodCode[LoginMethodCode["Apple"] = 4] = "Apple";
+    LoginMethodCode[LoginMethodCode["SSO"] = 5] = "SSO";
+})(LoginMethodCode || (LoginMethodCode = {}));

package/build/src/enums/registrationMethod.enum.js

@@ -0,0 +1,7 @@
+export var RegistrationMethod;
+(function (RegistrationMethod) {
+    RegistrationMethod["EMAIL"] = "email";
+    RegistrationMethod["SSO"] = "sso";
+    RegistrationMethod["MOBILE"] = "mobile";
+    RegistrationMethod["SOCIAL"] = "social";
+})(RegistrationMethod || (RegistrationMethod = {}));

package/build/src/enums/socialLogins.enum.js

@@ -0,0 +1,6 @@
+export var SocialLoginsEnum;
+(function (SocialLoginsEnum) {
+    SocialLoginsEnum["Google"] = "google";
+    SocialLoginsEnum["Facebook"] = "facebook";
+    SocialLoginsEnum["Apple"] = "apple";
+})(SocialLoginsEnum || (SocialLoginsEnum = {}));

package/build/src/helpers/network.js

@@ -0,0 +1,93 @@
+import { axiosClient } from '../api/axiosClient';
+import { showMessage } from './show-message';
+import {} from 'axios';
+export const createHttpClient = ({ token, onRefreshSession, onLogout }) => {
+    let currentToken = token;
+    const request = ({ url, method, data, ...axiosOptions }) => {
+        const upper = method?.toUpperCase();
+        const payload = {
+            method: upper,
+            url,
+            data,
+            headers: {
+                ...(axiosOptions.headers ?? {}),
+                ...(currentToken ? { 'x-access-token': currentToken } : {}),
+            },
+            ...axiosOptions,
+        };
+        return new Promise((resolve, reject) => {
+            axiosClient(payload)
+                .then((res) => resolve(res))
+                .catch(async (err) => {
+                console.log(err?.response?.data);
+                // TokenExpiredError → refresh & retry
+                if (isAxios401(err, 'TokenExpiredError') && token) {
+                    try {
+                        const newToken = await refreshToken();
+                        if (newToken) {
+                            currentToken = newToken;
+                            await onRefreshSession?.(newToken);
+                            const retryResponse = await axiosClient({
+                                ...payload,
+                                headers: {
+                                    ...(payload.headers ?? {}),
+                                    'x-access-token': newToken,
+                                },
+                            });
+                            resolve(retryResponse);
+                        }
+                    }
+                    catch (refreshErr) {
+                        if (isAxios401(refreshErr, 'InvalidSessionError')) {
+                            await handleInvalidSession();
+                            resolve(null);
+                            return;
+                        }
+                        reject(refreshErr);
+                    }
+                }
+                // InvalidSessionError → logout
+                if (isAxios401(err, 'InvalidSessionError')) {
+                    await handleInvalidSession();
+                    resolve(null);
+                    return;
+                }
+                reject(err);
+            });
+        });
+    };
+    let refreshPromise = null;
+    const refreshToken = async () => {
+        if (refreshPromise)
+            return refreshPromise;
+        if (!currentToken)
+            return undefined;
+        const tokenRequest = {
+            method: 'GET',
+            url: '/auth/refresh-token',
+            headers: {
+                'x-access-token': currentToken,
+            },
+        };
+        refreshPromise = axiosClient(tokenRequest)
+            .then(res => res.data?.token)
+            .finally(() => { refreshPromise = null; });
+        return refreshPromise;
+    };
+    const handleInvalidSession = async () => {
+        try {
+            await onLogout?.();
+            showMessage({ message: 'Your session has expired. Please login again.' });
+        }
+        catch (err) {
+            console.log('Error logging out:', err);
+        }
+    };
+    return { request };
+};
+const isAxios401 = (err, name) => {
+    const e = err;
+    const status = e?.response?.status;
+    const n = e?.response?.data?.errors?.[0]?.name;
+    return status === 401 && (!name || n === name);
+};

package/build/src/helpers/show-message/index.js

@@ -0,0 +1,19 @@
+import { showNotification } from "@truworth/twc-web-design";
+const showMessage = ({ message, type }) => {
+    if (message == null)
+        return;
+    const text = typeof message === 'string'
+        ? message
+        : message instanceof Error
+            ? message.message
+            : (typeof message === 'object' && 'message' in message)
+                ? String(message.message)
+                : String(message);
+    showNotification({
+        type: type ?? 'error',
+        title: text,
+        showIcon: false,
+        duration: 3000,
+    });
+};
+export { showMessage };

package/build/src/helpers/show-message/index.native.js

@@ -0,0 +1,14 @@
+import { Snackbar } from "@truworth/twc-rn-common";
+const showMessage = ({ message, leftIcon = 'warning' }) => {
+    if (message == null)
+        return;
+    const text = typeof message === 'string'
+        ? message
+        : message instanceof Error
+            ? message.message
+            : (typeof message === 'object' && 'message' in message)
+                ? String(message.message)
+                : String(message);
+    Snackbar.show({ text, leftIcon });
+};
+export { showMessage };

package/build/src/helpers/show-message/types.js

@@ -0,0 +1 @@
+export {};

package/build/src/helpers/types.js

@@ -0,0 +1 @@
+export {};

package/build/src/helpers/validation.js

@@ -0,0 +1,12 @@
+export const validatePhoneNo = (text) => {
+    // Normalize common formatting then enforce E.164 constraints
+    const normalized = text.replace(/[\s()-]/g, '');
+    if (!/^\+?\d+$/.test(normalized))
+        return false; // digits (optional leading +)
+    return /^\+?[1-9]\d{6,14}$/.test(normalized); // 7–15 digits, no leading zero country code
+};
+export const validateEmojiRegex = (text) => {
+    const regexpEmoji = /[\u{1f300}-\u{1f5ff}\u{1f900}-\u{1f9ff}\u{1f600}-\u{1f64f}\u{1f680}-\u{1f6ff}\u{2600}-\u{26ff}\u{2700}-\u{27bf}\u{1f1e6}-\u{1f1ff}\u{1f191}-\u{1f251}\u{1f004}\u{1f0cf}\u{1f170}-\u{1f171}\u{1f17e}-\u{1f17f}\u{1f18e}\u{3030}\u{2b50}\u{2b55}\u{2934}-\u{2935}\u{2b05}-\u{2b07}\u{2b1b}-\u{2b1c}\u{3297}\u{3299}\u{303d}\u{00a9}\u{00ae}\u{2122}\u{23f3}\u{24c2}\u{23e9}-\u{23ef}\u{25b6}\u{23f8}-\u{23fa}]/ug;
+    text = text.replace(regexpEmoji, '');
+    return text;
+};

package/build/src/hooks/internal/useAuthPackageContext.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { AuthPackageContext } from "../../contexts/AuthContext";
+export const useAuthPackageContext = () => {
+    const context = React.useContext(AuthPackageContext);
+    if (!context) {
+        throw new Error('useAuthPackageContext must be used within a LoginProvider');
+    }
+    return context;
+};

package/build/src/hooks/internal/useTimer.js

@@ -0,0 +1,40 @@
+import { useEffect, useState, useRef } from 'react';
+const useTimer = (duration) => {
+    const [timer, setTimer] = useState(duration);
+    useEffect(() => {
+        // Reset timer whenever duration changes
+        setTimer(duration);
+        // Strongly type the interval ID
+        const id = setInterval(() => {
+            setTimer(prev => {
+                if (prev <= 1) {
+                    clearInterval(id);
+                    return 0; // Clamp at zero
+                }
+                return prev - 1;
+            });
+        }, 1000);
+        return () => clearInterval(id);
+    }, [duration]);
+    return timer;
+};
+const useInterval = (callback, delay) => {
+    const savedCallback = useRef();
+    // Remember the latest function.
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    // Set up the interval.
+    useEffect(() => {
+        function tick() {
+            savedCallback.current?.();
+        }
+        if (delay !== null) {
+            const id = setInterval(tick, delay);
+            return () => {
+                clearInterval(id);
+            };
+        }
+    }, [delay]);
+};
+export { useTimer, useInterval };

package/build/src/hooks/useAuthContext.js

@@ -0,0 +1,10 @@
+import React from "react";
+import AuthContext from "../contexts/AuthContext";
+const useAuthContext = () => {
+    const context = React.useContext(AuthContext);
+    if (!context) {
+        throw new Error('useAuthContext must be used within a AuthProvider');
+    }
+    return context;
+};
+export { useAuthContext };

package/build/src/hooks/useNavigator.js

@@ -0,0 +1,83 @@
+import { useContext, useMemo } from 'react';
+import { AuthPackageContext } from '../contexts/AuthContext';
+/**
+ * useNavigator Hook
+ *
+ * Provides framework-agnostic navigation capabilities.
+ * Uses the RouterAdapter provided by the host app through AuthProvider.
+ *
+ * @example
+ * ```tsx
+ * const navigator = useNavigator();
+ *
+ * // Relative navigation (uses basePath)
+ * navigator.push('/registration');
+ *
+ * // Absolute navigation (ignores basePath)
+ * navigator.pushAbsolute('/dashboard');
+ *
+ * // With query params
+ * navigator.push('/registration', { query: { email: 'test@example.com' } });
+ *
+ * // Access query params
+ * const { email } = navigator.query;
+ * ```
+ */
+const useNavigator = () => {
+    const context = useContext(AuthPackageContext);
+    if (!context?.router) {
+        throw new Error('useNavigator: router not found in context. ' +
+            'Make sure to wrap your component with AuthProvider and pass a router adapter.');
+    }
+    const { router, basePath = '' } = context;
+    const navigator = useMemo(() => ({
+        /**
+         * Navigate to a path relative to basePath
+         */
+        push: (path, options) => {
+            const fullPath = path.startsWith('/') ? `${basePath}${path}` : `${basePath}/${path}`;
+            router.push(fullPath, options);
+        },
+        /**
+         * Replace current path with a path relative to basePath
+         */
+        replace: (path, options) => {
+            const fullPath = path.startsWith('/') ? `${basePath}${path}` : `${basePath}/${path}`;
+            router.replace(fullPath, options);
+        },
+        /**
+         * Navigate to an absolute path (ignores basePath)
+         */
+        pushAbsolute: (path, options) => {
+            router.push(path, options);
+        },
+        /**
+         * Replace with an absolute path (ignores basePath)
+         */
+        replaceAbsolute: (path, options) => {
+            router.replace(path, options);
+        },
+        /**
+         * Go back to the previous page
+         */
+        back: () => router.back(),
+        /**
+         * Get current query parameters
+         */
+        get query() {
+            return router.getQuery();
+        },
+        /**
+         * Get current pathname
+         */
+        get pathname() {
+            return router.getPathname();
+        },
+        /**
+         * The base path where the auth module is mounted
+         */
+        basePath,
+    }), [router, basePath]);
+    return navigator;
+};
+export { useNavigator };

package/build/src/hooks/useRequest.js

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { showMessage } from '../helpers/show-message';
+import { useAuthPackageContext } from './internal/useAuthPackageContext';
+import { createHttpClient } from '../helpers/network';
+const useRequest = () => {
+    const { token, logout, refreshSession } = useAuthPackageContext();
+    const { request } = useMemo(() => createHttpClient({
+        token,
+        onRefreshSession: async (token) => refreshSession?.({ token }),
+        onLogout: async () => logout(),
+    }), [token]);
+    const makeRequest = async ({ url, method, body, onSuccess, onFailure, ...axiosOptions }) => {
+        try {
+            const response = await request({
+                url,
+                method,
+                data: body,
+                ...axiosOptions,
+            });
+            onSuccess?.(response.data, response.headers);
+            return response.data;
+        }
+        catch (err) {
+            if (onFailure) {
+                onFailure(err);
+            }
+            if (err?.response?.status >= 500) {
+                showMessage({ message: "Something went wrong" });
+            }
+        }
+    };
+    return { makeRequest };
+};
+export { useRequest };

package/build/src/index.js

@@ -0,0 +1,23 @@
+// export contexts
+export * from './contexts/AuthContext';
+export { default as AuthContext } from './contexts/AuthContext';
+export * from './contexts/type';
+// export hooks
+export * from './hooks/useAuthContext';
+export * from './hooks/useRequest';
+export * from './hooks/useNavigator';
+// export axiosClient
+export * from './api/axiosClient';
+// export navigator/router
+export * from './navigator';
+// export components
+export * from './screens/Login/components/LoginWebComponent/index';
+export * from './screens/SignUp/components/SignUpWebComponent/index';
+export * from './screens/SSOLogin/SSOCallback/components/SSOCallbackComponent/index';
+// export partner SSO components
+export * from './screens/PartnerSSO/PartnerLogin/components/PartnerLoginWebComponent';
+export * from './screens/PartnerSSO/PartnerRegistration/components/PartnerRegistrationWebComponent';
+// export profile components
+export * from './screens/Profile';
+// export constants
+export { strongPasswordRequirements } from './constants/password-requirements';

package/build/src/navigator/index.js

@@ -0,0 +1,10 @@
+'use client';
+const AuthNavigator = () => {
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof window !== 'undefined') {
+            console.warn("[@truworth/twc-auth] We use only AuthNavigator for app navigation");
+        }
+    }
+    return null;
+};
+export { AuthNavigator };

package/build/src/navigator/index.native.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import Welcome from '../screens/Welcome';
+import EnterEmail from '../screens/EnterEmail/index.native';
+import EnterPassword from '../screens/EnterPassword/index.native';
+import SignUp from '../screens/SignUp/index.native';
+import CountryCode from '../screens/CountryCode/index.native';
+import CreatePassword from '../screens/CreatePassword/index.native';
+import UserConsent from '../screens/UserConsent/index.native';
+import VerifyMobile from '../screens/VerifyMobile/index.native';
+import VerifyEmail from '../screens/VerifyEmail/index.native';
+import LoginWithEmailOTP from '../screens/LoginWithEmailOTP/index.native';
+import VerifyResetPasswordOTP from '../screens/VerifyResetPasswordOTP/index.native';
+import ResetPassword from '../screens/ResetPassword/index.native';
+import SSOSearchOrganization from '../screens/SSOLogin/SearchOrganization/index.native';
+import SSOAuthenticationMethods from '../screens/SSOLogin/AuthenticationMethods/index.native';
+import SSOAuthWebView from '../screens/SSOLogin/AuthWebView/index.native';
+import SSOCallback from '../screens/SSOLogin/SSOCallback/index.native';
+import LoginWithMobileOTP from '../screens/LoginWithMobileOTP/index.native';
+import EnterMobile from '../screens/EnterMobile/index.native';
+import VerifyLinkPrimaryAccountEmailOTP from '../screens/VerifyLinkPrimaryAccountEmailOTP/index.native';
+import VerifyLinkPrimaryAccountMobileOTP from '../screens/VerifyLinkPrimaryAccountMobileOTP/index.native';
+const { Navigator, Screen } = createNativeStackNavigator();
+const AuthNavigator = () => {
+    return (_jsxs(Navigator, { screenOptions: { headerShown: false }, children: [_jsx(Screen, { name: "Welcome", component: Welcome }), _jsx(Screen, { name: "EnterEmail", component: EnterEmail }), _jsx(Screen, { name: "EnterPassword", component: EnterPassword }), _jsx(Screen, { name: "SignUp", component: SignUp }), _jsx(Screen, { name: "CountryCode", component: CountryCode }), _jsx(Screen, { name: "CreatePassword", component: CreatePassword }), _jsx(Screen, { name: "UserConsent", component: UserConsent }), _jsx(Screen, { name: "VerifyMobile", component: VerifyMobile }), _jsx(Screen, { name: "VerifyEmail", component: VerifyEmail }), _jsx(Screen, { name: "LoginWithEmailOTP", component: LoginWithEmailOTP }), _jsx(Screen, { name: "VerifyResetPasswordOTP", component: VerifyResetPasswordOTP }), _jsx(Screen, { name: "ResetPassword", component: ResetPassword }), _jsx(Screen, { name: "LoginWithMobileOTP", component: LoginWithMobileOTP }), _jsx(Screen, { name: "EnterMobile", component: EnterMobile }), _jsx(Screen, { name: "VerifyLinkPrimaryAccountEmailOTP", component: VerifyLinkPrimaryAccountEmailOTP }), _jsx(Screen, { name: "VerifyLinkPrimaryAccountMobileOTP", component: VerifyLinkPrimaryAccountMobileOTP }), _jsx(Screen, { name: "SSOSearchOrganization", component: SSOSearchOrganization }), _jsx(Screen, { name: "SSOAuthenticationMethods", component: SSOAuthenticationMethods }), _jsx(Screen, { name: "SSOAuthWebView", component: SSOAuthWebView }), _jsx(Screen, { name: "SSOCallback", component: SSOCallback })] }));
+};
+export { AuthNavigator };

package/build/src/screens/CountryCode/components/CountryCodeDropdown/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { Typography, SelectField, Flex } from '@truworth/twc-web-design';
+import { useCountryCode } from '../../hooks/internal/useCountryCode';
+export const CountryCodeDropdown = React.memo(({ selectedCountry, handleSelect }) => {
+    const { countryCodes: countries } = useCountryCode();
+    const isValidCountryCode = (code) => /^[a-z]{2}$/i.test(code); // only 2-letter codes
+    const allCountries = useMemo(() => {
+        const seen = new Set();
+        const uniqueCountries = countries.filter((item) => {
+            const rawCode = typeof item.countryCode === 'string' ? item.countryCode : '';
+            const code = rawCode.toLowerCase();
+            if (!isValidCountryCode(code))
+                return false; // filter invalid ones
+            if (seen.has(code))
+                return false;
+            seen.add(code);
+            return true;
+        });
+        return uniqueCountries.map((item) => {
+            const code = item.countryCode.toLowerCase();
+            const flagUrl = `https://cdn.thewellnesscorner.com/country-flags/${code}.png`;
+            return {
+                leftIcon: (_jsx(_Fragment, { children: isValidCountryCode(code) && (_jsx("img", { src: flagUrl, width: 20, height: 20, className: "h-5 w-5 shrink-0", alt: `${item.name} flag`, loading: "lazy" })) })),
+                label: (_jsxs(Typography, { type: "body", size: "small", children: [item.name, " (+", item.phoneCode, ")"] })),
+                value: code,
+                selectedField: (_jsxs(Flex, { align: "center", className: "gap-2 pl-2 pr-2 cursor-pointer", children: [isValidCountryCode(code) && (_jsx("img", { src: flagUrl, width: 20, height: 20, className: "h-5 w-5 shrink-0", alt: `${item.name} flag`, loading: "lazy" })), _jsx(Typography, { type: "body", size: "medium", className: "countryCode cursor-pointer", children: `+${item.phoneCode}` })] })),
+            };
+        });
+    }, [countries]);
+    return (_jsx(SelectField, { selectedValues: selectedCountry.countryCode, options: allCountries, className: "border-0 w-100 h-1", onSelect: (value) => {
+            const currSelectedCountry = countries.find((country) => country.countryCode.toLowerCase() === value);
+            if (currSelectedCountry) {
+                handleSelect(currSelectedCountry);
+            }
+        }, fullWidth: true, selectContentClassName: "h-32 pl-2 min-h-[30vh]", maxHeight: "400px", contentOffset: 10 }));
+});