@ecomiq/storefront 2.1.3 → 3.0.0

package/dist/sections/complaint-book.d.ts

@@ -0,0 +1,8 @@
+import { SectionCatalog, SectionRoot } from "../settings.js";
+import { ComplaintBookActionData, ComplaintBookData } from "../complaint-book.js";
+import "../index.js";
+export declare const catalog: SectionCatalog;
+export declare function ComplaintBook({ loaderData, actionData, ...root }: {
+  loaderData: ComplaintBookData;
+  actionData?: ComplaintBookActionData;
+} & SectionRoot): import("react").JSX.Element;

package/dist/sections/complaint-book.js

@@ -0,0 +1,538 @@
+import { Captcha } from "../captcha-DAqaIx8m.js";
+import { COMPLAINT_DOCUMENT_TYPES, identityDocumentRule } from "../documents-T1mzc_j8.js";
+import { useStorefrontText } from "../storefront-language-DrMjVbmk.js";
+import { complaintBookAttachmentError, complaintBookNumber } from "../complaint-book-BvwLvfx0.js";
+import { CustomerCsrfField } from "../customer-csrf-C1oDX-Py.js";
+import { money } from "../money-DtGOtDri.js";
+import { Form, useNavigation } from "react-router";
+import { COMPLAINT_BOOK_ATTACHMENT_TYPES, formatOrderDate } from "@ecomiq/core";
+import { Fragment, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@theme/ui/button";
+import { Input } from "@theme/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@theme/ui/select";
+import { Textarea } from "@theme/ui/textarea";
+import { Checkbox } from "@theme/ui/checkbox";
+import { Label } from "@theme/ui/label";
+import { RadioGroup, RadioGroupItem } from "@theme/ui/radio-group";
+// src/sections/complaint-book.tsx
+const catalog = {
+	name: "Libro de Reclamaciones",
+	description: "Formulario de reclamos y quejas con la hoja para imprimir."
+};
+const TYPES = [{
+	value: "claim",
+	label: "Reclamo"
+}, {
+	value: "complaint",
+	label: "Queja"
+}];
+const ITEMS = [{
+	value: "product",
+	label: "Producto"
+}, {
+	value: "service",
+	label: "Servicio"
+}];
+const LEGEND = "mb-3 text-lg font-medium";
+const ATTACHMENT_ACCEPT = [
+	...COMPLAINT_BOOK_ATTACHMENT_TYPES,
+	".jpg",
+	".jpeg",
+	".png",
+	".webp",
+	".pdf"
+].join(",");
+function Rows({ title, rows }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: "font-medium",
+			children: title
+		}), /* @__PURE__ */ jsx("dl", {
+			className: "grid gap-x-6 gap-y-1.5 text-sm sm:grid-cols-[11rem_minmax(0,1fr)]",
+			children: rows.map(([label, value]) => value ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+				className: "text-muted-foreground",
+				children: label
+			}), /* @__PURE__ */ jsx("dd", {
+				className: "break-words whitespace-pre-line",
+				children: value
+			})] }, label) : null)
+		})]
+	});
+}
+function providerRows(book) {
+	return [
+		["Razón social", book.providerName],
+		["RUC", book.providerTaxId],
+		["Dirección", book.providerAddress]
+	];
+}
+function Field({ label, name, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-col gap-2 ${className ?? ""}`,
+		children: [/* @__PURE__ */ jsx(Label, {
+			htmlFor: `complaint-${name}`,
+			children: label
+		}), /* @__PURE__ */ jsx(Input, {
+			id: `complaint-${name}`,
+			name,
+			...props
+		})]
+	});
+}
+function Area({ label, name, maxLength }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx(Label, {
+			htmlFor: `complaint-${name}`,
+			children: label
+		}), /* @__PURE__ */ jsx(Textarea, {
+			id: `complaint-${name}`,
+			name,
+			rows: 4,
+			maxLength,
+			required: true
+		})]
+	});
+}
+function Choices({ name, options }) {
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		name,
+		defaultValue: options[0]?.value,
+		required: true,
+		className: "flex flex-wrap gap-6",
+		children: options.map((option) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+				id: `complaint-${name}-${option.value}`,
+				value: option.value
+			}), /* @__PURE__ */ jsx(Label, {
+				htmlFor: `complaint-${name}-${option.value}`,
+				children: option.label
+			})]
+		}, option.value))
+	});
+}
+function Attachments() {
+	const storefrontTranslate = useStorefrontText();
+	const input = useRef(null);
+	const [files, setFiles] = useState([]);
+	const [error, setError] = useState(null);
+	function attach(next) {
+		const transfer = new DataTransfer();
+		for (const file of next) transfer.items.add(file);
+		if (input.current) input.current.files = transfer.files;
+		setFiles(next);
+	}
+	function pick(picked) {
+		const next = [...files, ...Array.from(picked ?? [])];
+		const invalid = complaintBookAttachmentError(next);
+		setError(invalid);
+		attach(invalid ? files : next);
+	}
+	function remove(index) {
+		setError(null);
+		attach(files.filter((_, position) => position !== index));
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [
+			/* @__PURE__ */ jsx(Field, {
+				ref: input,
+				label: storefrontTranslate("Adjuntos (opcional)"),
+				name: "files",
+				type: "file",
+				multiple: true,
+				accept: ATTACHMENT_ACCEPT,
+				"aria-describedby": "complaint-files-help",
+				onChange: (event) => pick(event.currentTarget.files)
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				id: "complaint-files-help",
+				className: "text-sm text-muted-foreground",
+				children: [storefrontTranslate("Hasta 3 fotos o PDF de 5 MB."), " "]
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-sm text-destructive",
+				children: storefrontTranslate(error)
+			}) : null,
+			files.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-1 text-sm",
+				children: files.map((file, index) => /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center justify-between gap-3",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate",
+						children: file.name
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						"aria-label": storefrontTranslate("Quitar {value0}", { value0: file.name }),
+						onClick: () => remove(index),
+						children: storefrontTranslate("Quitar")
+					})]
+				}, `${index}-${file.name}`))
+			}) : null
+		]
+	});
+}
+function ComplaintForm({ book, error, countries }) {
+	const storefrontTranslate = useStorefrontText();
+	const busy = useNavigation().state !== "idle";
+	const [kind, setKind] = useState("nationalId");
+	const [countryCode, setCountryCode] = useState("");
+	const [minor, setMinor] = useState(false);
+	const rule = identityDocumentRule(COMPLAINT_DOCUMENT_TYPES[kind]);
+	return /* @__PURE__ */ jsxs(Form, {
+		method: "post",
+		encType: "multipart/form-data",
+		className: "flex flex-col gap-8",
+		children: [
+			/* @__PURE__ */ jsx(CustomerCsrfField, {}),
+			/* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsx("legend", {
+				className: LEGEND,
+				children: storefrontTranslate("Tipo")
+			}), /* @__PURE__ */ jsx(Choices, {
+				name: "type",
+				options: TYPES
+			})] }),
+			/* @__PURE__ */ jsxs("fieldset", {
+				className: "grid gap-4 sm:grid-cols-2",
+				children: [
+					/* @__PURE__ */ jsx("legend", {
+						className: LEGEND,
+						children: storefrontTranslate("Tus datos")
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: storefrontTranslate("Nombre completo"),
+						name: "consumerName",
+						autoComplete: "name",
+						maxLength: 200,
+						required: true,
+						className: "sm:col-span-2"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: "complaint-documentType",
+							children: storefrontTranslate("Tipo de documento")
+						}), /* @__PURE__ */ jsxs(Select, {
+							name: "documentType",
+							value: kind,
+							onValueChange: (value) => setKind(value === "taxId" || value === "foreignId" || value === "passport" ? value : "nationalId"),
+							children: [/* @__PURE__ */ jsx(SelectTrigger, {
+								id: "complaint-documentType",
+								className: "w-full",
+								children: /* @__PURE__ */ jsx(SelectValue, {})
+							}), /* @__PURE__ */ jsx(SelectContent, { children: Object.entries(COMPLAINT_DOCUMENT_TYPES).map(([item, type]) => /* @__PURE__ */ jsx(SelectItem, {
+								value: item,
+								children: identityDocumentRule(type).label
+							}, item)) })]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "flex flex-col gap-2",
+						children: [
+							storefrontTranslate("País emisor del documento"),
+							" ",
+							/* @__PURE__ */ jsxs("select", {
+								name: "documentCountryCode",
+								required: true,
+								value: countryCode,
+								onChange: (event) => setCountryCode(event.currentTarget.value),
+								className: "h-10 rounded-md border bg-background px-3 text-base md:text-sm",
+								children: [/* @__PURE__ */ jsx("option", {
+									value: "",
+									children: storefrontTranslate("Elige…")
+								}), countries.map((country) => /* @__PURE__ */ jsx("option", {
+									value: country.code,
+									children: country.name
+								}, country.code))]
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: storefrontTranslate("Número de documento"),
+						name: "documentNumber",
+						inputMode: rule.inputMode,
+						maxLength: rule.maxLength,
+						pattern: rule.pattern,
+						title: storefrontTranslate(rule.error),
+						autoComplete: "off",
+						required: true
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: storefrontTranslate("Dirección"),
+						name: "consumerAddress",
+						autoComplete: "street-address",
+						maxLength: 300,
+						required: true,
+						className: "sm:col-span-2"
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: storefrontTranslate("Celular"),
+						name: "consumerPhone",
+						type: "tel",
+						autoComplete: "tel",
+						maxLength: 30,
+						required: true
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: storefrontTranslate("Correo"),
+						name: "consumerEmail",
+						type: "email",
+						autoComplete: "email",
+						maxLength: 254,
+						required: true
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 sm:col-span-2",
+						children: [/* @__PURE__ */ jsx(Checkbox, {
+							id: "complaint-minor",
+							name: "minor",
+							checked: minor,
+							onCheckedChange: (checked) => setMinor(checked === true)
+						}), /* @__PURE__ */ jsx(Label, {
+							htmlFor: "complaint-minor",
+							children: storefrontTranslate("Soy menor de edad")
+						})]
+					})
+				]
+			}),
+			minor ? /* @__PURE__ */ jsxs("fieldset", {
+				className: "grid gap-4 sm:grid-cols-2",
+				children: [
+					/* @__PURE__ */ jsx("legend", {
+						className: LEGEND,
+						children: storefrontTranslate("Padre, madre o apoderado")
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: storefrontTranslate("Nombre completo"),
+						name: "guardianName",
+						maxLength: 200,
+						required: true,
+						className: "sm:col-span-2"
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: storefrontTranslate("Dirección"),
+						name: "guardianAddress",
+						maxLength: 300,
+						required: true,
+						className: "sm:col-span-2"
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: storefrontTranslate("Celular"),
+						name: "guardianPhone",
+						type: "tel",
+						maxLength: 30,
+						required: true
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: storefrontTranslate("Correo"),
+						name: "guardianEmail",
+						type: "email",
+						maxLength: 254,
+						required: true
+					})
+				]
+			}) : null,
+			/* @__PURE__ */ jsxs("fieldset", {
+				className: "grid gap-4 sm:grid-cols-2",
+				children: [
+					/* @__PURE__ */ jsx("legend", {
+						className: LEGEND,
+						children: storefrontTranslate("Producto o servicio")
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "sm:col-span-2",
+						children: /* @__PURE__ */ jsx(Choices, {
+							name: "itemKind",
+							options: ITEMS
+						})
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: storefrontTranslate("Descripción"),
+						name: "itemDescription",
+						maxLength: 500,
+						required: true,
+						className: "sm:col-span-2"
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: storefrontTranslate("Monto reclamado en {value0} (opcional)", { value0: book.currency }),
+						name: "itemAmount",
+						type: "number",
+						inputMode: "decimal",
+						min: 0,
+						step: "0.01"
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: storefrontTranslate("N.° de pedido (opcional)"),
+						name: "orderNumber",
+						maxLength: 50
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("fieldset", {
+				className: "flex flex-col gap-4",
+				children: [
+					/* @__PURE__ */ jsx("legend", {
+						className: LEGEND,
+						children: storefrontTranslate("Detalle")
+					}),
+					/* @__PURE__ */ jsx(Area, {
+						label: storefrontTranslate("Qué pasó"),
+						name: "detail",
+						maxLength: 4e3
+					}),
+					/* @__PURE__ */ jsx(Area, {
+						label: storefrontTranslate("Qué solicitas"),
+						name: "request",
+						maxLength: 2e3
+					}),
+					/* @__PURE__ */ jsx(Attachments, {})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					id: "complaint-confirmed",
+					name: "confirmed",
+					required: true
+				}), /* @__PURE__ */ jsx(Label, {
+					htmlFor: "complaint-confirmed",
+					children: storefrontTranslate("Declaro que los datos son verdaderos.")
+				})]
+			}),
+			/* @__PURE__ */ jsx(Captcha, {
+				captcha: book.captcha,
+				action: "complaint_book",
+				errorClass: "text-sm text-destructive",
+				busy
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive",
+				children: storefrontTranslate(error)
+			}) : null,
+			/* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				disabled: busy || !book.captcha.isConfigured,
+				className: "sm:w-fit",
+				children: busy ? "Enviando…" : "Enviar"
+			})
+		]
+	});
+}
+function Sheet({ book, filed, language, timeZone }) {
+	const storefrontTranslate = useStorefrontText();
+	const { entry, sheet, attachments } = filed;
+	const { consumer, guardian, item } = sheet;
+	const type = TYPES.find((option) => option.value === sheet.type)?.label ?? "";
+	const date = (iso) => formatOrderDate(iso, language, timeZone);
+	return /* @__PURE__ */ jsxs("article", {
+		className: "flex flex-col gap-6 rounded-lg border bg-card p-6 text-card-foreground md:p-8",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-start justify-between gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsxs("p", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							storefrontTranslate("Hoja de reclamación ·"),
+							" ",
+							type
+						]
+					}), /* @__PURE__ */ jsx("h2", {
+						className: "font-heading text-3xl",
+						children: complaintBookNumber(entry.number)
+					})]
+				}), /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: "outline",
+					onClick: () => window.print(),
+					className: "print:hidden",
+					children: [storefrontTranslate("Imprimir"), " "]
+				})]
+			}),
+			/* @__PURE__ */ jsx(Rows, {
+				title: storefrontTranslate("Fechas"),
+				rows: [["Presentado", date(entry.filedOn)], ["Respuesta hasta", date(entry.responseDueOn)]]
+			}),
+			/* @__PURE__ */ jsx(Rows, {
+				title: storefrontTranslate("Proveedor"),
+				rows: providerRows(book)
+			}),
+			/* @__PURE__ */ jsx(Rows, {
+				title: storefrontTranslate("Consumidor"),
+				rows: [
+					[storefrontTranslate("Nombre"), consumer.name],
+					[identityDocumentRule(COMPLAINT_DOCUMENT_TYPES[consumer.documentType]).label, consumer.documentNumber],
+					[storefrontTranslate("Dirección"), consumer.address],
+					[storefrontTranslate("Celular"), consumer.phone],
+					[storefrontTranslate("Correo"), consumer.email]
+				]
+			}),
+			guardian ? /* @__PURE__ */ jsx(Rows, {
+				title: storefrontTranslate("Padre, madre o apoderado"),
+				rows: [
+					[storefrontTranslate("Nombre"), guardian.name],
+					[storefrontTranslate("Dirección"), guardian.address],
+					[storefrontTranslate("Celular"), guardian.phone],
+					[storefrontTranslate("Correo"), guardian.email]
+				]
+			}) : null,
+			/* @__PURE__ */ jsx(Rows, {
+				title: ITEMS.find((option) => option.value === item.kind)?.label ?? "",
+				rows: [
+					[storefrontTranslate("Descripción"), item.description],
+					["Monto reclamado", item.amount === null ? null : money(item.amount, book.currency, language)],
+					["N.° de pedido", sheet.orderNumber]
+				]
+			}),
+			/* @__PURE__ */ jsx(Rows, {
+				title: type,
+				rows: [
+					[storefrontTranslate("Qué pasó"), sheet.detail],
+					[storefrontTranslate("Qué solicitas"), sheet.request],
+					["Adjuntos", attachments.join("\n")]
+				]
+			})
+		]
+	});
+}
+function ComplaintBook({ loaderData, actionData, ...root }) {
+	const storefrontTranslate = useStorefrontText();
+	const { book, language, timeZone } = loaderData;
+	const filed = actionData && "entry" in actionData ? actionData : null;
+	const error = actionData && "error" in actionData ? actionData.error : null;
+	return /* @__PURE__ */ jsxs("section", {
+		...root,
+		className: "mx-auto flex w-full max-w-3xl flex-col gap-8 px-4 py-12 md:py-20",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "text-4xl leading-tight md:text-5xl",
+				children: storefrontTranslate("Libro de Reclamaciones")
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: storefrontTranslate("Reclamo: disconformidad con el producto o servicio. Queja: malestar con la atención.")
+			})]
+		}), filed ? /* @__PURE__ */ jsx(Sheet, {
+			book,
+			filed,
+			language: `${language}-${loaderData.countryCode}`,
+			timeZone
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Rows, {
+			title: storefrontTranslate("Proveedor"),
+			rows: providerRows(book)
+		}), /* @__PURE__ */ jsx(ComplaintForm, {
+			countries: loaderData.countries,
+			book,
+			error
+		})] })]
+	});
+}
+export { ComplaintBook, catalog };

package/dist/sections/design-system.d.ts

@@ -0,0 +1 @@
+export declare function DesignSystem(): import("react").JSX.Element;