@licklist/design 0.78.5-dev.49 → 0.78.5-dev.50

package/dist/v2/components/Customer/CustomerDetail/CustomerDetail.js

@@ -0,0 +1,235 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { Badge } from '../../Badge/Badge.js';
+import { ArrowLeftIcon, InfoIcon, EditIcon } from '../../../icons/index.js';
+import './CustomerDetail.scss.js';
+
+var CustomerDetail = function(param) {
+    var onBack = param.onBack, onEdit = param.onEdit, name = param.name, customerId = param.customerId, waiverStatus = param.waiverStatus, _param_waiverStatusVariant = param.waiverStatusVariant, waiverStatusVariant = _param_waiverStatusVariant === void 0 ? 'success' : _param_waiverStatusVariant, _param_waiversEnabled = param.waiversEnabled, waiversEnabled = _param_waiversEnabled === void 0 ? true : _param_waiversEnabled, contactDetails = param.contactDetails, bookingDetails = param.bookingDetails, waiverDetails = param.waiverDetails, minors = param.minors, customerSinceFooter = param.customerSinceFooter;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "customer-detail",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "customer-detail__back",
+                onClick: onBack,
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "customer-detail__back-icon",
+                        children: /*#__PURE__*/ jsx(ArrowLeftIcon, {
+                            width: 24,
+                            height: 24
+                        })
+                    }),
+                    " Back to Customers"
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "customer-detail__header",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "customer-detail__title-row",
+                        children: /*#__PURE__*/ jsx("h1", {
+                            className: "customer-detail__name",
+                            children: name
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "customer-detail__badges-row",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "customer-detail__badges",
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "customer-detail__id-badge",
+                                        children: customerId
+                                    }),
+                                    waiversEnabled && /*#__PURE__*/ jsx(Badge, {
+                                        variant: waiverStatusVariant,
+                                        icon: waiverStatus === 'Expired' || waiverStatus === 'Not Signed' ? /*#__PURE__*/ jsx(InfoIcon, {}) : undefined,
+                                        children: waiverStatus
+                                    })
+                                ]
+                            }),
+                            onEdit && /*#__PURE__*/ jsxs("div", {
+                                className: "customer-detail__edit",
+                                onClick: onEdit,
+                                children: [
+                                    /*#__PURE__*/ jsx(EditIcon, {}),
+                                    " Edit"
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "customer-detail__grid",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "customer-detail__card",
+                        children: [
+                            /*#__PURE__*/ jsx("h2", {
+                                className: "customer-detail__card-title",
+                                children: "Contact Details"
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "customer-detail__info-group",
+                                children: [
+                                    /*#__PURE__*/ jsx("label", {
+                                        children: "Email"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: contactDetails.email
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "customer-detail__info-group",
+                                children: [
+                                    /*#__PURE__*/ jsx("label", {
+                                        children: "Phone"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: contactDetails.phone || '-'
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "customer-detail__info-group",
+                                children: [
+                                    /*#__PURE__*/ jsx("label", {
+                                        children: "Age"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: contactDetails.age || '-'
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "customer-detail__card",
+                        children: [
+                            /*#__PURE__*/ jsx("h2", {
+                                className: "customer-detail__card-title",
+                                children: "Booking Details"
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "customer-detail__info-group",
+                                children: [
+                                    /*#__PURE__*/ jsx("label", {
+                                        children: "Next Booking"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: bookingDetails.nextBooking
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "customer-detail__info-group",
+                                children: [
+                                    /*#__PURE__*/ jsx("label", {
+                                        children: "Customer Since"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: bookingDetails.customerSince
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    waiversEnabled && /*#__PURE__*/ jsxs("div", {
+                        className: "customer-detail__card",
+                        children: [
+                            /*#__PURE__*/ jsx("h2", {
+                                className: "customer-detail__card-title",
+                                children: "Waiver Details"
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "customer-detail__info-group",
+                                children: [
+                                    /*#__PURE__*/ jsx("label", {
+                                        children: "Status"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: /*#__PURE__*/ jsx(Badge, {
+                                            variant: waiverDetails.statusVariant,
+                                            icon: waiverDetails.status === 'Expired' || waiverDetails.status === 'Not Signed' ? /*#__PURE__*/ jsx(InfoIcon, {}) : undefined,
+                                            children: waiverDetails.status
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "customer-detail__info-group",
+                                children: [
+                                    /*#__PURE__*/ jsx("label", {
+                                        children: "Expires"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: waiverDetails.expires
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            waiversEnabled && minors && minors.length > 0 && /*#__PURE__*/ jsxs("div", {
+                className: "customer-detail__card customer-detail__card--full",
+                children: [
+                    /*#__PURE__*/ jsx("h2", {
+                        className: "customer-detail__card-title",
+                        children: "Minors Signed For"
+                    }),
+                    minors.map(function(minor, index) {
+                        return /*#__PURE__*/ jsxs("div", {
+                            className: "customer-detail__minor-row",
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "customer-detail__minor-info",
+                                    children: [
+                                        /*#__PURE__*/ jsx("div", {
+                                            className: "customer-detail__minor-name",
+                                            children: minor.name
+                                        }),
+                                        /*#__PURE__*/ jsx("div", {
+                                            className: "customer-detail__minor-age",
+                                            children: minor.age
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "customer-detail__minor-status-group",
+                                    children: [
+                                        /*#__PURE__*/ jsxs("span", {
+                                            className: "customer-detail__minor-expires",
+                                            children: [
+                                                "Expires: ",
+                                                minor.expires
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx(Badge, {
+                                            variant: minor.statusVariant,
+                                            icon: minor.status === 'Expired' || minor.status === 'Not Signed' ? /*#__PURE__*/ jsx(InfoIcon, {}) : undefined,
+                                            children: minor.status
+                                        })
+                                    ]
+                                })
+                            ]
+                        }, index);
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "customer-detail__footer",
+                children: [
+                    "Customer since: ",
+                    customerSinceFooter
+                ]
+            })
+        ]
+    });
+};
+
+export { CustomerDetail };

package/dist/v2/components/Customer/CustomerDetail/CustomerDetail.scss.js

@@ -0,0 +1,6 @@
+import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".customer-detail{background-color:#fff;font-family:var(--font-family-sans,\"Geist\",sans-serif);min-height:100vh;padding:40px}.customer-detail__back{align-items:center;border:1px solid #0000;border-radius:8px;color:#6200ee;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:8px;margin-bottom:30px;padding:8px 16px;transition:all .2s ease}.customer-detail__back:hover{background-color:#f3e5ff;border:1px solid #e0c7ff}.customer-detail__header{margin-bottom:40px}.customer-detail__name{color:#121e52;font-size:32px;font-weight:700;margin:0 0 16px}.customer-detail__badges-row{align-items:center;display:flex;justify-content:space-between}.customer-detail__badges{align-items:center;display:flex;gap:12px}.customer-detail__id-badge{background-color:#f4f5f9;border:1px solid #e2e4ed;border-radius:100px;color:#121e52;font-size:12px;font-weight:600;padding:4px 12px}.customer-detail__edit{align-items:center;border:1px solid #0000;border-radius:8px;color:#121e52;cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:8px;padding:8px 16px;transition:all .2s ease}.customer-detail__edit:hover{background-color:#e8eaf0;border:1px solid #d1d5e0}.customer-detail__grid{display:grid;gap:24px;grid-template-columns:1fr 1fr;margin-bottom:24px}.customer-detail__card{background:#fff;border:1px solid #e2e4ed;border-radius:12px;padding:24px}.customer-detail__card--full{grid-column:1/-1}.customer-detail__card-title{color:#121e52;font-size:18px;font-weight:700;margin:0 0 24px}.customer-detail__info-group{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}.customer-detail__info-group:last-child{margin-bottom:0}.customer-detail__info-group label{color:#9399b3;font-size:12px;margin:0}.customer-detail__info-group span{align-items:center;display:inline-flex;font-size:14px;font-weight:500}.customer-detail__minor-row{align-items:center;border-bottom:1px solid #f4f5f9;display:flex;justify-content:space-between;padding:16px 0}.customer-detail__minor-row:last-child{border-bottom:none;padding-bottom:0}.customer-detail__minor-row:first-of-type{padding-top:0}.customer-detail__minor-info{display:flex;flex-direction:column;gap:4px}.customer-detail__minor-name{color:#121e52;font-size:14px;font-weight:600}.customer-detail__minor-age{color:#9399b3;font-size:12px}.customer-detail__minor-status-group{align-items:center;display:flex;gap:16px}.customer-detail__footer,.customer-detail__minor-expires{color:#9399b3;font-size:12px}.customer-detail__footer{margin-top:40px}@media (max-width:768px){.customer-detail{padding:20px 16px}.customer-detail__back{font-size:13px;margin-bottom:20px;padding:6px 12px}.customer-detail__header{margin-bottom:24px}.customer-detail__name{font-size:24px;margin-bottom:12px}.customer-detail__badges-row{align-items:flex-start;flex-direction:column;gap:12px}.customer-detail__badges{flex-wrap:wrap}.customer-detail__id-badge{font-size:11px;padding:3px 10px}.customer-detail__edit{align-self:flex-start;font-size:13px;padding:6px 12px}.customer-detail__grid{gap:16px;grid-template-columns:1fr;margin-bottom:16px}.customer-detail__card{padding:20px}.customer-detail__card--full{grid-column:1}.customer-detail__card-title{font-size:16px;margin-bottom:16px}.customer-detail__info-group{margin-bottom:14px}.customer-detail__info-group label{font-size:11px}.customer-detail__info-group span{font-size:13px}.customer-detail__minor-row{align-items:flex-start;flex-direction:column;gap:12px;padding:12px 0}.customer-detail__minor-name{font-size:13px}.customer-detail__minor-age,.customer-detail__minor-expires{font-size:11px}.customer-detail__minor-status-group{justify-content:space-between;width:100%}.customer-detail__footer{font-size:11px;margin-top:24px}}@media (max-width:480px){.customer-detail{padding:16px 12px}.customer-detail__back{font-size:12px;margin-bottom:16px;padding:4px 8px}.customer-detail__name{font-size:20px}.customer-detail__card{border-radius:8px;padding:16px}.customer-detail__card-title{font-size:15px;margin-bottom:12px}.customer-detail__badges{gap:8px}.customer-detail__minor-row{padding:10px 0}}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/dist/v2/components/Customer/CustomerDetail/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CustomerDetail';
+//# sourceMappingURL=index.d.ts.map

package/dist/v2/components/Customer/CustomerDetail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/v2/components/Customer/CustomerDetail/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}

package/dist/v2/components/Customer/CustomerEdit/CustomerEdit.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CustomerData } from '../CustomerForm';
+export interface CustomerEditProps {
+    onBack: () => void;
+    onCancel: () => void;
+    onSave: (data: CustomerData) => void;
+    initialData?: Partial<CustomerData>;
+    isLoading?: boolean;
+}
+export declare const CustomerEdit: React.FC<CustomerEditProps>;
+//# sourceMappingURL=CustomerEdit.d.ts.map

package/dist/v2/components/Customer/CustomerEdit/CustomerEdit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomerEdit.d.ts","sourceRoot":"","sources":["../../../../../src/v2/components/Customer/CustomerEdit/CustomerEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAgB,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE5D,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwBpD,CAAA"}

package/dist/v2/components/Customer/CustomerEdit/CustomerEdit.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { NewPageHeader } from '../../NewPageHeader/NewPageHeader.js';
+import { CustomerForm } from '../CustomerForm/CustomerForm.js';
+
+var CustomerEdit = function(param) {
+    var onCancel = param.onCancel, onSave = param.onSave, initialData = param.initialData, isLoading = param.isLoading;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "tw-bg-white tw-min-h-screen tw-font-sans",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "tw-max-w-4xl tw-mx-auto tw-w-full",
+                children: /*#__PURE__*/ jsx(NewPageHeader, {
+                    title: "Edit Customer",
+                    onCancel: onCancel
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "tw-max-w-4xl tw-mx-auto tw-w-full tw-bg-white tw-border-2 tw-border-[#e8e9ef] tw-rounded-lg tw-p-4 md:tw-p-8 tw-mt-8",
+                children: /*#__PURE__*/ jsx(CustomerForm, {
+                    onSave: onSave,
+                    initialData: initialData,
+                    isLoading: isLoading,
+                    submitButtonLabel: "Save Changes",
+                    isEditing: true
+                })
+            })
+        ]
+    });
+};
+
+export { CustomerEdit };

package/dist/v2/components/Customer/CustomerEdit/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CustomerEdit';
+//# sourceMappingURL=index.d.ts.map

package/dist/v2/components/Customer/CustomerEdit/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/v2/components/Customer/CustomerEdit/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}

package/dist/v2/components/Customer/CustomerForm/CustomerForm.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface CustomerData {
+    firstName: string;
+    lastName: string;
+    email: string;
+    dobDay: string;
+    dobMonth: string;
+    dobYear: string;
+    phone: string;
+    optIn: boolean;
+    postcode: string;
+    gender: string;
+}
+export interface CustomerFormProps {
+    onSave: (data: CustomerData) => void;
+    initialData?: Partial<CustomerData>;
+    isLoading?: boolean;
+    submitButtonLabel?: string;
+    isEditing?: boolean;
+}
+export declare const CustomerForm: React.FC<CustomerFormProps>;
+//# sourceMappingURL=CustomerForm.d.ts.map

package/dist/v2/components/Customer/CustomerForm/CustomerForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomerForm.d.ts","sourceRoot":"","sources":["../../../../../src/v2/components/Customer/CustomerForm/CustomerForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAQlD,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,OAAO,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoZpD,CAAA"}