@ews-admin/global-design-system 1.18.0 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.18.0",
+  "version": "1.21.0",
   "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";

package/src/utils/env-config.ts

@@ -49,7 +49,7 @@ function buildUrls(environment: Environment): Omit<EnvConfig, "env"> {
   return {
     bffUrl: `https://${prefix}api.${domain}/bff/api/v1`,
     loginBffUrl: `https://${prefix}api.${domain}/login-bff/api/v1`,
-    appUrl: `https://${prefix}app.${domain}`,
+    appUrl: environment === "prod" ? `https://${prefix}${domain}` : `https://${prefix}app.${domain}`,
     loginUrl: `https://${prefix}login.${domain}`,
     dashboardUrl: `https://${prefix}dashboard.${domain}`,
     adminUrl: `https://${prefix}admin.${domain}`,