@ews-admin/global-design-system 1.25.0 → 1.27.0

package/dist/index.js

@@ -226,6 +226,46 @@ function formatPhoneNumberWithCountryCode(phoneNumber, countryCode = "+221") {
         return "";
     return `${countryCode}${cleaned}`;
 }
+/**
+ * National digit groups used to display a phone number, per country code:
+ * Senegal numbers have 9 national digits (77 123 45 67, 33 823 45 67), Chad
+ * numbers 8 (66 12 34 56).
+ */
+const DISPLAY_DIGIT_GROUPS = {
+    "+221": [2, 3, 2, 2],
+    "+235": [2, 2, 2, 2],
+};
+/**
+ * Formats a phone number for display only: the country code, then the
+ * national digits in their usual groups. Do not use it for values sent to the
+ * API, form values or tel: links; formatPhoneNumberWithCountryCode gives the
+ * unspaced value for those. A number from another country, or of an
+ * unexpected length, is returned as formatPhoneNumberWithCountryCode returns it.
+ *
+ * @example
+ * formatPhoneNumberForDisplay("221771234567")  // "+221 77 123 45 67" (backend's storage format)
+ * formatPhoneNumberForDisplay("771234567")     // "+221 77 123 45 67"
+ * formatPhoneNumberForDisplay("+23566123456")  // "+235 66 12 34 56"
+ * formatPhoneNumberForDisplay("+22177123")     // "+22177123" (unexpected length, unchanged)
+ */
+function formatPhoneNumberForDisplay(phoneNumber, countryCode = "+221") {
+    const canonical = formatPhoneNumberWithCountryCode(phoneNumber, countryCode);
+    const code = COUNTRY_CODES.find(({ code: c }) => canonical.startsWith(c))?.code;
+    const groups = code ? DISPLAY_DIGIT_GROUPS[code] : undefined;
+    if (!code || !groups)
+        return canonical;
+    const national = canonical.slice(code.length).replace(/[\s-]/g, "");
+    const expectedLength = groups.reduce((sum, size) => sum + size, 0);
+    if (!/^\d+$/.test(national) || national.length !== expectedLength)
+        return canonical;
+    const parts = [];
+    let start = 0;
+    for (const size of groups) {
+        parts.push(national.slice(start, start + size));
+        start += size;
+    }
+    return `${code} ${parts.join(" ")}`;
+}
 
 /**
  * Default currency for price formatting
@@ -35210,6 +35250,12 @@ const TagList = ({ items, maxVisible = DEFAULT_MAX, showMoreLabel, showLessLabel
  */
 const PaymentDueBanner = ({ title, subtitle, warning, ctaLabel, onCtaClick, onDismiss, dismissLabel = "Close", }) => (jsxRuntime.jsx("div", { "data-testid": "payment-banner", className: "overflow-hidden bg-gradient-to-r from-red-600 to-red-700 shadow-lg", children: jsxRuntime.jsx("div", { className: "px-6 py-8 sm:px-8", children: jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 sm:flex-row sm:items-center sm:justify-between sm:space-y-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [jsxRuntime.jsx(TriangleAlert, { className: "w-8 h-8 text-white shrink-0" }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsx("h3", { className: "text-2xl font-bold text-white", children: title }), subtitle && (jsxRuntime.jsx("p", { className: "mt-2 text-base text-red-100", children: subtitle })), warning && (jsxRuntime.jsx("p", { className: "mt-1 text-sm font-medium text-red-200", children: warning }))] })] }), jsxRuntime.jsxs("div", { className: "flex flex-col flex-shrink-0 gap-3 sm:flex-row sm:gap-4 sm:items-center", children: [jsxRuntime.jsx("button", { onClick: onCtaClick, className: "w-full px-8 py-3 text-base font-semibold text-red-600 bg-white rounded-lg shadow-sm transition-all duration-200 sm:w-auto hover:bg-red-50 hover:shadow-md", children: ctaLabel }), onDismiss && (jsxRuntime.jsx("button", { onClick: onDismiss, className: "self-start p-2 rounded-full transition-colors bg-white/10 hover:bg-white/20 sm:self-auto", "aria-label": dismissLabel, children: jsxRuntime.jsx(X, { className: "w-5 h-5 text-white" }) }))] })] }) }) }));
 
+/**
+ * Full-screen loader (lock icon with a spinner) shown while the user's
+ * session is being checked.
+ */
+const SecureLoader = ({ label, description }) => (jsxRuntime.jsx("div", { "data-testid": "secure-loader", className: "flex min-h-screen items-center justify-center bg-gray-100", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center rounded-lg bg-white p-6 shadow-lg", children: [jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(Lock, { className: "h-16 w-16 text-gray-500" }), jsxRuntime.jsx("div", { className: "absolute bottom-2 right-1 h-6 w-6 animate-spin rounded-full border-4 border-gray-300 border-t-green-500" })] }), jsxRuntime.jsx("p", { className: "mt-4 text-lg text-gray-600", children: label }), description && (jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500", children: description }))] }) }));
+
 const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesChange, specialties: availableSpecialties, placeholder = "Search and select medical specialties...", className = "", disabled = false, maxSelections, showSelectedCount = true, title = "Medical Specialties", label = "Select Specialties", getSelectedCountText, }) => {
     const [filteredSpecialties, setFilteredSpecialties] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(false);
@@ -39995,6 +40041,7 @@ exports.SearchX = SearchX;
 exports.SearchXIcon = SearchX;
 exports.Section = Section;
 exports.SectionIcon = Section;
+exports.SecureLoader = SecureLoader;
 exports.Select = Select;
 exports.Send = Send;
 exports.SendHorizonal = SendHorizontal;
@@ -40865,6 +40912,7 @@ exports.extractCountryCodeFromPhoneNumber = extractCountryCodeFromPhoneNumber;
 exports.formatCurrency = formatCurrency;
 exports.formatDate = formatDate;
 exports.formatNumeric = formatNumeric;
+exports.formatPhoneNumberForDisplay = formatPhoneNumberForDisplay;
 exports.formatPhoneNumberWithCountryCode = formatPhoneNumberWithCountryCode;
 exports.generateId = generateId;
 exports.getDefaultCountryCode = getDefaultCountryCode;