@licklist/design 0.44.486-dev.81 → 0.44.486-dev.82
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/sales/booking/results/BookingResults.d.ts +3 -1
- package/dist/sales/booking/results/BookingResults.d.ts.map +1 -1
- package/dist/sales/booking/results/BookingResults.js +1 -1
- package/dist/sales/booking/results/components/ResultCard.d.ts +3 -1
- package/dist/sales/booking/results/components/ResultCard.d.ts.map +1 -1
- package/dist/sales/booking/results/components/ResultCard.js +1 -1
- package/package.json +1 -1
- package/src/sales/booking/results/BookingResults.tsx +7 -0
- package/src/sales/booking/results/components/ResultCard.tsx +28 -4
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
|
|
3
|
+
import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
|
|
3
4
|
export type BookingResultsProps = {
|
|
4
5
|
orders?: Order[] | null;
|
|
5
6
|
onCardClick?: (id: number) => void;
|
|
7
|
+
staffMembers?: User[] | null;
|
|
6
8
|
};
|
|
7
|
-
export declare const BookingResults: ({ orders, onCardClick, }: BookingResultsProps) => JSX.Element;
|
|
9
|
+
export declare const BookingResults: ({ orders, onCardClick, staffMembers, }: BookingResultsProps) => JSX.Element;
|
|
8
10
|
//# sourceMappingURL=BookingResults.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BookingResults.d.ts","sourceRoot":"","sources":["../../../../src/sales/booking/results/BookingResults.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAC;
|
|
1
|
+
{"version":3,"file":"BookingResults.d.ts","sourceRoot":"","sources":["../../../../src/sales/booking/results/BookingResults.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAC;AAC7E,OAAO,EAAE,IAAI,EAAE,MAAM,oDAAoD,CAAC;AAI1E,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,cAAc,2CAIxB,mBAAmB,gBA+BrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("react"),t=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-i18next"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("react"),t=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-i18next"),a=require("./components/ResultCard.js"),o=require("./constants.js");exports.BookingResults=function(e){var r=e.orders,l=e.onCardClick,s=e.staffMembers,i=n.useTranslation("Design").t;return t.createElement("div",{className:"booking-results"},0===(null==r?void 0:r.length)?t.createElement("p",null,i("noBookingOrdersWereFound")):t.createElement("div",{className:"booking-results-wrapper"},null==r?void 0:r.map((function(e,r){var n=null==s?void 0:s.find((function(r){var t;return r.id===(null===(t=null==e?void 0:e.orderMetadata)||void 0===t?void 0:t.created_by)}));return t.createElement(a.ResultCard,{key:e.id,order:e,staffMember:n,className:o.BACKGROUND_COLOR_CLASSNAMES[r%o.BACKGROUND_COLOR_CLASSNAMES.length],onCardClick:l})}))))};
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
|
|
3
|
+
import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
|
|
3
4
|
export type ResultCardProps = {
|
|
4
5
|
className: string;
|
|
5
6
|
order: Order;
|
|
7
|
+
staffMember?: User;
|
|
6
8
|
onCardClick?: (id: number) => void;
|
|
7
9
|
};
|
|
8
|
-
export declare const ResultCard: ({ order, className, onCardClick, }: ResultCardProps) => JSX.Element;
|
|
10
|
+
export declare const ResultCard: ({ order, className, staffMember, onCardClick, }: ResultCardProps) => JSX.Element;
|
|
9
11
|
//# sourceMappingURL=ResultCard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResultCard.d.ts","sourceRoot":"","sources":["../../../../../src/sales/booking/results/components/ResultCard.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAC;
|
|
1
|
+
{"version":3,"file":"ResultCard.d.ts","sourceRoot":"","sources":["../../../../../src/sales/booking/results/components/ResultCard.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAC;AAC7E,OAAO,EAAE,IAAI,EAAE,MAAM,oDAAoD,CAAC;AAS1E,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAIF,eAAO,MAAM,UAAU,oDAKpB,eAAe,gBAkFjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),r=require("@licklist/core/dist/Config"),l=require("react-i18next"),a=require("../../../../static/Icon.js"),n=e(require("clsx")),i=require("luxon"),
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),r=require("@licklist/core/dist/Config"),l=require("react-i18next"),a=require("../../../../static/Icon.js"),n=e(require("clsx")),i=require("luxon"),c=require("react-intl"),u=require("@licklist/core/dist/DataMapper/Order/OrderDataMapper"),s=require("@licklist/plugins/dist/utils/formatDate"),o=require("@licklist/plugins/dist/utils/sourceTitle");exports.ResultCard=function(e){var m,d,p,E=e.order,f=e.className,v=e.staffMember,N=e.onCardClick,q=l.useTranslation("Design").t,D=c.useIntl().formatNumber,y=E.id,O=E.people,g=E.user,C=E.status,M=E.startDate,b=E.products,k=E.source,x=E.totalAmount,T=E.event,h=E.menu,A=(null===(m=b.map((function(e){return e.name})))||void 0===m?void 0:m.join(", "))||"",I=(null==T?void 0:T.name)||(null==h?void 0:h.name)||"",R=function(){N&&N(y)};return t.createElement("div",{className:n("result-card",f),onClick:R,onKeyUp:R,role:"button",tabIndex:0},t.createElement("div",{className:"card-content"},t.createElement("div",{className:"order-id"},y),t.createElement("div",{className:"order-people"},t.createElement(a.default,{type:"user",width:"10",height:"11"}),O),t.createElement("div",{className:"order-description"},t.createElement("p",{className:"name"},g.firstName," ",g.lastName),g.email&&t.createElement("p",null,g.email),(null===(d=g.userDetail)||void 0===d?void 0:d.phone)&&t.createElement("p",null,null===(p=g.userDetail)||void 0===p?void 0:p.phone),t.createElement("p",null,"------"),t.createElement("p",null,q("activity"),": ",I," "),k===u.ORDER_SOURCE_MANUAL&&v&&t.createElement("p",null,q("staff"),": ","".concat(v.firstName," ").concat(v.lastName)),t.createElement("p",null,q("status"),": ",q(C)),t.createElement("p",null,q("date"),": ",s.formatDateStringForEvent(M,!1)),t.createElement("p",null,q("time"),": ",i.DateTime.fromISO(M).toFormat(r.TIME_FORMAT)),t.createElement("p",{className:"products",title:A},q("products"),": ",A),t.createElement("p",null,q("totalAmount"),":"," ",D(x,{style:"currency",currency:r.Currency.GBP})),t.createElement("p",null,q("source"),": ",q(o.getOrderSourceTitle(k))))))};
|
package/package.json
CHANGED
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { useTranslation } from "react-i18next";
|
|
3
3
|
import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
|
|
4
|
+
import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
|
|
4
5
|
import { ResultCard } from "./components/ResultCard";
|
|
5
6
|
import { BACKGROUND_COLOR_CLASSNAMES } from "./constants";
|
|
6
7
|
|
|
7
8
|
export type BookingResultsProps = {
|
|
8
9
|
orders?: Order[] | null;
|
|
9
10
|
onCardClick?: (id: number) => void;
|
|
11
|
+
staffMembers?: User[] | null;
|
|
10
12
|
};
|
|
11
13
|
|
|
12
14
|
export const BookingResults = ({
|
|
13
15
|
orders,
|
|
14
16
|
onCardClick,
|
|
17
|
+
staffMembers,
|
|
15
18
|
}: BookingResultsProps) => {
|
|
16
19
|
const { t } = useTranslation("Design");
|
|
17
20
|
|
|
@@ -22,10 +25,14 @@ export const BookingResults = ({
|
|
|
22
25
|
) : (
|
|
23
26
|
<div className="booking-results-wrapper">
|
|
24
27
|
{orders?.map((order, index) => {
|
|
28
|
+
const staffMember = staffMembers?.find(
|
|
29
|
+
(staff) => staff.id === order?.orderMetadata?.created_by
|
|
30
|
+
);
|
|
25
31
|
return (
|
|
26
32
|
<ResultCard
|
|
27
33
|
key={order.id}
|
|
28
34
|
order={order}
|
|
35
|
+
staffMember={staffMember}
|
|
29
36
|
className={
|
|
30
37
|
BACKGROUND_COLOR_CLASSNAMES[
|
|
31
38
|
index % BACKGROUND_COLOR_CLASSNAMES.length
|
|
@@ -4,15 +4,19 @@ import { useTranslation } from "react-i18next";
|
|
|
4
4
|
import { DateTime } from "luxon";
|
|
5
5
|
import { useIntl } from "react-intl";
|
|
6
6
|
import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
|
|
7
|
+
import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
|
|
7
8
|
import { TIME_FORMAT } from "@licklist/core/dist/Config";
|
|
8
9
|
import * as Config from "@licklist/core/dist/Config";
|
|
10
|
+
import { ORDER_SOURCE_MANUAL } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
|
|
9
11
|
import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
|
|
10
12
|
import { getOrderSourceTitle } from "@licklist/plugins/dist/utils/sourceTitle";
|
|
13
|
+
|
|
11
14
|
import Icon from "../../../../static/Icon";
|
|
12
15
|
|
|
13
16
|
export type ResultCardProps = {
|
|
14
17
|
className: string;
|
|
15
18
|
order: Order;
|
|
19
|
+
staffMember?: User;
|
|
16
20
|
onCardClick?: (id: number) => void;
|
|
17
21
|
};
|
|
18
22
|
|
|
@@ -21,15 +25,29 @@ export type ResultCardProps = {
|
|
|
21
25
|
export const ResultCard = ({
|
|
22
26
|
order,
|
|
23
27
|
className,
|
|
28
|
+
staffMember,
|
|
24
29
|
onCardClick,
|
|
25
30
|
}: ResultCardProps) => {
|
|
26
31
|
const { t } = useTranslation("Design");
|
|
27
32
|
const { formatNumber } = useIntl();
|
|
28
|
-
|
|
29
|
-
|
|
33
|
+
|
|
34
|
+
const {
|
|
35
|
+
id,
|
|
36
|
+
people,
|
|
37
|
+
user,
|
|
38
|
+
status,
|
|
39
|
+
startDate,
|
|
40
|
+
products,
|
|
41
|
+
source,
|
|
42
|
+
totalAmount,
|
|
43
|
+
event,
|
|
44
|
+
menu,
|
|
45
|
+
} = order;
|
|
30
46
|
|
|
31
47
|
const productList = products.map((product) => product.name)?.join(", ") || "";
|
|
32
48
|
|
|
49
|
+
const activityName = event?.name || menu?.name || "";
|
|
50
|
+
|
|
33
51
|
const onClick = () => {
|
|
34
52
|
if (!onCardClick) return;
|
|
35
53
|
|
|
@@ -57,8 +75,14 @@ export const ResultCard = ({
|
|
|
57
75
|
{user.email && <p>{user.email}</p>}
|
|
58
76
|
{user.userDetail?.phone && <p>{user.userDetail?.phone}</p>}
|
|
59
77
|
<p>------</p>
|
|
60
|
-
<p>
|
|
61
|
-
|
|
78
|
+
<p>
|
|
79
|
+
{t("activity")}: {activityName}{" "}
|
|
80
|
+
</p>
|
|
81
|
+
{source === ORDER_SOURCE_MANUAL && staffMember && (
|
|
82
|
+
<p>
|
|
83
|
+
{t("staff")}: {`${staffMember.firstName} ${staffMember.lastName}`}
|
|
84
|
+
</p>
|
|
85
|
+
)}
|
|
62
86
|
<p>
|
|
63
87
|
{t("status")}: {t(status)}
|
|
64
88
|
</p>
|