@licklist/design 0.44.486-dev.51 → 0.44.486-dev.53

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.
Files changed (9) hide show
  1. package/dist/sales/booking/results/components/ResultCard.d.ts.map +1 -1
  2. package/dist/sales/booking/results/components/ResultCard.js +1 -1
  3. package/dist/sales/source-of-sales/SourceOfSalesChart.d.ts.map +1 -1
  4. package/dist/sales/source-of-sales/SourceOfSalesChart.js +1 -1
  5. package/dist/styles/sales/BookingResults.scss +9 -1
  6. package/package.json +1 -1
  7. package/src/sales/booking/results/components/ResultCard.tsx +6 -1
  8. package/src/sales/source-of-sales/SourceOfSalesChart.tsx +31 -28
  9. package/src/styles/sales/BookingResults.scss +9 -1
package/dist/sales/booking/results/components/ResultCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ResultCard.d.ts","sourceRoot":"","sources":["../../../../../src/sales/booking/results/components/ResultCard.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAC;AAK7E,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAIF,eAAO,MAAM,UAAU,uCAIpB,eAAe,gBA8CjB,CAAC"}
1
+ {"version":3,"file":"ResultCard.d.ts","sourceRoot":"","sources":["../../../../../src/sales/booking/results/components/ResultCard.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,sDAAsD,CAAC;AAK7E,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAIF,eAAO,MAAM,UAAU,uCAIpB,eAAe,gBAmDjB,CAAC"}
package/dist/sales/booking/results/components/ResultCard.js CHANGED
@@ -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"),s=require("@licklist/plugins/dist/utils/formatDate");exports.ResultCard=function(e){var c,u,o=e.order,m=e.className,d=e.onCardClick,p=l.useTranslation("Design").t,E=o.id,f=o.people,v=o.user,N=o.status,q=o.startDate,D=function(){d&&d(E)};return t.createElement("div",{className:n("result-card",m),onClick:D,onKeyUp:D,role:"button",tabIndex:0},t.createElement("div",{className:"card-content"},t.createElement("div",{className:"order-id"},E),t.createElement("div",{className:"order-people"},t.createElement(a.default,{type:"user",width:"10",height:"11"}),f),t.createElement("div",{className:"order-description"},t.createElement("p",{className:"name"},v.firstName," ",v.lastName),v.email&&t.createElement("p",null,v.email),(null===(c=v.userDetail)||void 0===c?void 0:c.phone)&&t.createElement("p",null,null===(u=v.userDetail)||void 0===u?void 0:u.phone),t.createElement("p",null,"------"),t.createElement("p",null,p("activity"),": "),t.createElement("p",null,p("staff"),": "),t.createElement("p",null,p("status"),": ",p(N)),t.createElement("p",null,p("date"),": ",s.formatDateStringForEvent(q,!1)),t.createElement("p",null,p("time"),": ",i.DateTime.fromISO(q).toFormat(r.TIME_FORMAT)))))};
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"),s=require("@licklist/plugins/dist/utils/formatDate");exports.ResultCard=function(e){var c,u,o,m=e.order,d=e.className,p=e.onCardClick,E=l.useTranslation("Design").t,f=m.id,v=m.people,N=m.user,q=m.status,D=m.startDate,x=(null===(c=m.products.map((function(e){return e.name})))||void 0===c?void 0:c.join(", "))||"",g=function(){p&&p(f)};return t.createElement("div",{className:n("result-card",d),onClick:g,onKeyUp:g,role:"button",tabIndex:0},t.createElement("div",{className:"card-content"},t.createElement("div",{className:"order-id"},f),t.createElement("div",{className:"order-people"},t.createElement(a.default,{type:"user",width:"10",height:"11"}),v),t.createElement("div",{className:"order-description"},t.createElement("p",{className:"name"},N.firstName," ",N.lastName),N.email&&t.createElement("p",null,N.email),(null===(u=N.userDetail)||void 0===u?void 0:u.phone)&&t.createElement("p",null,null===(o=N.userDetail)||void 0===o?void 0:o.phone),t.createElement("p",null,"------"),t.createElement("p",null,E("activity"),": "),t.createElement("p",null,E("staff"),": "),t.createElement("p",null,E("status"),": ",E(q)),t.createElement("p",null,E("date"),": ",s.formatDateStringForEvent(D,!1)),t.createElement("p",null,E("time"),": ",i.DateTime.fromISO(D).toFormat(r.TIME_FORMAT)),t.createElement("p",{className:"products",title:x},E("products"),": ",x))))};
package/dist/sales/source-of-sales/SourceOfSalesChart.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SourceOfSalesChart.d.ts","sourceRoot":"","sources":["../../../src/sales/source-of-sales/SourceOfSalesChart.tsx"],"names":[],"mappings":";AAMA,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,YAAY,EAAE,CAAC;CACtB;AAcD,iBAAS,kBAAkB,CAAC,EAAE,IAAI,EAAE,EAAE,kBAAkB,eAyFvD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
1
+ {"version":3,"file":"SourceOfSalesChart.d.ts","sourceRoot":"","sources":["../../../src/sales/source-of-sales/SourceOfSalesChart.tsx"],"names":[],"mappings":";AAMA,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,YAAY,EAAE,CAAC;CACtB;AAcD,iBAAS,kBAAkB,CAAC,EAAE,IAAI,EAAE,EAAE,kBAAkB,eA4FvD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
package/dist/sales/source-of-sales/SourceOfSalesChart.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("tslib"),t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-i18next"),c=require("react-intl"),l=require("recharts"),o="affiliates";exports.SourceOfSalesChart=function(e){var i=e.data,s=t.useMemo((function(){return a.__spreadArray(a.__spreadArray([],a.__read(i),!1),[{source:2,name:o}],!1)}),[i]),u=n.useTranslation("Design").t,d=c.useIntl().formatNumber,m=a.__read(t.useState(44),2),p=m[0],f=m[1];return t.useEffect((function(){s.length>0&&f(44-22*s.length)}),[s]),r.createElement("div",{className:"source-of-sales"},r.createElement("div",{className:"source-of-sales__header"},u("sourceOfSales")),r.createElement("div",{className:"source-of-sales__pie-chart"},r.createElement(l.ResponsiveContainer,{width:"100%",height:"100%"},r.createElement(l.PieChart,null,r.createElement(l.Legend,{iconType:"circle",wrapperStyle:{left:170,top:20},layout:"vertical",verticalAlign:"top",content:function(e){var a=e.payload;return r.createElement(r.Fragment,null,a.map((function(e,a){var t,n,c,l=(null===(t=e.payload)||void 0===t?void 0:t.name)===o?"":" - ".concat(d(null===(n=e.payload)||void 0===n?void 0:n.percent,{style:"percent"})),i="iframe"===e.payload.name?"website":e.payload.name;return r.createElement("div",{className:"legend",key:"item-".concat(e.payload.source)},r.createElement("div",{className:"bullet-point colors-".concat((null===(c=e.payload)||void 0===c?void 0:c.name)===o?"pink":a%4)}),"".concat(u("".concat(i)),"\n ").concat(l))})))}}),r.createElement(l.Pie,{data:s,cx:80,cy:p,innerRadius:40,outerRadius:48,dataKey:"percentage"},i.map((function(e,a){var t=e.source;return r.createElement(l.Cell,{className:"colors-".concat(a%4),key:"cell-".concat(t)})})))))))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("tslib"),t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-i18next"),c=require("react-intl"),l=require("recharts"),o="affiliates";exports.SourceOfSalesChart=function(e){var i=e.data,s=t.useMemo((function(){return a.__spreadArray(a.__spreadArray([],a.__read(i),!1),[{source:2,name:o}],!1)}),[i.length]),u=n.useTranslation("Design").t,d=c.useIntl().formatNumber,m=a.__read(t.useState(44),2),p=m[0],f=m[1];return t.useEffect((function(){s.length>0&&f(44-22*s.length)}),[s]),r.createElement("div",{className:"source-of-sales"},r.createElement("div",{className:"source-of-sales__header"},u("sourceOfSales")),r.createElement("div",{className:"source-of-sales__pie-chart"},!!i.length&&r.createElement(l.ResponsiveContainer,{debounce:100,width:"100%",height:"100%"},r.createElement(l.PieChart,null,r.createElement(l.Legend,{iconType:"circle",wrapperStyle:{left:170,top:20},layout:"vertical",verticalAlign:"top",content:function(e){var a=e.payload;return r.createElement(r.Fragment,null,a.map((function(e,a){var t,n,c,l=(null===(t=e.payload)||void 0===t?void 0:t.name)===o?"":" - ".concat(d(null===(n=e.payload)||void 0===n?void 0:n.percent,{style:"percent"})),i="iframe"===e.payload.name?"website":e.payload.name;return r.createElement("div",{className:"legend",key:"item-".concat(e.payload.source)},r.createElement("div",{className:"bullet-point colors-".concat((null===(c=e.payload)||void 0===c?void 0:c.name)===o?"pink":a%4)}),"".concat(u("".concat(i)),"\n ").concat(l))})))}}),r.createElement(l.Pie,{data:s,cx:80,cy:p,innerRadius:40,outerRadius:48,dataKey:"percentage"},i.map((function(e,a){var t=e.source;return r.createElement(l.Cell,{className:"colors-".concat(a%4),key:"cell-".concat(t)})})))))))};
package/dist/styles/sales/BookingResults.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  flex-wrap: wrap;
6
6
 
7
7
  .result-card {
8
- height: 11.125rem;
8
+ height: 12.125rem;
9
9
  border: 1px solid $gray-400;
10
10
  max-width: calc(50% - 0.75rem);
11
11
  flex: 0 0 calc(50% - 0.75rem);
@@ -62,6 +62,14 @@
62
62
  font-size: 0.6875rem;
63
63
  }
64
64
  }
65
+
66
+ .products {
67
+ display: inline-block;
68
+ width: 80%;
69
+ white-space: nowrap;
70
+ overflow: hidden;
71
+ text-overflow: ellipsis;
72
+ }
65
73
  }
66
74
 
67
75
  &:hover {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@licklist/design",
3
- "version": "0.44.486-dev.51",
3
+ "version": "0.44.486-dev.53",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
package/src/sales/booking/results/components/ResultCard.tsx CHANGED
@@ -21,7 +21,9 @@ export const ResultCard = ({
21
21
  onCardClick,
22
22
  }: ResultCardProps) => {
23
23
  const { t } = useTranslation("Design");
24
- const { id, people, user, status, startDate } = order;
24
+ const { id, people, user, status, startDate, products } = order;
25
+
26
+ const productList = products.map((product) => product.name)?.join(", ") || "";
25
27
 
26
28
  const onClick = () => {
27
29
  if (!onCardClick) return;
@@ -61,6 +63,9 @@ export const ResultCard = ({
61
63
  <p>
62
64
  {t("time")}: {DateTime.fromISO(startDate).toFormat(TIME_FORMAT)}
63
65
  </p>
66
+ <p className="products" title={productList}>
67
+ {t("products")}: {productList}
68
+ </p>
64
69
  </div>
65
70
  </div>
66
71
  </div>
package/src/sales/source-of-sales/SourceOfSalesChart.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useState, useMemo } from "react";
1
+ import React, { useState, useMemo, useEffect } from "react";
2
2
  import { useTranslation } from "react-i18next";
3
3
  import { useIntl } from "react-intl";
4
4
 
@@ -35,7 +35,8 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
35
35
  name: AFFILIATES,
36
36
  },
37
37
  ],
38
- [data]
38
+ // eslint-disable-next-line react-hooks/exhaustive-deps
39
+ [data.length]
39
40
  );
40
41
  const { t } = useTranslation("Design");
41
42
  const { formatNumber } = useIntl();
@@ -86,32 +87,34 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
86
87
  <div className="source-of-sales">
87
88
  <div className="source-of-sales__header">{t("sourceOfSales")}</div>
88
89
  <div className="source-of-sales__pie-chart">
89
- <ResponsiveContainer width="100%" height="100%">
90
- <PieChart>
91
- <Legend
92
- iconType="circle"
93
- wrapperStyle={{ left: 170, top: 20 }}
94
- layout="vertical"
95
- verticalAlign="top"
96
- content={legendRenderer}
97
- />
98
- <Pie
99
- data={extendedData}
100
- cx={80}
101
- cy={defaultCYPosition}
102
- innerRadius={40}
103
- outerRadius={48}
104
- dataKey="percentage"
105
- >
106
- {data.map(({ source }: PieChartData, index) => (
107
- <Cell
108
- className={`colors-${index % 4}`}
109
- key={`cell-${source}`}
110
- />
111
- ))}
112
- </Pie>
113
- </PieChart>
114
- </ResponsiveContainer>
90
+ {!!data.length && (
91
+ <ResponsiveContainer debounce={100} width="100%" height="100%">
92
+ <PieChart>
93
+ <Legend
94
+ iconType="circle"
95
+ wrapperStyle={{ left: 170, top: 20 }}
96
+ layout="vertical"
97
+ verticalAlign="top"
98
+ content={legendRenderer}
99
+ />
100
+ <Pie
101
+ data={extendedData}
102
+ cx={80}
103
+ cy={defaultCYPosition}
104
+ innerRadius={40}
105
+ outerRadius={48}
106
+ dataKey="percentage"
107
+ >
108
+ {data.map(({ source }: PieChartData, index) => (
109
+ <Cell
110
+ className={`colors-${index % 4}`}
111
+ key={`cell-${source}`}
112
+ />
113
+ ))}
114
+ </Pie>
115
+ </PieChart>
116
+ </ResponsiveContainer>
117
+ )}
115
118
  </div>
116
119
  </div>
117
120
  );
package/src/styles/sales/BookingResults.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  flex-wrap: wrap;
6
6
 
7
7
  .result-card {
8
- height: 11.125rem;
8
+ height: 12.125rem;
9
9
  border: 1px solid $gray-400;
10
10
  max-width: calc(50% - 0.75rem);
11
11
  flex: 0 0 calc(50% - 0.75rem);
@@ -62,6 +62,14 @@
62
62
  font-size: 0.6875rem;
63
63
  }
64
64
  }
65
+
66
+ .products {
67
+ display: inline-block;
68
+ width: 80%;
69
+ white-space: nowrap;
70
+ overflow: hidden;
71
+ text-overflow: ellipsis;
72
+ }
65
73
  }
66
74
 
67
75
  &:hover {