@fluid-app/portal-sdk 0.1.56 → 0.1.57

package/dist/{ContactsScreen-DrfjJQRJ.cjs → ContactsScreen-BocpRIYk.cjs}

@@ -32,9 +32,11 @@ require("./SpacerWidget-Br2IZFFv.cjs");
 require("./TableWidget-Vcxw-se8.cjs");
 require("./ToDoWidget-Bv6POc5R.cjs");
 require("./VideoWidget-7Q2eqHFn.cjs");
-require("./src-DIkOTlgf.cjs");
+require("./ScreenHeaderContext-eyKPyDoQ.cjs");
+require("./order-detail-JVq0-ps1.cjs");
 require("./dist-NpiIdjkL.cjs");
-const require_ContactsScreen = require("./ContactsScreen-CsxYVQl_.cjs");
-require("./dist-CSYoMydt.cjs");
+const require_ContactsScreen = require("./ContactsScreen-EaQc1fQf.cjs");
+require("./src-DL_WTpu5.cjs");
+require("./dist-Cs6PV1Tf.cjs");
 exports.ContactsScreen = require_ContactsScreen.ContactsScreen;
 exports.contactsScreenPropertySchema = require_ContactsScreen.contactsScreenPropertySchema;

package/dist/{ContactsScreen-CsxYVQl_.cjs → ContactsScreen-EaQc1fQf.cjs}

@@ -2,9 +2,10 @@ const require_chunk = require("./chunk-DAgNkxik.cjs");
 const require_FluidProvider = require("./FluidProvider-DDcsxdbL.cjs");
 const require_parse_api_errors = require("./parse-api-errors-CAnpE2_r.cjs");
 const require_src = require("./src-DqIS-4ns.cjs");
-const require_src$1 = require("./src-DIkOTlgf.cjs");
+const require_ScreenHeaderContext = require("./ScreenHeaderContext-eyKPyDoQ.cjs");
+const require_order_detail = require("./order-detail-JVq0-ps1.cjs");
 const require_dist = require("./dist-NpiIdjkL.cjs");
-const require_dist$1 = require("./dist-CSYoMydt.cjs");
+const require_dist$1 = require("./dist-Cs6PV1Tf.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let _tanstack_react_query = require("@tanstack/react-query");
@@ -707,7 +708,7 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 					]
 				})
 			})] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src$1.PaginationFooter, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_order_detail.PaginationFooter, {
 				currentPage,
 				totalPages,
 				pageSize: PAGE_SIZE,
@@ -790,6 +791,137 @@ function ContactsPage({ listContacts, deleteContacts, queryKeyPrefix, header, on
 	] });
 }
 //#endregion
+//#region ../../contacts/ui/src/screens/ContactsListScreen.tsx
+function ContactsListScreen({ listContacts, deleteContacts, onEditContact, onRowClick, onAddContact, queryKeyPrefix = "contacts", tableLayout, header }) {
+	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+		onClick: onAddContact,
+		size: "sm",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "mr-1 h-4 w-4" }), "Add Contact"]
+	}), [onAddContact]));
+	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbList, {
+		className: "text-lg",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
+			className: "font-semibold",
+			children: "Contacts"
+		}) })
+	}) }), []));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactsPage, {
+		listContacts,
+		deleteContacts,
+		queryKeyPrefix,
+		tableLayout,
+		header,
+		onEditContact,
+		onRowClick
+	});
+}
+//#endregion
+//#region ../../contacts/ui/src/screens/ContactDetailScreen.tsx
+function ContactDetailScreen({ contact, onNavigateToList, onSave, onDelete, isDirty, isSubmitting, isDeleting, children }) {
+	const [showDeleteDialog, setShowDeleteDialog] = (0, react.useState)(false);
+	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+			variant: "outline",
+			size: "icon",
+			className: "border-border",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.EllipsisVertical, { className: "h-4 w-4" })
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuContent, {
+		align: "end",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuItem, {
+			className: "text-destructive",
+			onClick: () => setShowDeleteDialog(true),
+			children: "Delete"
+		})
+	})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+		onClick: onSave,
+		disabled: !isDirty || isSubmitting || isDeleting,
+		children: isSubmitting ? "Saving..." : "Save"
+	})] }), [
+		onSave,
+		isDirty,
+		isSubmitting,
+		isDeleting
+	]));
+	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.BreadcrumbList, {
+		className: "text-lg",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbLink, {
+				href: "#",
+				onClick: (e) => {
+					e.preventDefault();
+					onNavigateToList();
+				},
+				children: "Contacts"
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbSeparator, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
+				className: "font-semibold",
+				children: contact?.full_name ?? "Contact"
+			}) })
+		]
+	}) }), [contact?.full_name, onNavigateToList]));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
+		open: showDeleteDialog,
+		onOpenChange: setShowDeleteDialog,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogTitle, { children: "Delete Contact" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogDescription, { children: [
+			"Are you sure you want to delete",
+			" ",
+			contact?.full_name ?? "this contact",
+			"? This action cannot be undone."
+		] })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogCancel, {
+			disabled: isDeleting,
+			children: "Cancel"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogAction, {
+			onClick: () => {
+				onDelete();
+				setShowDeleteDialog(false);
+			},
+			disabled: isDeleting,
+			className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			children: isDeleting ? "Deleting..." : "Delete"
+		})] })] })
+	})] });
+}
+//#endregion
+//#region ../../contacts/ui/src/screens/ContactCreateScreen.tsx
+function ContactCreateScreen({ onNavigateToList, onSubmit, isPending, children }) {
+	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+		variant: "outline",
+		onClick: onNavigateToList,
+		disabled: isPending,
+		children: "Cancel"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+		onClick: onSubmit,
+		disabled: isPending,
+		children: isPending ? "Adding..." : "Add Contact"
+	})] }), [
+		onNavigateToList,
+		onSubmit,
+		isPending
+	]));
+	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Breadcrumb, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.BreadcrumbList, {
+		className: "text-lg",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbLink, {
+				href: "#",
+				onClick: (e) => {
+					e.preventDefault();
+					onNavigateToList();
+				},
+				children: "Contacts"
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbSeparator, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.BreadcrumbPage, {
+				className: "font-semibold",
+				children: "New Contact"
+			}) })
+		]
+	}) }), [onNavigateToList]));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+}
+//#endregion
 //#region ../../contacts/ui/src/shared/components/contacts/contactCard/palettes.ts
 const gradientPalettes = [
 	{
@@ -4028,28 +4160,19 @@ function ContactListView({ client, onNavigate, onContactSelect }) {
 			contactId: String(contact.id)
 		});
 	}, [onNavigate, onContactSelect]);
-	const header = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "mx-auto flex max-w-7xl items-center justify-between px-4 py-4 md:px-10",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
-			className: "text-foreground text-lg font-semibold",
-			children: "Contacts"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-			onClick: () => onNavigate({ view: "new" }),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "h-4 w-4" }), "Add Contact"]
-		})]
-	}), [onNavigate]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactsPage, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactsListScreen, {
 		listContacts: (0, react.useCallback)((params) => listUserContacts(client, params), [client]),
 		deleteContacts: (0, react.useCallback)((ids) => bulkDeleteUserContacts(client, { contact_ids: ids }), [client]),
 		queryKeyPrefix: QUERY_KEY_PREFIX,
-		header,
 		tableLayout: "members",
 		onEditContact: handleSelectContact,
-		onRowClick: handleSelectContact
+		onRowClick: handleSelectContact,
+		onAddContact: (0, react.useCallback)(() => {
+			onNavigate({ view: "new" });
+		}, [onNavigate])
 	});
 }
 function ContactDetailView({ contactId, client, onNavigate }) {
-	const [confirmingDelete, setConfirmingDelete] = (0, react.useState)(false);
 	const { contact, isLoading, methods, countryOptions, isDirty, isSubmitting, isDeleting, onSave, onDelete } = useContactDetailPage((0, react.useMemo)(() => ({
 		mode: "rep",
 		client
@@ -4058,6 +4181,9 @@ function ContactDetailView({ contactId, client, onNavigate }) {
 		getCountries: (0, react.useCallback)(() => fetchCountries(client), [client]),
 		onDeleteSuccess: () => onNavigate({ view: "list" })
 	});
+	const handleNavigateToList = (0, react.useCallback)(() => {
+		onNavigate({ view: "list" });
+	}, [onNavigate]);
 	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "mx-auto max-w-7xl space-y-6 px-4 py-4 sm:px-6 sm:py-6 lg:px-10 lg:py-8",
 		children: [
@@ -4075,7 +4201,7 @@ function ContactDetailView({ contactId, client, onNavigate }) {
 			variant: "ghost",
 			size: "sm",
 			className: "mb-6",
-			onClick: () => onNavigate({ view: "list" }),
+			onClick: handleNavigateToList,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowLeft, { className: "h-4 w-4" }), "Back to Contacts"]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "border-border max-w-sm rounded-lg border border-dashed p-8 text-center",
@@ -4088,50 +4214,34 @@ function ContactDetailView({ contactId, client, onNavigate }) {
 			})]
 		})]
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_hook_form.FormProvider, {
-		...methods,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mx-auto flex max-w-7xl items-center justify-between px-4 py-4 md:px-10",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-				variant: "ghost",
-				size: "sm",
-				onClick: () => onNavigate({ view: "list" }),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowLeft, { className: "h-4 w-4" }), "Back to Contacts"]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-					variant: "ghost",
-					onClick: () => {
-						if (confirmingDelete) {
-							onDelete();
-							setConfirmingDelete(false);
-						} else setConfirmingDelete(true);
-					},
-					disabled: isDeleting,
-					className: "text-destructive hover:text-destructive/80",
-					children: isDeleting ? "Deleting..." : confirmingDelete ? "Confirm delete?" : "Delete"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-					onClick: onSave,
-					disabled: !isDirty || isSubmitting || isDeleting,
-					children: isSubmitting ? "Saving..." : "Save"
-				})]
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RepContactDetailView, {
-			contact,
-			contactId,
-			client,
-			notesClient: client,
-			tasksClient: client,
-			countryOptions,
-			ordersSlot: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactOrdersList, {
-				client,
-				contactId
-			}),
-			subscriptionsSlot: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactSubscriptionOrdersList, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactDetailScreen, {
+		contactId,
+		contact,
+		onNavigateToList: handleNavigateToList,
+		onSave,
+		onDelete,
+		isDirty,
+		isSubmitting,
+		isDeleting,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_hook_form.FormProvider, {
+			...methods,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RepContactDetailView, {
+				contact,
+				contactId,
 				client,
-				contactId
+				notesClient: client,
+				tasksClient: client,
+				countryOptions,
+				ordersSlot: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactOrdersList, {
+					client,
+					contactId
+				}),
+				subscriptionsSlot: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactSubscriptionOrdersList, {
+					client,
+					contactId
+				})
 			})
-		})]
+		})
 	});
 }
 const createContactResolver = (0, _hookform_resolvers_zod.zodResolver)(createContactFormSchema);
@@ -4187,41 +4297,27 @@ function ContactCreateView({ client, onNavigate, onCreateContact }) {
 		if (affiliate && Object.keys(affiliate).length > 0) payload.affiliate = affiliate;
 		mutate(payload);
 	}, () => {}), [methods, mutate]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_hook_form.FormProvider, {
-		...methods,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mx-auto flex max-w-7xl items-center justify-between px-4 py-4 md:px-10",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-				variant: "ghost",
-				size: "sm",
-				disabled: mutation.isPending,
-				onClick: () => onNavigate({ view: "list" }),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowLeft, { className: "h-4 w-4" }), "Back to Contacts"]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-					variant: "outline",
-					disabled: mutation.isPending,
-					onClick: () => onNavigate({ view: "list" }),
-					children: "Cancel"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
-					onClick: () => formRef.current?.requestSubmit(),
-					disabled: mutation.isPending,
-					children: mutation.isPending ? "Adding..." : "Add Contact"
-				})]
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "mx-auto max-w-7xl space-y-12 md:px-10 md:py-8",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
-				ref: formRef,
-				onSubmit,
-				className: "mx-auto space-y-6 lg:max-w-2xl",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactDetailsForm, {
-					countries: countryOptions,
-					cardClassName: "bg-transparent shadow-none"
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactCreateScreen, {
+		onNavigateToList: (0, react.useCallback)(() => {
+			onNavigate({ view: "list" });
+		}, [onNavigate]),
+		onSubmit: () => formRef.current?.requestSubmit(),
+		isPending: mutation.isPending,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_hook_form.FormProvider, {
+			...methods,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mx-auto max-w-7xl space-y-12 md:px-10 md:py-8",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
+					ref: formRef,
+					onSubmit,
+					className: "mx-auto space-y-6 lg:max-w-2xl",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactDetailsForm, {
+						countries: countryOptions,
+						cardClassName: "bg-transparent shadow-none"
+					})
 				})
 			})
-		})]
+		})
 	});
 }
 function ContactsScreen({ onContactSelect, onCreateContact, background, textColor, accentColor, padding, borderRadius, defaultViewMode, ...divProps }) {
@@ -4272,4 +4368,4 @@ Object.defineProperty(exports, "contactsScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ContactsScreen-CsxYVQl_.cjs.map
+//# sourceMappingURL=ContactsScreen-EaQc1fQf.cjs.map