@aglyn/plugins-commerce 1.0.0-beta.143

package/src/lib/components/account.js

@@ -0,0 +1,645 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @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.
+ */ import * as Aglyn from "@aglyn/aglyn";
+import { trackEvent } from "@aglyn/aglyn/app-utils/analytics-events";
+import { mdiAccountCircleOutline } from "@aglyn/shared-data-mdi";
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Checkbox from "@mui/material/Checkbox";
+import Chip from "@mui/material/Chip";
+import Divider from "@mui/material/Divider";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import MuiLink from "@mui/material/Link";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+// Component ids are persisted in screen documents; never rename.
+export const ID = 'customer-account';
+const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
+/**
+ * Customer account block (AGL-294): signed-out visitors get sign-in /
+ * create-account forms on the AGL-109 membership APIs; signed-in
+ * members see their profile, address book, and order history (status +
+ * tracking) with sign-out. Session lives in the httpOnly member cookie.
+ */ const CustomerAccount = /*#__PURE__*/ forwardRef((props, ref)=>{
+    var _ref, _ref1;
+    var _account_subscriptions, _account_downloads;
+    const { signedOutHeading } = props, rest = _object_without_properties_loose(props, [
+        "signedOutHeading"
+    ]);
+    // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).
+    const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [
+        props['sx']
+    ];
+    const { hostId } = Aglyn.useSite();
+    const siteFetch = Aglyn.useSiteFetch();
+    const [account, setAccount] = useState(null);
+    const [tab, setTab] = useState(0);
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [displayName, setDisplayName] = useState('');
+    const [marketingConsent, setMarketingConsent] = useState(false);
+    const [error, setError] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [addressDraft, setAddressDraft] = useState(null);
+    const refresh = useCallback(async ()=>{
+        if (!hostId) return;
+        try {
+            const response = await fetch(`/api/membership/account?hostId=${encodeURIComponent(hostId)}`);
+            if (response.status === 401) return setAccount('anonymous');
+            if (response.ok) return setAccount(await response.json());
+            setAccount('anonymous');
+        } catch (unused) {
+            setAccount('anonymous');
+        }
+    }, [
+        hostId
+    ]);
+    useEffect(()=>{
+        void refresh();
+    }, [
+        refresh
+    ]);
+    const handleAuth = useCallback(async ()=>{
+        if (!hostId || busy) return;
+        setBusy(true);
+        setError('');
+        try {
+            const endpoint = tab === 0 ? '/api/membership/login' : '/api/membership/register';
+            const response = await siteFetch(endpoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(_extends({
+                    hostId,
+                    email,
+                    password
+                }, tab === 1 && displayName ? {
+                    displayName
+                } : {}, tab === 1 && marketingConsent ? {
+                    marketingConsent: true
+                } : {}))
+            });
+            const payload = await response.json().catch(()=>({}));
+            if (!response.ok) {
+                var _ref;
+                setError(String((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'Something went wrong'));
+                return;
+            }
+            if (tab === 1) {
+                // Register does not set the cookie on every deployment; sign in
+                // right after to be safe.
+                await siteFetch('/api/membership/login', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        hostId,
+                        email,
+                        password
+                    })
+                }).catch(()=>undefined);
+            }
+            /*
+         * The host's own GA4 property, not Aglyn's (AGL-1591). Reported after
+         * the response was accepted and never on a validation failure, which
+         * is what makes the count mean "an account door was completed".
+         *
+         * The follow-up login above is deliberately NOT a second event: it is
+         * a cookie repair for the registration that just happened, and
+         * reporting it would give every new member both a `sign_up` and a
+         * `login` in the same second — turning a returning-visitor metric into
+         * a copy of the signup one.
+         *
+         * Not awaited: this branch re-renders in place rather than navigating,
+         * so there is no teardown to lose the hit to.
+         */ trackEvent(tab === 1 ? 'sign_up' : 'login', {
+                method: 'password'
+            });
+            await refresh();
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        hostId,
+        busy,
+        tab,
+        email,
+        password,
+        displayName,
+        marketingConsent,
+        refresh,
+        siteFetch
+    ]);
+    const handleSignOut = useCallback(async ()=>{
+        if (!hostId) return;
+        await siteFetch('/api/membership/logout', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                hostId
+            })
+        }).catch(()=>undefined);
+        setAccount('anonymous');
+    }, [
+        hostId,
+        siteFetch
+    ]);
+    const handleAddressSave = useCallback(async ()=>{
+        if (!hostId || account === 'anonymous' || !account || !addressDraft) {
+            return;
+        }
+        const addresses = [
+            ...account.member.addresses,
+            addressDraft
+        ].slice(-5);
+        await siteFetch('/api/membership/account', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                hostId,
+                addresses
+            })
+        }).catch(()=>undefined);
+        setAddressDraft(null);
+        await refresh();
+    }, [
+        hostId,
+        account,
+        addressDraft,
+        refresh,
+        siteFetch
+    ]);
+    if (!hostId) {
+        return /*#__PURE__*/ _jsx(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: [
+                {
+                    p: 3,
+                    border: '1px dashed',
+                    borderColor: 'divider',
+                    borderRadius: 1,
+                    color: 'text.secondary',
+                    fontSize: 13,
+                    fontFamily: 'system-ui, sans-serif'
+                },
+                ...nodeSx
+            ],
+            children: 'Customer account — sign-in and order history render here'
+        }));
+    }
+    if (account === null) return /*#__PURE__*/ _jsx(Box, _extends({
+        ref: ref
+    }, rest));
+    if (account === 'anonymous') {
+        return /*#__PURE__*/ _jsxs(Box, _extends({
+            ref: ref
+        }, rest, {
+            sx: [
+                {
+                    maxWidth: 420
+                },
+                ...nodeSx
+            ],
+            children: [
+                signedOutHeading ? /*#__PURE__*/ _jsx(Typography, {
+                    variant: "h5",
+                    gutterBottom: true,
+                    children: signedOutHeading
+                }) : null,
+                /*#__PURE__*/ _jsxs(Tabs, {
+                    value: tab,
+                    onChange: (_event, value)=>setTab(value),
+                    children: [
+                        /*#__PURE__*/ _jsx(Tab, {
+                            label: "Sign in"
+                        }),
+                        /*#__PURE__*/ _jsx(Tab, {
+                            label: "Create account"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 1.5,
+                        mt: 2
+                    },
+                    children: [
+                        tab === 1 ? /*#__PURE__*/ _jsx(TextField, {
+                            label: "Name",
+                            value: displayName,
+                            onChange: (event)=>setDisplayName(event.target.value),
+                            size: "small"
+                        }) : null,
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Email",
+                            type: "email",
+                            value: email,
+                            onChange: (event)=>setEmail(event.target.value),
+                            size: "small"
+                        }),
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Password",
+                            type: "password",
+                            value: password,
+                            onChange: (event)=>setPassword(event.target.value),
+                            size: "small",
+                            helperText: tab === 1 ? 'At least 8 characters' : undefined
+                        }),
+                        tab === 1 ? /*#__PURE__*/ _jsx(FormControlLabel, {
+                            control: /*#__PURE__*/ _jsx(Checkbox, {
+                                size: "small",
+                                checked: marketingConsent,
+                                onChange: (event)=>setMarketingConsent(event.target.checked)
+                            }),
+                            label: "Email me about offers and updates"
+                        }) : null,
+                        error ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "error",
+                            children: error
+                        }) : null,
+                        /*#__PURE__*/ _jsx(Button, {
+                            variant: "contained",
+                            color: "primary",
+                            disabled: busy || !email || !password,
+                            onClick: handleAuth,
+                            children: busy ? 'Working…' : tab === 0 ? 'Sign in' : 'Create account'
+                        }),
+                        tab === 0 ? // Recovery flow (AGL-552): the built-in /recover route (or
+                        // the host's designated recovery screen) handles the rest.
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            children: /*#__PURE__*/ _jsx(MuiLink, {
+                                href: "/recover",
+                                underline: "hover",
+                                children: 'Forgot password?'
+                            })
+                        }) : null
+                    ]
+                })
+            ]
+        }));
+    }
+    return /*#__PURE__*/ _jsxs(Box, _extends({
+        ref: ref
+    }, rest, {
+        sx: [
+            {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 2
+            },
+            ...nodeSx
+        ],
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h5",
+                        sx: {
+                            flex: 1
+                        },
+                        children: account.member.displayName || account.member.email
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: handleSignOut,
+                        children: 'Sign out'
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: account.member.email
+            }),
+            /*#__PURE__*/ _jsx(Divider, {
+                textAlign: "left",
+                children: 'Orders'
+            }),
+            account.orders.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'No orders yet.'
+            }) : account.orders.map((order)=>{
+                var _order_tracking_carrier;
+                var _order_tracking;
+                return /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        gap: 1,
+                        alignItems: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs(Box, {
+                            sx: {
+                                flex: 1,
+                                minWidth: 0
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    noWrap: true,
+                                    children: `${order.number} · ${order.itemsSummary || 'Order'}`
+                                }),
+                                /*#__PURE__*/ _jsxs(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: [
+                                        new Date(order.createdAtMs).toLocaleDateString(),
+                                        ((_order_tracking = order.tracking) == null ? void 0 : _order_tracking.trackingNumber) ? ` · ${(_order_tracking_carrier = order.tracking.carrier) != null ? _order_tracking_carrier : ''} ${order.tracking.trackingNumber}` : ''
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Chip, {
+                            label: order.status.replace('_', ' '),
+                            size: "small",
+                            variant: "outlined"
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            children: usd(order.totalCents)
+                        })
+                    ]
+                }, order.id);
+            }),
+            ((_ref = (_account_subscriptions = account.subscriptions) == null ? void 0 : _account_subscriptions.length) != null ? _ref : 0) > 0 ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Divider, {
+                        textAlign: "left",
+                        children: 'Subscriptions'
+                    }),
+                    account.subscriptions.map((subscription)=>/*#__PURE__*/ _jsxs(Box, {
+                            sx: {
+                                display: 'flex',
+                                gap: 1,
+                                alignItems: 'center'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    sx: {
+                                        flex: 1
+                                    },
+                                    noWrap: true,
+                                    children: subscription.productName
+                                }),
+                                /*#__PURE__*/ _jsx(Chip, {
+                                    label: subscription.status,
+                                    size: "small",
+                                    variant: "outlined",
+                                    color: subscription.status === 'active' ? 'success' : 'default'
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    onClick: async ()=>{
+                                        const response = await siteFetch('/api/commerce/subscription-portal', {
+                                            method: 'POST',
+                                            headers: {
+                                                'Content-Type': 'application/json'
+                                            },
+                                            body: JSON.stringify({
+                                                hostId
+                                            })
+                                        }).catch(()=>null);
+                                        const payload = await (response == null ? void 0 : response.json().catch(()=>({})));
+                                        if (payload == null ? void 0 : payload.url) window.location.assign(payload.url);
+                                    },
+                                    children: 'Manage'
+                                })
+                            ]
+                        }, subscription.id))
+                ]
+            }) : null,
+            ((_ref1 = (_account_downloads = account.downloads) == null ? void 0 : _account_downloads.length) != null ? _ref1 : 0) > 0 ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Divider, {
+                        textAlign: "left",
+                        children: 'Downloads'
+                    }),
+                    account.downloads.map((download)=>{
+                        var _download_licenseKeys;
+                        return /*#__PURE__*/ _jsxs(Box, {
+                            sx: {
+                                display: 'flex',
+                                gap: 1,
+                                alignItems: 'center'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsxs(Box, {
+                                    sx: {
+                                        flex: 1,
+                                        minWidth: 0
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "body2",
+                                            noWrap: true,
+                                            children: download.productName
+                                        }),
+                                        (_download_licenseKeys = download.licenseKeys) == null ? void 0 : _download_licenseKeys.map((key)=>/*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                sx: {
+                                                    fontFamily: 'monospace',
+                                                    display: 'block'
+                                                },
+                                                children: key
+                                            }, key))
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    href: download.url,
+                                    children: 'Download'
+                                })
+                            ]
+                        }, `${download.orderId}:${download.productId}`);
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsx(Divider, {
+                textAlign: "left",
+                children: 'Addresses'
+            }),
+            account.member.addresses.map((address, index)=>{
+                var _address_city, _address_state, _address_postalCode;
+                return /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: [
+                        address.name,
+                        address.line1,
+                        address.line2,
+                        `${(_address_city = address.city) != null ? _address_city : ''} ${(_address_state = address.state) != null ? _address_state : ''} ${(_address_postalCode = address.postalCode) != null ? _address_postalCode : ''}`.trim(),
+                        address.country
+                    ].filter(Boolean).join(', ')
+                }, index);
+            }),
+            addressDraft ? /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 1
+                },
+                children: [
+                    [
+                        [
+                            'name',
+                            'Full name'
+                        ],
+                        [
+                            'line1',
+                            'Address'
+                        ],
+                        [
+                            'line2',
+                            'Apt / suite'
+                        ],
+                        [
+                            'city',
+                            'City'
+                        ],
+                        [
+                            'state',
+                            'State'
+                        ],
+                        [
+                            'postalCode',
+                            'Postal code'
+                        ],
+                        [
+                            'country',
+                            'Country (US)'
+                        ]
+                    ].map(([field, label])=>{
+                        var _addressDraft_field;
+                        return /*#__PURE__*/ _jsx(TextField, {
+                            label: label,
+                            value: (_addressDraft_field = addressDraft[field]) != null ? _addressDraft_field : '',
+                            onChange: (event)=>setAddressDraft((prev)=>prev ? _extends({}, prev, {
+                                        [field]: event.target.value
+                                    }) : prev),
+                            size: "small"
+                        }, field);
+                    }),
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            gap: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                onClick: ()=>setAddressDraft(null),
+                                children: 'Cancel'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                variant: "contained",
+                                color: "primary",
+                                disabled: !addressDraft.line1 || !addressDraft.city,
+                                onClick: handleAddressSave,
+                                children: 'Save address'
+                            })
+                        ]
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                sx: {
+                    alignSelf: 'flex-start'
+                },
+                onClick: ()=>setAddressDraft({}),
+                children: 'Add address'
+            })
+        ]
+    }));
+});
+CustomerAccount.displayName = 'AglynCustomerAccount';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Customer account',
+    description: 'Sign-in and account area — profile, addresses and order history.',
+    category: Aglyn.ComponentCategory.COMMERCE,
+    icon: {
+        path: mdiAccountCircleOutline.path,
+        sx: {
+            color: '#2e7d32'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'signedOutHeading',
+            label: 'Signed-out heading',
+            description: 'Shown above the sign-in form.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Customer account',
+        pluginId: BUNDLE_ID,
+        description: 'Sign-in/up, profile, addresses, and order history',
+        category: Aglyn.ComponentCategory.COMMERCE,
+        icon: {
+            path: mdiAccountCircleOutline.path,
+            sx: {
+                color: '#2e7d32'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                signedOutHeading: 'Your account'
+            }
+        }
+    }
+];
+export default CustomerAccount;
+
+//# sourceMappingURL=account.js.map