@fluid-app/portal-sdk 0.1.329 → 0.1.331

package/dist/{PointsWidget-BTteH_l8.cjs → PointsWidget-Bgq6UN10.cjs}

@@ -17,27 +17,31 @@ const PREVIEW_DATA = {
 	entries: [
 		{
 			id: 1,
-			description: "Purchase March 3rd",
 			amount: 20,
-			createdAt: daysAgo(3)
+			createdAt: daysAgo(3),
+			transactionType: "new_order",
+			hasSource: true
 		},
 		{
 			id: 2,
-			description: "Referral Bonus",
 			amount: 50,
-			createdAt: daysAgo(14)
+			createdAt: daysAgo(14),
+			transactionType: "referral_bonus",
+			hasSource: true
 		},
 		{
 			id: 3,
-			description: "Points Redemption",
 			amount: -75,
-			createdAt: daysAgo(60)
+			createdAt: daysAgo(60),
+			transactionType: null,
+			hasSource: true
 		},
 		{
 			id: 4,
-			description: "Welcome Reward",
 			amount: 30,
-			createdAt: daysAgo(90)
+			createdAt: daysAgo(90),
+			transactionType: "welcome_reward",
+			hasSource: true
 		}
 	]
 };
@@ -68,45 +72,45 @@ var PointsWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
 	PointsWidget: () => PointsWidget,
 	pointsWidgetPropertySchema: () => pointsWidgetPropertySchema
 });
-const formatRelativeTime = (dateString) => {
-	const now = /* @__PURE__ */ new Date();
-	const date = new Date(dateString);
-	const diffMs = now.getTime() - date.getTime();
-	const diffDays = Math.floor(diffMs / 864e5);
-	if (diffDays < 1) return "Today";
-	if (diffDays === 1) return "1 day ago";
-	if (diffDays < 7) return `${diffDays} days ago`;
-	if (diffDays < 14) return "1 week ago";
-	if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;
-	if (diffDays < 60) return "1 month ago";
-	return `${Math.floor(diffDays / 30)} months ago`;
-};
 const formatBalance = (balance) => {
 	return balance.toLocaleString("en-US");
 };
-function PointsEntryRow({ entry, textColor, accentColor }) {
-	const sign = entry.amount >= 0 ? "+" : "-";
+function formatTransactionType(entry) {
+	if (entry.transactionType) return entry.transactionType.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+	if (entry.hasSource) return entry.amount > 0 ? "Points Awarded" : "Points Redeemed";
+	return "Transaction";
+}
+function formatEntryDate(dateString) {
+	if (!dateString) return "";
+	return new Date(dateString).toLocaleDateString(void 0, {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+}
+function PointsEntryRow({ entry, isLast, textColor, accentColor, backgroundColor }) {
+	const isPositive = entry.amount >= 0;
+	const prefix = isPositive ? "+" : "";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex w-full items-center gap-3",
+		className: "flex flex-row items-stretch gap-3",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: `text-sm text-${textColor} truncate`,
-				children: entry.description
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: `text-[10px] text-${textColor} leading-tight opacity-70`,
-				children: formatRelativeTime(entry.createdAt)
+			className: "relative flex w-2 flex-col items-center",
+			children: [!isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `bg-${textColor}/40 absolute top-3 -bottom-3 left-1/2 w-px -translate-x-1/2` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `border-${textColor}/60 bg-${backgroundColor} relative mt-3 h-2 w-2 shrink-0 rounded-full border` })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-1 flex-row items-start justify-between py-1.5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-0 flex-col",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `text-sm font-medium text-${textColor} truncate`,
+					children: formatTransactionType(entry)
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `text-sm text-${textColor} opacity-70`,
+					children: formatEntryDate(entry.createdAt)
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `text-sm font-medium ${isPositive ? `text-${accentColor}` : "text-destructive"}`,
+				children: [prefix, entry.amount.toLocaleString("en-US")]
 			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: `bg-${accentColor}/20 shrink-0 rounded-md px-1.5`,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: `text-xs font-medium text-${accentColor} opacity-70`,
-				children: [
-					sign,
-					Math.abs(entry.amount).toLocaleString("en-US"),
-					"pts"
-				]
-			})
 		})]
 	});
 }
@@ -160,11 +164,13 @@ function PointsWidget({ titleEnabled = true, title = "Points", titleFontSize = "
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `bg-${textColor}/20 h-px w-full` }),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							id: historyPanelId,
-							className: `flex flex-col gap-3 ${!historyOpen ? "hidden" : ""}`,
-							children: data.entries.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointsEntryRow, {
+							className: `flex flex-col ${!historyOpen ? "hidden" : ""}`,
+							children: data.entries.map((entry, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointsEntryRow, {
 								entry,
+								isLast: index === data.entries.length - 1,
 								textColor,
-								accentColor
+								accentColor,
+								backgroundColor
 							}, entry.id))
 						})
 					]
@@ -252,7 +258,7 @@ const pointsWidgetPropertySchema = {
 		require_registries.getColorField({
 			key: "accentColor",
 			label: "Accent Color",
-			description: "Color for points badges and highlights",
+			description: "Color for positive points amounts",
 			defaultValue: "primary",
 			group: "Design"
 		}),
@@ -312,4 +318,4 @@ Object.defineProperty(exports, "pointsWidgetPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=PointsWidget-BTteH_l8.cjs.map
+//# sourceMappingURL=PointsWidget-Bgq6UN10.cjs.map

package/dist/PointsWidget-Bgq6UN10.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointsWidget-Bgq6UN10.cjs","names":["useWidgetsApi","useWidgetPreviewContext","useDataSourceRegistryConfig","borderWidthClasses","borderColorClasses","ErrorState","Coins","ChevronDown","getFontSizeField","getColorField","getPaddingField","getBorderRadiusField","getBorderWidthField","getBorderColorField"],"sources":["../../widgets/src/hooks/use-points-ledger.preview.ts","../../widgets/src/hooks/use-points-ledger.ts","../../widgets/src/widgets/PointsWidget.tsx"],"sourcesContent":["import type { PointsData } from \"@fluid-app/portal-core/widgets-api-types\";\n\nconst now = new Date();\n\nfunction daysAgo(days: number): string {\n  return new Date(now.getTime() - days * 86_400_000).toISOString();\n}\n\nexport const PREVIEW_DATA: PointsData = {\n  balance: 25,\n  entries: [\n    {\n      id: 1,\n      amount: 20,\n      createdAt: daysAgo(3),\n      transactionType: \"new_order\",\n      hasSource: true,\n    },\n    {\n      id: 2,\n      amount: 50,\n      createdAt: daysAgo(14),\n      transactionType: \"referral_bonus\",\n      hasSource: true,\n    },\n    {\n      id: 3,\n      amount: -75,\n      createdAt: daysAgo(60),\n      transactionType: null,\n      hasSource: true,\n    },\n    {\n      id: 4,\n      amount: 30,\n      createdAt: daysAgo(90),\n      transactionType: \"welcome_reward\",\n      hasSource: true,\n    },\n  ],\n};\n","import { useQuery, type UseQueryResult } from \"@tanstack/react-query\";\nimport { useWidgetsApi } from \"@fluid-app/portal-core/widgets-api-context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/portal-react/data-sources/preview-context\";\nimport { useDataSourceRegistryConfig } from \"@fluid-app/portal-react/data-sources/registry-context\";\nimport { PREVIEW_DATA } from \"./use-points-ledger.preview\";\nimport type { PointsData } from \"@fluid-app/portal-core/widgets-api-types\";\n\nexport type {\n  PointsData,\n  PointsEntry,\n} from \"@fluid-app/portal-core/widgets-api-types\";\n\nexport const POINTS_LEDGER_QUERY_KEY = \"points-ledger\" as const;\n\nexport function usePointsLedger(): UseQueryResult<PointsData, Error> {\n  const widgetsApi = useWidgetsApi();\n  const { isPreview } = useWidgetPreviewContext();\n  const registryConfig = useDataSourceRegistryConfig();\n  const { baseUrl } = registryConfig;\n  const customerId = registryConfig.variables?.customer_id;\n\n  // Contract: the BFF adapter (portal app, composite factory spreads BFF over\n  // legacy) ignores customerId and infers the customer from the JWT, so the\n  // portal renders this widget with no registry-variable plumbing. The legacy\n  // adapter (fluid-admin) builds /v202506/customers/{customerId}/points_ledgers\n  // and MUST receive a real id; that consumer always supplies one via registry\n  // variables, so empty string never reaches the legacy URL in practice. If a\n  // future caller wires this hook to a legacy-only adapter, configure\n  // registry variables.customer_id at the provider — otherwise the request\n  // would 404 on /customers//points_ledgers.\n  return useQuery({\n    queryKey: [\n      \"portal-widget-use\",\n      POINTS_LEDGER_QUERY_KEY,\n      isPreview ? \"preview\" : baseUrl,\n      customerId ?? null,\n    ] as const,\n    queryFn: ({ signal }) =>\n      widgetsApi.fetchPointsLedger(customerId ?? \"\", signal),\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\n  });\n}\n","import { useId, useState, type ComponentProps } from \"react\";\nimport type React from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  BorderWidthOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/portal-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport {\n  getBorderRadiusField,\n  getBorderWidthField,\n  getBorderColorField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n  borderWidthClasses,\n  borderColorClasses,\n} from \"../core/fields\";\nimport { usePointsLedger, type PointsEntry } from \"../hooks/use-points-ledger\";\nimport { ErrorState } from \"../components/error-state\";\nimport { ChevronDown, Coins } from \"lucide-react\";\n\nconst formatBalance = (balance: number): string => {\n  return balance.toLocaleString(\"en-US\");\n};\n\nfunction formatTransactionType(entry: PointsEntry): string {\n  if (entry.transactionType) {\n    return entry.transactionType\n      .split(\"_\")\n      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n      .join(\" \");\n  }\n  if (entry.hasSource) {\n    return entry.amount > 0 ? \"Points Awarded\" : \"Points Redeemed\";\n  }\n  return \"Transaction\";\n}\n\nfunction formatEntryDate(dateString: string): string {\n  if (!dateString) return \"\";\n  const date = new Date(dateString);\n  return date.toLocaleDateString(undefined, {\n    month: \"short\",\n    day: \"numeric\",\n    year: \"numeric\",\n  });\n}\n\ntype PointsWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  title?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Balance\n  balanceColor?: ColorOptions;\n\n  // History\n  historyEnabled?: boolean;\n  historyTitle?: string;\n\n  // Styling\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n  borderWidth?: BorderWidthOptions;\n  borderColor?: ColorOptions;\n};\n\nfunction PointsEntryRow({\n  entry,\n  isLast,\n  textColor,\n  accentColor,\n  backgroundColor,\n}: {\n  entry: PointsEntry;\n  isLast: boolean;\n  textColor: ColorOptions;\n  accentColor: ColorOptions;\n  backgroundColor: ColorOptions;\n}) {\n  const isPositive = entry.amount >= 0;\n  const prefix = isPositive ? \"+\" : \"\";\n  return (\n    <div className=\"flex flex-row items-stretch gap-3\">\n      <div className=\"relative flex w-2 flex-col items-center\">\n        {!isLast && (\n          <div\n            className={`bg-${textColor}/40 absolute top-3 -bottom-3 left-1/2 w-px -translate-x-1/2`}\n          />\n        )}\n        <div\n          className={`border-${textColor}/60 bg-${backgroundColor} relative mt-3 h-2 w-2 shrink-0 rounded-full border`}\n        />\n      </div>\n      <div className=\"flex flex-1 flex-row items-start justify-between py-1.5\">\n        <div className=\"flex min-w-0 flex-col\">\n          <div className={`text-sm font-medium text-${textColor} truncate`}>\n            {formatTransactionType(entry)}\n          </div>\n          <div className={`text-sm text-${textColor} opacity-70`}>\n            {formatEntryDate(entry.createdAt)}\n          </div>\n        </div>\n        <div\n          className={`text-sm font-medium ${isPositive ? `text-${accentColor}` : \"text-destructive\"}`}\n        >\n          {prefix}\n          {entry.amount.toLocaleString(\"en-US\")}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function PointsWidget({\n  // Title\n  titleEnabled = true,\n  title = \"Points\",\n  titleFontSize = \"md\",\n  titleColor = \"foreground\",\n\n  // Balance\n  balanceColor = \"primary\",\n\n  // History\n  historyEnabled = true,\n  historyTitle = \"History\",\n\n  // Styling\n  background = { type: \"solid\", color: \"background\" },\n  textColor = \"foreground\",\n  accentColor = \"primary\",\n  padding = 4,\n  borderRadius = \"md\",\n  borderWidth = \"none\",\n  borderColor = \"muted\",\n\n  className,\n  ...props\n}: PointsWidgetProps): React.JSX.Element {\n  const [historyOpen, setHistoryOpen] = useState(false);\n  const historyPanelId = useId();\n\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n\n  const { data, isLoading, isError } = usePointsLedger();\n\n  return (\n    <div\n      className={`@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} ${borderWidthClasses[borderWidth]} ${borderWidth !== \"none\" ? borderColorClasses[borderColor] : \"\"} ${className ?? \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      <div className={`p-${padding} flex flex-col gap-2.5`}>\n        {/* Header: Title + Balance */}\n        {titleEnabled && (\n          <h2\n            className={`text-${titleFontSize} font-header font-bold text-${titleColor}`}\n          >\n            {title}\n          </h2>\n        )}\n        {!isLoading && data && (\n          <span\n            className={`text-3xl font-semibold text-${balanceColor} font-header leading-snug`}\n          >\n            {formatBalance(data.balance)}\n          </span>\n        )}\n\n        {/* Loading */}\n        {isLoading ? (\n          <div className=\"flex min-h-[60px] items-center justify-center\">\n            <div className=\"h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n          </div>\n        ) : isError ? (\n          <ErrorState />\n        ) : historyEnabled && (!data || data.entries.length === 0) ? (\n          /* Empty state — only shown when history is enabled but no entries */\n          <div className=\"flex min-h-[60px] flex-col items-center justify-center gap-2\">\n            <Coins className={`size-10 text-${textColor} opacity-30`} />\n            <p className={`text-sm font-semibold text-${textColor} opacity-50`}>\n              No Points Activity\n            </p>\n          </div>\n        ) : historyEnabled && data && data.entries.length > 0 ? (\n          /* History dropdown */\n          <div className=\"flex flex-col gap-2\">\n            {/* Dropdown toggle */}\n            <button\n              type=\"button\"\n              aria-expanded={historyOpen}\n              aria-controls={historyPanelId}\n              onClick={() => setHistoryOpen((prev) => !prev)}\n              className={`flex w-full items-center text-xs font-semibold text-${textColor} cursor-pointer`}\n            >\n              <span className=\"flex-1 text-left\">{historyTitle}</span>\n              <ChevronDown\n                className={`size-4 transition-transform duration-200 ${historyOpen ? \"rotate-180\" : \"\"}`}\n              />\n            </button>\n            <div className={`bg-${textColor}/20 h-px w-full`} />\n\n            {/* Collapsible entries */}\n            <div\n              id={historyPanelId}\n              className={`flex flex-col ${!historyOpen ? \"hidden\" : \"\"}`}\n            >\n              {data.entries.map((entry, index) => (\n                <PointsEntryRow\n                  key={entry.id}\n                  entry={entry}\n                  isLast={index === data.entries.length - 1}\n                  textColor={textColor}\n                  accentColor={accentColor}\n                  backgroundColor={backgroundColor}\n                />\n              ))}\n            </div>\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nexport const pointsWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"PointsWidget\",\n  displayName: \"Points\",\n  fields: [\n    // Title group\n    {\n      key: \"titleEnabled\",\n      label: \"Show Title\",\n      type: \"boolean\",\n      description: \"Toggle title visibility\",\n      defaultValue: true,\n\n      group: \"Title\",\n    },\n    {\n      key: \"title\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Title text displayed above the balance\",\n      defaultValue: \"Points\",\n\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      key: \"titleFontSize\",\n      label: \"Title Font Size\",\n      description: \"Font size for the title\",\n      defaultValue: \"md\",\n\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the title\",\n      defaultValue: \"foreground\",\n\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n\n    // Balance group\n    getColorField({\n      key: \"balanceColor\",\n      label: \"Balance Color\",\n      description: \"Color for the points balance number\",\n      defaultValue: \"primary\",\n\n      group: \"Balance\",\n    }),\n\n    // History group\n    {\n      key: \"historyEnabled\",\n      label: \"Show History\",\n      type: \"boolean\",\n      description: \"Show a collapsible history dropdown below the balance\",\n      defaultValue: true,\n\n      group: \"History\",\n    },\n    {\n      key: \"historyTitle\",\n      label: \"History Title\",\n      type: \"text\",\n      description: \"Title for the history dropdown\",\n      defaultValue: \"History\",\n\n      group: \"History\",\n      requiresKeyToBeTrue: \"historyEnabled\",\n    },\n\n    // Design group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the widget\",\n      defaultValue: \"background\",\n\n      group: \"Design\",\n    },\n    getColorField({\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Default text color\",\n      defaultValue: \"foreground\",\n\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color for positive points amounts\",\n      defaultValue: \"primary\",\n\n      group: \"Design\",\n    }),\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n\n      group: \"Design\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Widget padding\",\n      defaultValue: 4,\n\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Widget border radius\",\n      defaultValue: \"md\",\n\n      group: \"Design\",\n    }),\n    getBorderWidthField({\n      key: \"borderWidth\",\n      label: \"Border Width\",\n      description: \"Widget border width\",\n      defaultValue: \"none\",\n\n      group: \"Design\",\n    }),\n    getBorderColorField({\n      key: \"borderColor\",\n      label: \"Border Color\",\n      description: \"Widget border color\",\n      defaultValue: \"muted\",\n\n      group: \"Design\",\n    }),\n  ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}

package/dist/{PointsWidget-BylUmQaD.mjs → PointsWidget-DapuzCqJ.mjs}

@@ -17,27 +17,31 @@ const PREVIEW_DATA = {
 	entries: [
 		{
 			id: 1,
-			description: "Purchase March 3rd",
 			amount: 20,
-			createdAt: daysAgo(3)
+			createdAt: daysAgo(3),
+			transactionType: "new_order",
+			hasSource: true
 		},
 		{
 			id: 2,
-			description: "Referral Bonus",
 			amount: 50,
-			createdAt: daysAgo(14)
+			createdAt: daysAgo(14),
+			transactionType: "referral_bonus",
+			hasSource: true
 		},
 		{
 			id: 3,
-			description: "Points Redemption",
 			amount: -75,
-			createdAt: daysAgo(60)
+			createdAt: daysAgo(60),
+			transactionType: null,
+			hasSource: true
 		},
 		{
 			id: 4,
-			description: "Welcome Reward",
 			amount: 30,
-			createdAt: daysAgo(90)
+			createdAt: daysAgo(90),
+			transactionType: "welcome_reward",
+			hasSource: true
 		}
 	]
 };
@@ -68,45 +72,45 @@ var PointsWidget_exports = /* @__PURE__ */ __exportAll({
 	PointsWidget: () => PointsWidget,
 	pointsWidgetPropertySchema: () => pointsWidgetPropertySchema
 });
-const formatRelativeTime = (dateString) => {
-	const now = /* @__PURE__ */ new Date();
-	const date = new Date(dateString);
-	const diffMs = now.getTime() - date.getTime();
-	const diffDays = Math.floor(diffMs / 864e5);
-	if (diffDays < 1) return "Today";
-	if (diffDays === 1) return "1 day ago";
-	if (diffDays < 7) return `${diffDays} days ago`;
-	if (diffDays < 14) return "1 week ago";
-	if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;
-	if (diffDays < 60) return "1 month ago";
-	return `${Math.floor(diffDays / 30)} months ago`;
-};
 const formatBalance = (balance) => {
 	return balance.toLocaleString("en-US");
 };
-function PointsEntryRow({ entry, textColor, accentColor }) {
-	const sign = entry.amount >= 0 ? "+" : "-";
+function formatTransactionType(entry) {
+	if (entry.transactionType) return entry.transactionType.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+	if (entry.hasSource) return entry.amount > 0 ? "Points Awarded" : "Points Redeemed";
+	return "Transaction";
+}
+function formatEntryDate(dateString) {
+	if (!dateString) return "";
+	return new Date(dateString).toLocaleDateString(void 0, {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+}
+function PointsEntryRow({ entry, isLast, textColor, accentColor, backgroundColor }) {
+	const isPositive = entry.amount >= 0;
+	const prefix = isPositive ? "+" : "";
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex w-full items-center gap-3",
+		className: "flex flex-row items-stretch gap-3",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ jsx("p", {
-				className: `text-sm text-${textColor} truncate`,
-				children: entry.description
-			}), /* @__PURE__ */ jsx("p", {
-				className: `text-[10px] text-${textColor} leading-tight opacity-70`,
-				children: formatRelativeTime(entry.createdAt)
+			className: "relative flex w-2 flex-col items-center",
+			children: [!isLast && /* @__PURE__ */ jsx("div", { className: `bg-${textColor}/40 absolute top-3 -bottom-3 left-1/2 w-px -translate-x-1/2` }), /* @__PURE__ */ jsx("div", { className: `border-${textColor}/60 bg-${backgroundColor} relative mt-3 h-2 w-2 shrink-0 rounded-full border` })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 flex-row items-start justify-between py-1.5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-col",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: `text-sm font-medium text-${textColor} truncate`,
+					children: formatTransactionType(entry)
+				}), /* @__PURE__ */ jsx("div", {
+					className: `text-sm text-${textColor} opacity-70`,
+					children: formatEntryDate(entry.createdAt)
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: `text-sm font-medium ${isPositive ? `text-${accentColor}` : "text-destructive"}`,
+				children: [prefix, entry.amount.toLocaleString("en-US")]
 			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: `bg-${accentColor}/20 shrink-0 rounded-md px-1.5`,
-			children: /* @__PURE__ */ jsxs("span", {
-				className: `text-xs font-medium text-${accentColor} opacity-70`,
-				children: [
-					sign,
-					Math.abs(entry.amount).toLocaleString("en-US"),
-					"pts"
-				]
-			})
 		})]
 	});
 }
@@ -160,11 +164,13 @@ function PointsWidget({ titleEnabled = true, title = "Points", titleFontSize = "
 						/* @__PURE__ */ jsx("div", { className: `bg-${textColor}/20 h-px w-full` }),
 						/* @__PURE__ */ jsx("div", {
 							id: historyPanelId,
-							className: `flex flex-col gap-3 ${!historyOpen ? "hidden" : ""}`,
-							children: data.entries.map((entry) => /* @__PURE__ */ jsx(PointsEntryRow, {
+							className: `flex flex-col ${!historyOpen ? "hidden" : ""}`,
+							children: data.entries.map((entry, index) => /* @__PURE__ */ jsx(PointsEntryRow, {
 								entry,
+								isLast: index === data.entries.length - 1,
 								textColor,
-								accentColor
+								accentColor,
+								backgroundColor
 							}, entry.id))
 						})
 					]
@@ -252,7 +258,7 @@ const pointsWidgetPropertySchema = {
 		getColorField({
 			key: "accentColor",
 			label: "Accent Color",
-			description: "Color for points badges and highlights",
+			description: "Color for positive points amounts",
 			defaultValue: "primary",
 			group: "Design"
 		}),
@@ -295,4 +301,4 @@ const pointsWidgetPropertySchema = {
 //#endregion
 export { PointsWidget_exports as n, pointsWidgetPropertySchema as r, PointsWidget as t };
 
-//# sourceMappingURL=PointsWidget-BylUmQaD.mjs.map
+//# sourceMappingURL=PointsWidget-DapuzCqJ.mjs.map

package/dist/PointsWidget-DapuzCqJ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointsWidget-DapuzCqJ.mjs","names":[],"sources":["../../widgets/src/hooks/use-points-ledger.preview.ts","../../widgets/src/hooks/use-points-ledger.ts","../../widgets/src/widgets/PointsWidget.tsx"],"sourcesContent":["import type { PointsData } from \"@fluid-app/portal-core/widgets-api-types\";\n\nconst now = new Date();\n\nfunction daysAgo(days: number): string {\n  return new Date(now.getTime() - days * 86_400_000).toISOString();\n}\n\nexport const PREVIEW_DATA: PointsData = {\n  balance: 25,\n  entries: [\n    {\n      id: 1,\n      amount: 20,\n      createdAt: daysAgo(3),\n      transactionType: \"new_order\",\n      hasSource: true,\n    },\n    {\n      id: 2,\n      amount: 50,\n      createdAt: daysAgo(14),\n      transactionType: \"referral_bonus\",\n      hasSource: true,\n    },\n    {\n      id: 3,\n      amount: -75,\n      createdAt: daysAgo(60),\n      transactionType: null,\n      hasSource: true,\n    },\n    {\n      id: 4,\n      amount: 30,\n      createdAt: daysAgo(90),\n      transactionType: \"welcome_reward\",\n      hasSource: true,\n    },\n  ],\n};\n","import { useQuery, type UseQueryResult } from \"@tanstack/react-query\";\nimport { useWidgetsApi } from \"@fluid-app/portal-core/widgets-api-context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/portal-react/data-sources/preview-context\";\nimport { useDataSourceRegistryConfig } from \"@fluid-app/portal-react/data-sources/registry-context\";\nimport { PREVIEW_DATA } from \"./use-points-ledger.preview\";\nimport type { PointsData } from \"@fluid-app/portal-core/widgets-api-types\";\n\nexport type {\n  PointsData,\n  PointsEntry,\n} from \"@fluid-app/portal-core/widgets-api-types\";\n\nexport const POINTS_LEDGER_QUERY_KEY = \"points-ledger\" as const;\n\nexport function usePointsLedger(): UseQueryResult<PointsData, Error> {\n  const widgetsApi = useWidgetsApi();\n  const { isPreview } = useWidgetPreviewContext();\n  const registryConfig = useDataSourceRegistryConfig();\n  const { baseUrl } = registryConfig;\n  const customerId = registryConfig.variables?.customer_id;\n\n  // Contract: the BFF adapter (portal app, composite factory spreads BFF over\n  // legacy) ignores customerId and infers the customer from the JWT, so the\n  // portal renders this widget with no registry-variable plumbing. The legacy\n  // adapter (fluid-admin) builds /v202506/customers/{customerId}/points_ledgers\n  // and MUST receive a real id; that consumer always supplies one via registry\n  // variables, so empty string never reaches the legacy URL in practice. If a\n  // future caller wires this hook to a legacy-only adapter, configure\n  // registry variables.customer_id at the provider — otherwise the request\n  // would 404 on /customers//points_ledgers.\n  return useQuery({\n    queryKey: [\n      \"portal-widget-use\",\n      POINTS_LEDGER_QUERY_KEY,\n      isPreview ? \"preview\" : baseUrl,\n      customerId ?? null,\n    ] as const,\n    queryFn: ({ signal }) =>\n      widgetsApi.fetchPointsLedger(customerId ?? \"\", signal),\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\n  });\n}\n","import { useId, useState, type ComponentProps } from \"react\";\nimport type React from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  BorderWidthOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/portal-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport {\n  getBorderRadiusField,\n  getBorderWidthField,\n  getBorderColorField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n  borderWidthClasses,\n  borderColorClasses,\n} from \"../core/fields\";\nimport { usePointsLedger, type PointsEntry } from \"../hooks/use-points-ledger\";\nimport { ErrorState } from \"../components/error-state\";\nimport { ChevronDown, Coins } from \"lucide-react\";\n\nconst formatBalance = (balance: number): string => {\n  return balance.toLocaleString(\"en-US\");\n};\n\nfunction formatTransactionType(entry: PointsEntry): string {\n  if (entry.transactionType) {\n    return entry.transactionType\n      .split(\"_\")\n      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n      .join(\" \");\n  }\n  if (entry.hasSource) {\n    return entry.amount > 0 ? \"Points Awarded\" : \"Points Redeemed\";\n  }\n  return \"Transaction\";\n}\n\nfunction formatEntryDate(dateString: string): string {\n  if (!dateString) return \"\";\n  const date = new Date(dateString);\n  return date.toLocaleDateString(undefined, {\n    month: \"short\",\n    day: \"numeric\",\n    year: \"numeric\",\n  });\n}\n\ntype PointsWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  title?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Balance\n  balanceColor?: ColorOptions;\n\n  // History\n  historyEnabled?: boolean;\n  historyTitle?: string;\n\n  // Styling\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n  borderWidth?: BorderWidthOptions;\n  borderColor?: ColorOptions;\n};\n\nfunction PointsEntryRow({\n  entry,\n  isLast,\n  textColor,\n  accentColor,\n  backgroundColor,\n}: {\n  entry: PointsEntry;\n  isLast: boolean;\n  textColor: ColorOptions;\n  accentColor: ColorOptions;\n  backgroundColor: ColorOptions;\n}) {\n  const isPositive = entry.amount >= 0;\n  const prefix = isPositive ? \"+\" : \"\";\n  return (\n    <div className=\"flex flex-row items-stretch gap-3\">\n      <div className=\"relative flex w-2 flex-col items-center\">\n        {!isLast && (\n          <div\n            className={`bg-${textColor}/40 absolute top-3 -bottom-3 left-1/2 w-px -translate-x-1/2`}\n          />\n        )}\n        <div\n          className={`border-${textColor}/60 bg-${backgroundColor} relative mt-3 h-2 w-2 shrink-0 rounded-full border`}\n        />\n      </div>\n      <div className=\"flex flex-1 flex-row items-start justify-between py-1.5\">\n        <div className=\"flex min-w-0 flex-col\">\n          <div className={`text-sm font-medium text-${textColor} truncate`}>\n            {formatTransactionType(entry)}\n          </div>\n          <div className={`text-sm text-${textColor} opacity-70`}>\n            {formatEntryDate(entry.createdAt)}\n          </div>\n        </div>\n        <div\n          className={`text-sm font-medium ${isPositive ? `text-${accentColor}` : \"text-destructive\"}`}\n        >\n          {prefix}\n          {entry.amount.toLocaleString(\"en-US\")}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function PointsWidget({\n  // Title\n  titleEnabled = true,\n  title = \"Points\",\n  titleFontSize = \"md\",\n  titleColor = \"foreground\",\n\n  // Balance\n  balanceColor = \"primary\",\n\n  // History\n  historyEnabled = true,\n  historyTitle = \"History\",\n\n  // Styling\n  background = { type: \"solid\", color: \"background\" },\n  textColor = \"foreground\",\n  accentColor = \"primary\",\n  padding = 4,\n  borderRadius = \"md\",\n  borderWidth = \"none\",\n  borderColor = \"muted\",\n\n  className,\n  ...props\n}: PointsWidgetProps): React.JSX.Element {\n  const [historyOpen, setHistoryOpen] = useState(false);\n  const historyPanelId = useId();\n\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n\n  const { data, isLoading, isError } = usePointsLedger();\n\n  return (\n    <div\n      className={`@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} ${borderWidthClasses[borderWidth]} ${borderWidth !== \"none\" ? borderColorClasses[borderColor] : \"\"} ${className ?? \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      <div className={`p-${padding} flex flex-col gap-2.5`}>\n        {/* Header: Title + Balance */}\n        {titleEnabled && (\n          <h2\n            className={`text-${titleFontSize} font-header font-bold text-${titleColor}`}\n          >\n            {title}\n          </h2>\n        )}\n        {!isLoading && data && (\n          <span\n            className={`text-3xl font-semibold text-${balanceColor} font-header leading-snug`}\n          >\n            {formatBalance(data.balance)}\n          </span>\n        )}\n\n        {/* Loading */}\n        {isLoading ? (\n          <div className=\"flex min-h-[60px] items-center justify-center\">\n            <div className=\"h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n          </div>\n        ) : isError ? (\n          <ErrorState />\n        ) : historyEnabled && (!data || data.entries.length === 0) ? (\n          /* Empty state — only shown when history is enabled but no entries */\n          <div className=\"flex min-h-[60px] flex-col items-center justify-center gap-2\">\n            <Coins className={`size-10 text-${textColor} opacity-30`} />\n            <p className={`text-sm font-semibold text-${textColor} opacity-50`}>\n              No Points Activity\n            </p>\n          </div>\n        ) : historyEnabled && data && data.entries.length > 0 ? (\n          /* History dropdown */\n          <div className=\"flex flex-col gap-2\">\n            {/* Dropdown toggle */}\n            <button\n              type=\"button\"\n              aria-expanded={historyOpen}\n              aria-controls={historyPanelId}\n              onClick={() => setHistoryOpen((prev) => !prev)}\n              className={`flex w-full items-center text-xs font-semibold text-${textColor} cursor-pointer`}\n            >\n              <span className=\"flex-1 text-left\">{historyTitle}</span>\n              <ChevronDown\n                className={`size-4 transition-transform duration-200 ${historyOpen ? \"rotate-180\" : \"\"}`}\n              />\n            </button>\n            <div className={`bg-${textColor}/20 h-px w-full`} />\n\n            {/* Collapsible entries */}\n            <div\n              id={historyPanelId}\n              className={`flex flex-col ${!historyOpen ? \"hidden\" : \"\"}`}\n            >\n              {data.entries.map((entry, index) => (\n                <PointsEntryRow\n                  key={entry.id}\n                  entry={entry}\n                  isLast={index === data.entries.length - 1}\n                  textColor={textColor}\n                  accentColor={accentColor}\n                  backgroundColor={backgroundColor}\n                />\n              ))}\n            </div>\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nexport const pointsWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"PointsWidget\",\n  displayName: \"Points\",\n  fields: [\n    // Title group\n    {\n      key: \"titleEnabled\",\n      label: \"Show Title\",\n      type: \"boolean\",\n      description: \"Toggle title visibility\",\n      defaultValue: true,\n\n      group: \"Title\",\n    },\n    {\n      key: \"title\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Title text displayed above the balance\",\n      defaultValue: \"Points\",\n\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      key: \"titleFontSize\",\n      label: \"Title Font Size\",\n      description: \"Font size for the title\",\n      defaultValue: \"md\",\n\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the title\",\n      defaultValue: \"foreground\",\n\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n\n    // Balance group\n    getColorField({\n      key: \"balanceColor\",\n      label: \"Balance Color\",\n      description: \"Color for the points balance number\",\n      defaultValue: \"primary\",\n\n      group: \"Balance\",\n    }),\n\n    // History group\n    {\n      key: \"historyEnabled\",\n      label: \"Show History\",\n      type: \"boolean\",\n      description: \"Show a collapsible history dropdown below the balance\",\n      defaultValue: true,\n\n      group: \"History\",\n    },\n    {\n      key: \"historyTitle\",\n      label: \"History Title\",\n      type: \"text\",\n      description: \"Title for the history dropdown\",\n      defaultValue: \"History\",\n\n      group: \"History\",\n      requiresKeyToBeTrue: \"historyEnabled\",\n    },\n\n    // Design group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the widget\",\n      defaultValue: \"background\",\n\n      group: \"Design\",\n    },\n    getColorField({\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Default text color\",\n      defaultValue: \"foreground\",\n\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color for positive points amounts\",\n      defaultValue: \"primary\",\n\n      group: \"Design\",\n    }),\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n\n      group: \"Design\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Widget padding\",\n      defaultValue: 4,\n\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Widget border radius\",\n      defaultValue: \"md\",\n\n      group: \"Design\",\n    }),\n    getBorderWidthField({\n      key: \"borderWidth\",\n      label: \"Border Width\",\n      description: \"Widget border width\",\n      defaultValue: \"none\",\n\n      group: \"Design\",\n    }),\n    getBorderColorField({\n      key: \"borderColor\",\n      label: \"Border Color\",\n      description: \"Widget border color\",\n      defaultValue: \"muted\",\n\n      group: \"Design\",\n    }),\n  ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}

package/dist/{ProfileScreen-8qR5Arcn.mjs → ProfileScreen-BI2TvtW5.mjs}

@@ -1,11 +1,11 @@
 import { gt as useAccountApi } from "./PortalTenantClientProvider-CqW6ae2M.mjs";
-import { B as useLanguagesApi, V as usePayApi, n as useFluidContext } from "./FluidProvider-CBDJKNe2.mjs";
+import { B as useLanguagesApi, V as usePayApi, n as useFluidContext } from "./FluidProvider-BE1Hdi2t.mjs";
 import { n as useCountriesApi } from "./countries-api-context-DScC_39w.mjs";
 import { On as useZodForm, Q as DialogContent, R as Label, X as Dialog, et as DialogFooter, f as fluidToast, fn as BreadcrumbList, it as DialogTitle, k as Input, ln as Breadcrumb, pn as BreadcrumbPage, tt as DialogHeader, un as BreadcrumbItem, wn as Button } from "./src-DC5QoBhR.mjs";
 import { n as ScreenHeaderBreadcrumbs } from "./ScreenHeaderContext-Dn12BZyj.mjs";
 import { n as payKeys, r as storeKeys, t as accountKeys } from "./query-keys-BkMRwfNo.mjs";
 import { t as useAccount } from "./use-account-BqNRv6m6.mjs";
-import { a as AddressFormDialog, d as UserInfoDialog, f as ConfirmActionDialog, h as useProfileTranslation, i as CreditCardFormDialog, m as ProfileTranslationBridge, n as createFluidPayApiAdapter, o as EditPaymentMethodDialog, p as EllipsesDropdown, r as mapToFluidPayPaymentMethod, s as FluidPayCoreProvider, t as AddressAutocompleteInput } from "./AddressAutocompleteInput-leBDp2QP.mjs";
+import { a as AddressFormDialog, d as UserInfoDialog, f as ConfirmActionDialog, h as useProfileTranslation, i as CreditCardFormDialog, m as ProfileTranslationBridge, n as createFluidPayApiAdapter, o as EditPaymentMethodDialog, p as EllipsesDropdown, r as mapToFluidPayPaymentMethod, s as FluidPayCoreProvider, t as AddressAutocompleteInput } from "./AddressAutocompleteInput-B4QUyriE.mjs";
 import { f as usePortalUpdateSettings, s as usePortalMySiteProfile } from "./use-mysite-portal-DyB9666K.mjs";
 import { useCallback, useMemo, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -1350,4 +1350,4 @@ const profileScreenPropertySchema = {
 //#endregion
 export { profileScreenPropertySchema as n, ProfileScreen as t };
 
-//# sourceMappingURL=ProfileScreen-8qR5Arcn.mjs.map
+//# sourceMappingURL=ProfileScreen-BI2TvtW5.mjs.map