@aglyn/plugins-commerce 1.0.0-beta.277 → 1.0.0-beta.282

package/src/lib/components/console/pos-reader-splash-setting.component.js

@@ -0,0 +1,275 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMediaPicker } from "@aglyn/aglyn/app-utils/media-picker-context";
+import { BlockedControl } from "@aglyn/shared-ui-jsx/components/blocked-control.component";
+import { PrerequisiteNotice } from "@aglyn/shared-ui-jsx/components/prerequisite-notice.component";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { useConsoleHostRoute, useUser } from "@aglyn/tenant-feature-instance";
+import { Alert, Box, Button, FormControlLabel, Radio, RadioGroup, Stack, Typography } from "@mui/material";
+import { useCallback, useEffect, useState } from "react";
+import { POS_READER_SPLASH_LARGEST, posReaderSplashArtworkProblem } from "../../model/pos-reader-splash.js";
+import { PosReaderSplashRequestError, readerSplashStatus, saveReaderSplash } from "./pos/pos-reader-splash-api.js";
+/** An image's pixel size, read in the browser before anything is saved. */ function imageSize(src) {
+    return new Promise((resolve)=>{
+        const image = new Image();
+        image.onload = ()=>resolve({
+                width: image.naturalWidth,
+                height: image.naturalHeight
+            });
+        image.onerror = ()=>resolve(null);
+        image.src = src;
+    });
+}
+const NOT_ALLOWED = 'Only an admin or editor with the "Use the point of sale" permission can change the readers.';
+/**
+ * "Reader start-up screen" on the POS devices card (AGL-4048): what the
+ * store's Stripe smart readers show while they wait for a payment. The
+ * platform's default screen, the workspace's logo on a white screen, or a
+ * full-screen portrait image from the media library. A white-label
+ * workspace is never offered the platform's screen and shows its own logo
+ * unless it picks an image.
+ *
+ * The server applies the choice to the store's readers when it is saved
+ * (and again when this opens and finds the logo changed since); readers
+ * pick it up within about ten minutes.
+ */ export function PosReaderSplashSetting({ hostId, canManagePos }) {
+    var _ref, _ref1, _ref2;
+    var _status_image;
+    const { data: user } = useUser();
+    const { enqueueSnackbar } = useSnackbar();
+    const { pickMedia } = useMediaPicker();
+    const { orgSlug } = useConsoleHostRoute(hostId);
+    const [status, setStatus] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [picked, setPicked] = useState(null);
+    const uid = (_ref = user == null ? void 0 : user.uid) != null ? _ref : '';
+    useEffect(()=>{
+        if (!user) return;
+        let active = true;
+        readerSplashStatus(user, hostId).then((answer)=>{
+            if (active) setStatus(answer);
+        }).catch(()=>{
+            if (active) setStatus(null);
+        });
+        return ()=>{
+            active = false;
+        };
+    // Keyed on the person, not the session object (see the register page).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        uid,
+        hostId
+    ]);
+    const save = useCallback(async (choice, image)=>{
+        if (!user) return;
+        setBusy(true);
+        try {
+            const answer = await saveReaderSplash(user, hostId, choice, image);
+            setStatus(answer);
+            if (!answer.problem) {
+                enqueueSnackbar(answer.locationReady ? 'Saved. Your readers show it within about ten minutes.' : 'Saved. Your readers show it once you add one.', {
+                    variant: 'success',
+                    persist: false
+                });
+            }
+        } catch (error) {
+            enqueueSnackbar(error instanceof PosReaderSplashRequestError ? error.message : 'The start-up screen could not be saved', {
+                variant: 'warning',
+                persist: false
+            });
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        user,
+        hostId,
+        enqueueSnackbar
+    ]);
+    const chooseImage = async ()=>{
+        var _media_contentType, _ref, _ref1;
+        const media = await (pickMedia == null ? void 0 : pickMedia({
+            kind: 'image'
+        }));
+        if (!media) return;
+        if (!media.mediaId || !media.mediaScope) {
+            enqueueSnackbar('Choose an image from your media library.', {
+                variant: 'warning',
+                persist: false
+            });
+            return;
+        }
+        const size = await imageSize(media.url);
+        const problem = posReaderSplashArtworkProblem({
+            contentType: (_media_contentType = media.contentType) != null ? _media_contentType : null,
+            width: (_ref = size == null ? void 0 : size.width) != null ? _ref : 0,
+            height: (_ref1 = size == null ? void 0 : size.height) != null ? _ref1 : 0
+        });
+        if (problem) {
+            enqueueSnackbar(problem, {
+                variant: 'warning',
+                persist: false
+            });
+            return;
+        }
+        setPicked(media);
+        await save('image', {
+            mediaScope: media.mediaScope,
+            mediaId: media.mediaId
+        });
+    };
+    if (!(status == null ? void 0 : status.available)) return null;
+    const blockedReason = !canManagePos ? NOT_ALLOWED : busy ? 'Saving…' : null;
+    const hasLogo = Boolean(status.logoUrl);
+    const profileHref = orgSlug ? `/${orgSlug}/settings/profile` : undefined;
+    const brand = status.productName;
+    const preview = status.effectiveChoice === 'logo' ? status.logoUrl : status.effectiveChoice === 'image' ? (_ref1 = (_ref2 = picked == null ? void 0 : picked.url) != null ? _ref2 : (_status_image = status.image) == null ? void 0 : _status_image.url) != null ? _ref1 : null : null;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "subtitle2",
+                children: 'Reader start-up screen'
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'What your card readers show while they wait for a payment.'
+            }),
+            /*#__PURE__*/ _jsxs(RadioGroup, {
+                value: status.effectiveChoice,
+                onChange: (event)=>{
+                    const choice = event.target.value;
+                    if (choice === 'image') {
+                        if (status.image) void save('image', {
+                            mediaScope: status.image.mediaScope,
+                            mediaId: status.image.mediaId
+                        });
+                        else void chooseImage();
+                        return;
+                    }
+                    void save(choice);
+                },
+                children: [
+                    status.whiteLabel ? null : /*#__PURE__*/ _jsx(FormControlLabel, {
+                        value: "platform",
+                        disabled: Boolean(blockedReason),
+                        control: /*#__PURE__*/ _jsx(Radio, {
+                            size: "small"
+                        }),
+                        label: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    children: `The ${brand} start-up screen`
+                                }),
+                                status.platformReady ? null : /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: 'Until it is ready, your readers show their standard screen.'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(FormControlLabel, {
+                        value: "logo",
+                        disabled: Boolean(blockedReason) || !hasLogo,
+                        control: /*#__PURE__*/ _jsx(Radio, {
+                            size: "small"
+                        }),
+                        label: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    children: 'Your logo'
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: 'Your organization profile’s logo, centered on a white screen.'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(FormControlLabel, {
+                        value: "image",
+                        disabled: Boolean(blockedReason),
+                        control: /*#__PURE__*/ _jsx(Radio, {
+                            size: "small"
+                        }),
+                        label: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    children: 'Your own image'
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: `A full-screen portrait image from your media library, at least ${POS_READER_SPLASH_LARGEST.width} × ${POS_READER_SPLASH_LARGEST.height} pixels.`
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            hasLogo ? null : /*#__PURE__*/ _jsx(PrerequisiteNotice, {
+                href: profileHref,
+                actionLabel: "Organization profile",
+                severity: status.effectiveChoice === 'logo' ? 'warning' : 'info',
+                children: 'Add a logo to your organization profile to show it on your card readers.'
+            }),
+            status.effectiveChoice === 'image' ? /*#__PURE__*/ _jsx(Box, {
+                children: /*#__PURE__*/ _jsx(BlockedControl, {
+                    blocked: Boolean(blockedReason),
+                    reason: blockedReason != null ? blockedReason : '',
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: ()=>void chooseImage(),
+                        children: status.image ? 'Choose another image' : 'Choose image'
+                    })
+                })
+            }) : null,
+            preview ? /*#__PURE__*/ _jsx(Box, {
+                component: "img",
+                src: preview,
+                alt: "",
+                sx: (theme)=>({
+                        alignSelf: 'flex-start',
+                        maxWidth: theme.spacing(16),
+                        maxHeight: theme.spacing(16),
+                        objectFit: 'contain',
+                        borderRadius: 1,
+                        border: 1,
+                        borderColor: 'divider'
+                    })
+            }) : null,
+            status.problem && !(status.effectiveChoice === 'logo' && !hasLogo) ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "warning",
+                children: status.problem
+            }) : /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: !status.locationReady ? 'Your readers show it once you add your first one.' : status.appliedAtMs ? `Sent to your readers ${new Date(status.appliedAtMs).toLocaleString()}. Readers update within about ten minutes.` : 'Readers update within about ten minutes of a change.'
+            })
+        ]
+    });
+}
+PosReaderSplashSetting.displayName = 'PosReaderSplashSetting';
+export default PosReaderSplashSetting;
+
+//# sourceMappingURL=pos-reader-splash-setting.component.js.map

package/src/lib/components/console/pos-reader-splash-setting.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/plugins/commerce/src/lib/components/console/pos-reader-splash-setting.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport { useMediaPicker, type PickedMedia } from '@aglyn/aglyn/app-utils/media-picker-context'\nimport { BlockedControl } from '@aglyn/shared-ui-jsx/components/blocked-control.component'\nimport { PrerequisiteNotice } from '@aglyn/shared-ui-jsx/components/prerequisite-notice.component'\nimport { useSnackbar } from '@aglyn/shared-ui-snackstack'\nimport { useConsoleHostRoute, useUser } from '@aglyn/tenant-feature-instance'\nimport {\n  Alert,\n  Box,\n  Button,\n  FormControlLabel,\n  Radio,\n  RadioGroup,\n  Stack,\n  Typography,\n} from '@mui/material'\nimport { useCallback, useEffect, useState } from 'react'\nimport {\n  POS_READER_SPLASH_LARGEST,\n  posReaderSplashArtworkProblem,\n  type PosReaderSplashChoice,\n  type PosReaderSplashStatus,\n} from '../../model/pos-reader-splash'\nimport {\n  PosReaderSplashRequestError,\n  readerSplashStatus,\n  saveReaderSplash,\n} from './pos/pos-reader-splash-api'\n\nexport interface PosReaderSplashSettingProps {\n  hostId: string\n  /** Whether the viewer may change the site's readers (`managePos`, admin or editor). */\n  canManagePos: boolean\n}\n\n/** An image's pixel size, read in the browser before anything is saved. */\nfunction imageSize(src: string): Promise<{ width: number; height: number } | null> {\n  return new Promise((resolve) => {\n    const image = new Image()\n    image.onload = () => resolve({ width: image.naturalWidth, height: image.naturalHeight })\n    image.onerror = () => resolve(null)\n    image.src = src\n  })\n}\n\nconst NOT_ALLOWED = 'Only an admin or editor with the \"Use the point of sale\" permission can change the readers.'\n\n/**\n * \"Reader start-up screen\" on the POS devices card (AGL-4048): what the\n * store's Stripe smart readers show while they wait for a payment. The\n * platform's default screen, the workspace's logo on a white screen, or a\n * full-screen portrait image from the media library. A white-label\n * workspace is never offered the platform's screen and shows its own logo\n * unless it picks an image.\n *\n * The server applies the choice to the store's readers when it is saved\n * (and again when this opens and finds the logo changed since); readers\n * pick it up within about ten minutes.\n */\nexport function PosReaderSplashSetting({ hostId, canManagePos }: PosReaderSplashSettingProps) {\n  const { data: user } = useUser()\n  const { enqueueSnackbar } = useSnackbar()\n  const { pickMedia } = useMediaPicker()\n  const { orgSlug } = useConsoleHostRoute(hostId)\n  const [status, setStatus] = useState<PosReaderSplashStatus | null>(null)\n  const [busy, setBusy] = useState(false)\n  const [picked, setPicked] = useState<PickedMedia | null>(null)\n  const uid = user?.uid ?? ''\n\n  useEffect(() => {\n    if (!user) return\n    let active = true\n    readerSplashStatus(user, hostId)\n      .then((answer) => {\n        if (active) setStatus(answer)\n      })\n      .catch(() => {\n        if (active) setStatus(null)\n      })\n    return () => {\n      active = false\n    }\n    // Keyed on the person, not the session object (see the register page).\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [uid, hostId])\n\n  const save = useCallback(\n    async (choice: PosReaderSplashChoice, image?: { mediaScope: string; mediaId: string }) => {\n      if (!user) return\n      setBusy(true)\n      try {\n        const answer = await saveReaderSplash(user, hostId, choice, image)\n        setStatus(answer)\n        if (!answer.problem) {\n          enqueueSnackbar(\n            answer.locationReady\n              ? 'Saved. Your readers show it within about ten minutes.'\n              : 'Saved. Your readers show it once you add one.',\n            { variant: 'success', persist: false },\n          )\n        }\n      } catch (error) {\n        enqueueSnackbar(\n          error instanceof PosReaderSplashRequestError ? error.message : 'The start-up screen could not be saved',\n          { variant: 'warning', persist: false },\n        )\n      } finally {\n        setBusy(false)\n      }\n    },\n    [user, hostId, enqueueSnackbar],\n  )\n\n  const chooseImage = async () => {\n    const media = await pickMedia?.({ kind: 'image' })\n    if (!media) return\n    if (!media.mediaId || !media.mediaScope) {\n      enqueueSnackbar('Choose an image from your media library.', { variant: 'warning', persist: false })\n      return\n    }\n    const size = await imageSize(media.url)\n    const problem = posReaderSplashArtworkProblem({\n      contentType: media.contentType ?? null,\n      width: size?.width ?? 0,\n      height: size?.height ?? 0,\n    })\n    if (problem) {\n      enqueueSnackbar(problem, { variant: 'warning', persist: false })\n      return\n    }\n    setPicked(media)\n    await save('image', { mediaScope: media.mediaScope, mediaId: media.mediaId })\n  }\n\n  if (!status?.available) return null\n\n  const blockedReason = !canManagePos ? NOT_ALLOWED : busy ? 'Saving…' : null\n  const hasLogo = Boolean(status.logoUrl)\n  const profileHref = orgSlug ? `/${orgSlug}/settings/profile` : undefined\n  const brand = status.productName\n  const preview =\n    status.effectiveChoice === 'logo' ? status.logoUrl : status.effectiveChoice === 'image' ? (picked?.url ?? status.image?.url ?? null) : null\n\n  return (\n    <Stack spacing={1}>\n      <Typography variant=\"subtitle2\">{'Reader start-up screen'}</Typography>\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {'What your card readers show while they wait for a payment.'}\n      </Typography>\n      <RadioGroup\n        value={status.effectiveChoice}\n        onChange={(event) => {\n          const choice = event.target.value as PosReaderSplashChoice\n          if (choice === 'image') {\n            if (status.image) void save('image', { mediaScope: status.image.mediaScope, mediaId: status.image.mediaId })\n            else void chooseImage()\n            return\n          }\n          void save(choice)\n        }}\n      >\n        {status.whiteLabel ? null : (\n          <FormControlLabel\n            value=\"platform\"\n            disabled={Boolean(blockedReason)}\n            control={<Radio size=\"small\" />}\n            label={\n              <Stack>\n                <Typography variant=\"body2\">{`The ${brand} start-up screen`}</Typography>\n                {status.platformReady ? null : (\n                  <Typography variant=\"caption\" color=\"text.secondary\">\n                    {'Until it is ready, your readers show their standard screen.'}\n                  </Typography>\n                )}\n              </Stack>\n            }\n          />\n        )}\n        <FormControlLabel\n          value=\"logo\"\n          disabled={Boolean(blockedReason) || !hasLogo}\n          control={<Radio size=\"small\" />}\n          label={\n            <Stack>\n              <Typography variant=\"body2\">{'Your logo'}</Typography>\n              <Typography variant=\"caption\" color=\"text.secondary\">\n                {'Your organization profile’s logo, centered on a white screen.'}\n              </Typography>\n            </Stack>\n          }\n        />\n        <FormControlLabel\n          value=\"image\"\n          disabled={Boolean(blockedReason)}\n          control={<Radio size=\"small\" />}\n          label={\n            <Stack>\n              <Typography variant=\"body2\">{'Your own image'}</Typography>\n              <Typography variant=\"caption\" color=\"text.secondary\">\n                {`A full-screen portrait image from your media library, at least ${POS_READER_SPLASH_LARGEST.width} × ${POS_READER_SPLASH_LARGEST.height} pixels.`}\n              </Typography>\n            </Stack>\n          }\n        />\n      </RadioGroup>\n      {hasLogo ? null : (\n        <PrerequisiteNotice\n          href={profileHref}\n          actionLabel=\"Organization profile\"\n          severity={status.effectiveChoice === 'logo' ? 'warning' : 'info'}\n        >\n          {'Add a logo to your organization profile to show it on your card readers.'}\n        </PrerequisiteNotice>\n      )}\n      {status.effectiveChoice === 'image' ? (\n        <Box>\n          <BlockedControl blocked={Boolean(blockedReason)} reason={blockedReason ?? ''}>\n            <Button size=\"small\" onClick={() => void chooseImage()}>\n              {status.image ? 'Choose another image' : 'Choose image'}\n            </Button>\n          </BlockedControl>\n        </Box>\n      ) : null}\n      {preview ? (\n        <Box\n          component=\"img\"\n          src={preview}\n          alt=\"\"\n          sx={(theme) => ({\n            alignSelf: 'flex-start',\n            maxWidth: theme.spacing(16),\n            maxHeight: theme.spacing(16),\n            objectFit: 'contain',\n            borderRadius: 1,\n            border: 1,\n            borderColor: 'divider',\n          })}\n        />\n      ) : null}\n      {status.problem && !(status.effectiveChoice === 'logo' && !hasLogo) ? (\n        <Alert severity=\"warning\">{status.problem}</Alert>\n      ) : (\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {!status.locationReady\n            ? 'Your readers show it once you add your first one.'\n            : status.appliedAtMs\n              ? `Sent to your readers ${new Date(status.appliedAtMs).toLocaleString()}. Readers update within about ten minutes.`\n              : 'Readers update within about ten minutes of a change.'}\n        </Typography>\n      )}\n    </Stack>\n  )\n}\nPosReaderSplashSetting.displayName = 'PosReaderSplashSetting'\n\nexport default PosReaderSplashSetting\n"],"names":["useMediaPicker","BlockedControl","PrerequisiteNotice","useSnackbar","useConsoleHostRoute","useUser","Alert","Box","Button","FormControlLabel","Radio","RadioGroup","Stack","Typography","useCallback","useEffect","useState","POS_READER_SPLASH_LARGEST","posReaderSplashArtworkProblem","PosReaderSplashRequestError","readerSplashStatus","saveReaderSplash","imageSize","src","Promise","resolve","image","Image","onload","width","naturalWidth","height","naturalHeight","onerror","NOT_ALLOWED","PosReaderSplashSetting","hostId","canManagePos","picked","status","data","user","enqueueSnackbar","pickMedia","orgSlug","setStatus","busy","setBusy","setPicked","uid","active","then","answer","catch","save","choice","problem","locationReady","variant","persist","error","message","chooseImage","media","kind","mediaId","mediaScope","size","url","contentType","available","blockedReason","hasLogo","Boolean","logoUrl","profileHref","undefined","brand","productName","preview","effectiveChoice","spacing","color","value","onChange","event","target","whiteLabel","disabled","control","label","platformReady","href","actionLabel","severity","blocked","reason","onClick","component","alt","sx","theme","alignSelf","maxWidth","maxHeight","objectFit","borderRadius","border","borderColor","appliedAtMs","Date","toLocaleString","displayName"],"mappings":"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"}

package/src/lib/components/console/pos-reader-splash-staff-page.component.d.ts

@@ -0,0 +1,14 @@
+import type { ConsoleStaffPageProps } from '@aglyn/aglyn';
+/**
+ * Staff → Reader start-up screen (AGL-4048): the platform's default screen
+ * for Stripe smart readers, shown by every store that has not picked its own
+ * logo or image. White-label workspaces never show it. The artwork is made
+ * separately and uploaded here, one image per screen size, each checked
+ * against Stripe's rules before it is kept. A change is put on every store's
+ * readers straight away; readers pick it up within about ten minutes.
+ */
+export declare function PosReaderSplashStaffPage(props: ConsoleStaffPageProps): import("react").JSX.Element;
+export declare namespace PosReaderSplashStaffPage {
+    var displayName: string;
+}
+export default PosReaderSplashStaffPage;

package/src/lib/components/console/pos-reader-splash-staff-page.component.js

@@ -0,0 +1,301 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { pluginDocsHelp } from "@aglyn/aglyn";
+import { resolveStaffRoleGate } from "@aglyn/aglyn/app-utils/staff-role-gate";
+import { CardDisplay, useConfirmationContext } from "@aglyn/shared-ui-jsx";
+import { BlockedControl } from "@aglyn/shared-ui-jsx/components/blocked-control.component";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { useUser } from "@aglyn/tenant-feature-instance";
+import { Alert, Box, Button, Stack, Typography } from "@mui/material";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { POS_READER_SPLASH_MAX_BYTES } from "../../model/pos-reader-splash.js";
+import { PosReaderSplashRequestError, staffApplyReaderSplash, staffReaderSplash, staffReaderSplashPreview, staffRemoveReaderSplash, staffUploadReaderSplash } from "./pos/pos-reader-splash-api.js";
+const WRITE_ROLES = [
+    'super'
+];
+/** A file as base64, without the `data:` prefix. */ function readBase64(file) {
+    return new Promise((resolve, reject)=>{
+        const reader = new FileReader();
+        reader.onload = ()=>{
+            var _reader_result;
+            return resolve(String((_reader_result = reader.result) != null ? _reader_result : '').replace(/^data:[^,]*,/, ''));
+        };
+        reader.onerror = ()=>reject(reader.error);
+        reader.readAsDataURL(file);
+    });
+}
+/**
+ * Staff → Reader start-up screen (AGL-4048): the platform's default screen
+ * for Stripe smart readers, shown by every store that has not picked its own
+ * logo or image. White-label workspaces never show it. The artwork is made
+ * separately and uploaded here, one image per screen size, each checked
+ * against Stripe's rules before it is kept. A change is put on every store's
+ * readers straight away; readers pick it up within about ten minutes.
+ */ export function PosReaderSplashStaffPage(props) {
+    var _ref, _ref1, _gate_reason, _ref2;
+    const { staffRole = null } = props;
+    const { data: user } = useUser();
+    const { enqueueSnackbar } = useSnackbar();
+    const { confirm } = useConfirmationContext();
+    const [state, setState] = useState(null);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [previews, setPreviews] = useState({});
+    const inputs = useRef({});
+    const gate = resolveStaffRoleGate(staffRole, WRITE_ROLES);
+    const uid = (_ref = user == null ? void 0 : user.uid) != null ? _ref : '';
+    const warn = useCallback((caught, fallback)=>enqueueSnackbar(caught instanceof PosReaderSplashRequestError ? caught.message : fallback, {
+            variant: 'warning',
+            persist: false
+        }), [
+        enqueueSnackbar
+    ]);
+    const load = useCallback(async ()=>{
+        if (!user) return;
+        setError(null);
+        try {
+            setState(await staffReaderSplash(user));
+        } catch (caught) {
+            setError(caught instanceof PosReaderSplashRequestError ? caught.message : 'The start-up screen could not be read');
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        uid
+    ]);
+    useEffect(()=>{
+        void load();
+    }, [
+        load
+    ]);
+    // Each family's image, fetched with the staff session (the route is not public).
+    const shas = (_ref1 = state == null ? void 0 : state.families.map((family)=>{
+        var _ref;
+        var _family_image;
+        return (_ref = (_family_image = family.image) == null ? void 0 : _family_image.sha256) != null ? _ref : '';
+    }).join(',')) != null ? _ref1 : '';
+    useEffect(()=>{
+        if (!user || !state) return;
+        let active = true;
+        const made = [];
+        void Promise.all(state.families.map(async (family)=>{
+            const url = family.image ? await staffReaderSplashPreview(user, family.id).catch(()=>null) : null;
+            if (url) made.push(url);
+            return [
+                family.id,
+                url != null ? url : undefined
+            ];
+        })).then((entries)=>{
+            if (active) setPreviews(Object.fromEntries(entries));
+        });
+        return ()=>{
+            active = false;
+            made.forEach((url)=>URL.revokeObjectURL(url));
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        uid,
+        shas
+    ]);
+    const applyEverywhere = async ()=>{
+        if (!user) return;
+        try {
+            const counts = await staffApplyReaderSplash(user);
+            enqueueSnackbar(`Updated ${counts.applied} ${counts.applied === 1 ? 'store' : 'stores'}` + (counts.failed ? `; ${counts.failed} could not be updated` : '') + (counts.more ? '. Press Update stores again for the rest.' : '.'), {
+                variant: counts.failed ? 'warning' : 'success',
+                persist: false
+            });
+        } catch (caught) {
+            warn(caught, 'Stores could not be updated');
+        }
+    };
+    const change = async (run, fallback)=>{
+        setBusy(true);
+        try {
+            setState(await run());
+            await applyEverywhere();
+        } catch (caught) {
+            warn(caught, fallback);
+        } finally{
+            setBusy(false);
+        }
+    };
+    const upload = async (family, file)=>{
+        if (!user || !file) return;
+        if (file.size >= POS_READER_SPLASH_MAX_BYTES) {
+            enqueueSnackbar('Use an image under 2 MB.', {
+                variant: 'warning',
+                persist: false
+            });
+            return;
+        }
+        const data = await readBase64(file);
+        await change(()=>staffUploadReaderSplash(user, family.id, data), 'The image could not be uploaded');
+    };
+    const remove = async (family)=>{
+        if (!user) return;
+        const confirmed = await confirm({
+            title: `Remove the ${family.label} screen?`,
+            description: family.id === 'portrait-large' ? 'Without it there is no default: stores that use it go back to the reader’s standard screen.' : 'This screen is then drawn from the S700 and S710 image.',
+            confirmationText: 'Remove',
+            confirmationButtonProps: {
+                color: 'error'
+            }
+        }).then(()=>true).catch(()=>false);
+        if (confirmed) await change(()=>staffRemoveReaderSplash(user, family.id), 'The image could not be removed');
+    };
+    const writeReason = (_gate_reason = gate.reason) != null ? _gate_reason : busy ? 'Saving…' : undefined;
+    return /*#__PURE__*/ _jsx(CardDisplay, {
+        header: 'Reader start-up screen',
+        help: pluginDocsHelp('posHardware', {
+            anchor: '#reader-start-up-screen'
+        }),
+        HeaderProps: {
+            action: /*#__PURE__*/ _jsx(BlockedControl, {
+                blocked: Boolean(writeReason) || !(state == null ? void 0 : state.ready),
+                reason: writeReason != null ? writeReason : 'Upload the S700 and S710 screen first.',
+                children: /*#__PURE__*/ _jsx(Button, {
+                    size: "small",
+                    onClick: ()=>void applyEverywhere(),
+                    children: 'Update stores'
+                })
+            })
+        },
+        contentGutterX: true,
+        contentGutterY: true,
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: 'The default screen Stripe smart readers show while they wait for a payment, on every store that has not ' + 'chosen its own logo or image. White-label workspaces never show it. Readers pick up a change within about ' + 'ten minutes.'
+                }),
+                /*#__PURE__*/ _jsx(Alert, {
+                    severity: "info",
+                    children: 'Each image must be a PNG or JPEG under 2 MB, at exactly the reader’s screen size. The WisePOS E screen is ' + 'drawn from the S700 and S710 image when none is uploaded.'
+                }),
+                error ? /*#__PURE__*/ _jsx(Alert, {
+                    severity: "warning",
+                    children: error
+                }) : null,
+                ((_ref2 = state == null ? void 0 : state.families) != null ? _ref2 : []).map((family)=>/*#__PURE__*/ _jsxs(Stack, {
+                        direction: {
+                            xs: 'column',
+                            sm: 'row'
+                        },
+                        spacing: 2,
+                        sx: {
+                            alignItems: {
+                                sm: 'center'
+                            }
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Box, {
+                                sx: (theme)=>({
+                                        width: theme.spacing(12),
+                                        aspectRatio: '9 / 16',
+                                        borderRadius: 1,
+                                        border: 1,
+                                        borderColor: 'divider',
+                                        bgcolor: 'action.hover',
+                                        overflow: 'hidden',
+                                        flexShrink: 0
+                                    }),
+                                children: previews[family.id] ? /*#__PURE__*/ _jsx(Box, {
+                                    component: "img",
+                                    src: previews[family.id],
+                                    alt: `${family.label} start-up screen`,
+                                    sx: {
+                                        width: 1,
+                                        height: 1,
+                                        objectFit: 'cover',
+                                        display: 'block'
+                                    }
+                                }) : null
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                spacing: 0.5,
+                                sx: {
+                                    flex: 1,
+                                    minWidth: 0
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "subtitle2",
+                                        children: family.label
+                                    }),
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body2",
+                                        color: "text.secondary",
+                                        children: `${family.width} × ${family.height} pixels. ` + (family.image ? `Uploaded ${new Date(family.image.uploadedAtMs).toLocaleString()}.` : family.id === 'portrait-large' ? 'Not uploaded: stores show the reader’s standard screen.' : 'Not uploaded: drawn from the S700 and S710 image.')
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        ref: (element)=>{
+                                            inputs.current[family.id] = element;
+                                        },
+                                        type: "file",
+                                        accept: "image/png,image/jpeg",
+                                        hidden: true,
+                                        "aria-label": `Upload the ${family.label} screen`,
+                                        onChange: (event)=>{
+                                            var _event_target_files;
+                                            const file = (_event_target_files = event.target.files) == null ? void 0 : _event_target_files[0];
+                                            event.target.value = '';
+                                            void upload(family, file);
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(BlockedControl, {
+                                        blocked: Boolean(writeReason),
+                                        reason: writeReason != null ? writeReason : '',
+                                        children: /*#__PURE__*/ _jsx(Button, {
+                                            size: "small",
+                                            onClick: ()=>{
+                                                var _inputs_current_family_id;
+                                                return (_inputs_current_family_id = inputs.current[family.id]) == null ? void 0 : _inputs_current_family_id.click();
+                                            },
+                                            children: family.image ? 'Replace' : 'Upload'
+                                        })
+                                    }),
+                                    family.image ? /*#__PURE__*/ _jsx(BlockedControl, {
+                                        blocked: Boolean(writeReason),
+                                        reason: writeReason != null ? writeReason : '',
+                                        children: /*#__PURE__*/ _jsx(Button, {
+                                            size: "small",
+                                            color: "error",
+                                            onClick: ()=>void remove(family),
+                                            children: 'Remove'
+                                        })
+                                    }) : null
+                                ]
+                            })
+                        ]
+                    }, family.id))
+            ]
+        })
+    });
+}
+PosReaderSplashStaffPage.displayName = 'PosReaderSplashStaffPage';
+export default PosReaderSplashStaffPage;
+
+//# sourceMappingURL=pos-reader-splash-staff-page.component.js.map