@ews-admin/global-design-system 1.19.0 → 1.22.1

package/dist/utils/index.d.ts

@@ -25,7 +25,22 @@ export declare function formatCurrency(amount: number, currency?: string): strin
 export interface FormatDateOptions extends Intl.DateTimeFormatOptions {
     locale?: string | string[];
 }
-export declare function formatDate(date: Date | string | number, options?: FormatDateOptions): string;
+/**
+ * Parses a date value the way every date coming from these platforms'
+ * Java/Kotlin backends actually shows up, without the classic off-by-one
+ * timezone bug.
+ *
+ * A bare "YYYY-MM-DD" string is parsed by `new Date(...)` as UTC midnight
+ * (per the ECMAScript spec), which then shifts a day earlier once formatted
+ * in any timezone behind UTC. This function parses date-only strings (and
+ * Jackson's `[year, month, day, ...]` LocalDate/LocalDateTime array
+ * serialization) as local calendar components instead. Full ISO datetime
+ * strings (with a time and/or timezone), Date objects, and numeric
+ * timestamps are unaffected and still go through the normal `new Date(...)`
+ * parse.
+ */
+export declare function parseDateSafe(date: Date | string | number | number[]): Date;
+export declare function formatDate(date: Date | string | number | number[], options?: FormatDateOptions): string;
 /**
  * Utility function to debounce function calls
  * @param func - Function to debounce

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EACL,aAAa,EACb,iCAAiC,EACjC,gCAAgC,EAChC,qBAAqB,GACtB,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACzE,YAAY,EACV,SAAS,EACT,kBAAkB,EAClB,WAAW,GACZ,MAAM,cAAc,CAAC;AAEtB;;GAEG;AACH,eAAO,MAAM,QAAQ,QAAQ,CAAC;AAE9B;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAW,GAAG,MAAM,CAK1E;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,qBAAqB;IACnE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC5B;AAED,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,EAC5B,OAAO,CAAC,EAAE,iBAAiB,GAC1B,MAAM,CASR;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAChE,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACX,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,SAAQ,GAAG,MAAM,CAEjD;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAE7C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAMzD;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,WAAW,QAAQ;IACnB,WAAW,QAAQ;IACnB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,OAAO,YAAY;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,EAUlC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EACL,aAAa,EACb,iCAAiC,EACjC,gCAAgC,EAChC,qBAAqB,GACtB,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACzE,YAAY,EACV,SAAS,EACT,kBAAkB,EAClB,WAAW,GACZ,MAAM,cAAc,CAAC;AAEtB;;GAEG;AACH,eAAO,MAAM,QAAQ,QAAQ,CAAC;AAE9B;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAW,GAAG,MAAM,CAK1E;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,qBAAqB;IACnE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC5B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GACtC,IAAI,CAgBN;AAED,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,EACvC,OAAO,CAAC,EAAE,iBAAiB,GAC1B,MAAM,CASR;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAChE,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACX,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,SAAQ,GAAG,MAAM,CAEjD;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAE7C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAMzD;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,WAAW,QAAQ;IACnB,WAAW,QAAQ;IACnB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,OAAO,YAAY;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,EAUlC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.19.0",
+  "version": "1.22.1",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/PaymentDueBanner/PaymentDueBanner.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { AlertTriangle, X } from "lucide-react";
+
+/**
+ * The banner is purely presentational: the caller decides when to render it
+ * (e.g. due date within 7 days or overdue) and provides already-translated
+ * labels.
+ */
+export interface PaymentDueBannerProps {
+  title: string;
+  subtitle?: string;
+  /** Extra warning line shown under the subtitle (e.g. discount loss). */
+  warning?: string;
+  ctaLabel: string;
+  onCtaClick: () => void;
+  /** When omitted, the dismiss button is not rendered. */
+  onDismiss?: () => void;
+  dismissLabel?: string;
+}
+
+/**
+ * Full-width payment reminder banner (red gradient) used above the app
+ * content when a licence payment is due soon or overdue.
+ */
+const PaymentDueBanner: React.FC<PaymentDueBannerProps> = ({
+  title,
+  subtitle,
+  warning,
+  ctaLabel,
+  onCtaClick,
+  onDismiss,
+  dismissLabel = "Close",
+}) => (
+  <div
+    data-testid="payment-banner"
+    className="overflow-hidden bg-gradient-to-r from-red-600 to-red-700 shadow-lg"
+  >
+    <div className="px-6 py-8 sm:px-8">
+      <div className="flex flex-col space-y-6 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
+        {/* Left: icon + text */}
+        <div className="flex items-center space-x-4">
+          <AlertTriangle className="w-8 h-8 text-white shrink-0" />
+          <div className="flex-1 min-w-0">
+            <h3 className="text-2xl font-bold text-white">{title}</h3>
+            {subtitle && (
+              <p className="mt-2 text-base text-red-100">{subtitle}</p>
+            )}
+            {warning && (
+              <p className="mt-1 text-sm font-medium text-red-200">{warning}</p>
+            )}
+          </div>
+        </div>
+
+        {/* Right: actions */}
+        <div className="flex flex-col flex-shrink-0 gap-3 sm:flex-row sm:gap-4 sm:items-center">
+          <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"
+          >
+            {ctaLabel}
+          </button>
+          {onDismiss && (
+            <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}
+            >
+              <X className="w-5 h-5 text-white" />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export { PaymentDueBanner };

package/src/components/PaymentDueBanner/index.ts

@@ -0,0 +1,2 @@
+export { PaymentDueBanner } from "./PaymentDueBanner";
+export type { PaymentDueBannerProps } from "./PaymentDueBanner";

package/src/index.ts

@@ -49,6 +49,9 @@ export type { TagProps } from "./components/Tag";
 export { TagList } from "./components/TagList";
 export type { TagListProps } from "./components/TagList";
 
+export { PaymentDueBanner } from "./components/PaymentDueBanner";
+export type { PaymentDueBannerProps } from "./components/PaymentDueBanner";
+
 // Molecules
 export { SpecialtySearchAutocomplete } from "./molecules";
 export type { Specialty, SpecialtySearchAutocompleteProps } from "./molecules";
@@ -76,6 +79,7 @@ export {
   getRegionOptions,
   getRegionsByCountry,
   isValidPhoneNumber,
+  parseDateSafe,
   SupportedCountry,
 } from "./utils";
 export type {

package/src/utils/index.ts

@@ -51,12 +51,46 @@ export interface FormatDateOptions extends Intl.DateTimeFormatOptions {
   locale?: string | string[];
 }
 
+/**
+ * Parses a date value the way every date coming from these platforms'
+ * Java/Kotlin backends actually shows up, without the classic off-by-one
+ * timezone bug.
+ *
+ * A bare "YYYY-MM-DD" string is parsed by `new Date(...)` as UTC midnight
+ * (per the ECMAScript spec), which then shifts a day earlier once formatted
+ * in any timezone behind UTC. This function parses date-only strings (and
+ * Jackson's `[year, month, day, ...]` LocalDate/LocalDateTime array
+ * serialization) as local calendar components instead. Full ISO datetime
+ * strings (with a time and/or timezone), Date objects, and numeric
+ * timestamps are unaffected and still go through the normal `new Date(...)`
+ * parse.
+ */
+export function parseDateSafe(
+  date: Date | string | number | number[]
+): Date {
+  if (Array.isArray(date)) {
+    const [y, m, d, h = 0, min = 0, s = 0] = date;
+    return new Date(y, m - 1, d, h, min, s);
+  }
+  if (typeof date === "string") {
+    const dateOnlyMatch = /^(\d{4})-(\d{2})-(\d{2})$/.exec(date);
+    if (dateOnlyMatch) {
+      return new Date(
+        Number(dateOnlyMatch[1]),
+        Number(dateOnlyMatch[2]) - 1,
+        Number(dateOnlyMatch[3])
+      );
+    }
+  }
+  return new Date(date);
+}
+
 export function formatDate(
-  date: Date | string | number,
+  date: Date | string | number | number[],
   options?: FormatDateOptions
 ): string {
   const { locale = "en-US", ...intlOptions } = options ?? {};
-  const dateObj = new Date(date);
+  const dateObj = parseDateSafe(date);
   return new Intl.DateTimeFormat(locale, {
     year: "numeric",
     month: "long",