@licklist/design 0.49.0-dev.2 → 0.49.0
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/calendar/Calendar.d.ts +0 -1
- package/dist/calendar/Calendar.d.ts.map +1 -1
- package/dist/calendar/components/CalendarDates/CalendarDates.d.ts +1 -1
- package/dist/calendar/components/CalendarDates/CalendarDates.d.ts.map +1 -1
- package/dist/calendar/components/CalendarDates/CalendarDates.js +1 -1
- package/dist/date-time-button/DateTimeButton.d.ts +2 -3
- package/dist/date-time-button/DateTimeButton.d.ts.map +1 -1
- package/dist/date-time-button/DateTimeButton.js +1 -1
- package/dist/events/event-venue-map/components/Scrollbars/Scrollbars.js +1 -1
- package/dist/iframe/order-process/components/BookingSummary/components/ToggleHeader/ToggleHeader.js +1 -1
- package/dist/iframe/order-process/components/BookingSummaryFooter/BookingSummaryFooter.d.ts +1 -2
- package/dist/iframe/order-process/components/BookingSummaryFooter/BookingSummaryFooter.d.ts.map +1 -1
- package/dist/iframe/order-process/components/BookingSummaryFooter/BookingSummaryFooter.js +1 -1
- package/dist/product-set/product/ProductControl.d.ts.map +1 -1
- package/dist/product-set/product/ProductControl.js +1 -1
- package/dist/product-set/product/duration/ProductDurationControl.d.ts +2 -1
- package/dist/product-set/product/duration/ProductDurationControl.d.ts.map +1 -1
- package/dist/product-set/product/duration/ProductDurationControl.js +1 -1
- package/dist/sales/manual-booking/summary/ManualBookingSummary.d.ts +1 -2
- package/dist/sales/manual-booking/summary/ManualBookingSummary.d.ts.map +1 -1
- package/dist/sales/manual-booking/summary/ManualBookingSummary.js +1 -1
- package/dist/static/date-range-input/DateRangeInput.d.ts.map +1 -1
- package/dist/static/date-range-input/DateRangeInput.js +1 -1
- package/dist/static/switch/BooleanSwitch.d.ts +1 -3
- package/dist/static/switch/BooleanSwitch.d.ts.map +1 -1
- package/dist/static/switch/BooleanSwitch.js +1 -1
- package/dist/styles/resources-blocking/_index.scss +0 -6
- package/dist/styles/sales/BookingFilter.scss +1 -21
- package/dist/styles/sales/BookingResults.scss +1 -1
- package/dist/styles/sales/BookingTabs.scss +5 -63
- package/dist/styles/sales/LifeTimeSales.scss +0 -1
- package/dist/styles/sales/ManualBooking.scss +2 -56
- package/dist/styles/sales/SourceOfSales.scss +0 -3
- package/dist/styles/static/Switch.scss +0 -1
- package/dist/styles/static/Tabs.scss +0 -6
- package/dist/table/TableHelperComponent.d.ts +1 -2
- package/dist/table/TableHelperComponent.d.ts.map +1 -1
- package/dist/table/TableHelperComponent.js +1 -1
- package/package.json +3 -3
- package/src/calendar/Calendar.tsx +0 -1
- package/src/calendar/components/CalendarDates/CalendarDates.tsx +0 -2
- package/src/date-time-button/DateTimeButton.tsx +3 -16
- package/src/iframe/order-process/components/BookingSummaryFooter/BookingSummaryFooter.tsx +3 -16
- package/src/product-set/product/ProductControl.tsx +4 -1
- package/src/product-set/product/duration/ProductDurationControl.tsx +9 -10
- package/src/sales/manual-booking/summary/ManualBookingSummary.tsx +1 -9
- package/src/static/date-range-input/DateRangeInput.tsx +2 -23
- package/src/static/switch/BooleanSwitch.tsx +2 -6
- package/src/styles/resources-blocking/_index.scss +0 -6
- package/src/styles/sales/BookingFilter.scss +1 -21
- package/src/styles/sales/BookingResults.scss +1 -1
- package/src/styles/sales/BookingTabs.scss +5 -63
- package/src/styles/sales/LifeTimeSales.scss +0 -1
- package/src/styles/sales/ManualBooking.scss +2 -56
- package/src/styles/sales/SourceOfSales.scss +0 -3
- package/src/styles/static/Switch.scss +0 -1
- package/src/styles/static/Tabs.scss +0 -6
- package/src/table/TableHelperComponent.tsx +18 -73
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
|
|
3
3
|
import ITableHeader from "@licklist/plugins/dist/types/services/Table/ITableHeader";
|
|
4
4
|
import ITableProps from "@licklist/plugins/dist/types/services/Table/ITableProps";
|
|
@@ -18,7 +18,6 @@ export interface TableHelperComponentProps {
|
|
|
18
18
|
[key: string]: any;
|
|
19
19
|
};
|
|
20
20
|
initialOptions?: Partial<ITableProps>;
|
|
21
|
-
filteredOrdersOptions?: (value: SetStateAction<ITableProps>) => void;
|
|
22
21
|
}
|
|
23
22
|
/**
|
|
24
23
|
* TableHelperComponent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHelperComponent.d.ts","sourceRoot":"","sources":["../../src/table/TableHelperComponent.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableHelperComponent.d.ts","sourceRoot":"","sources":["../../src/table/TableHelperComponent.tsx"],"names":[],"mappings":";AAQA,OAAO,qBAAqB,MAAM,mEAAmE,CAAC;AACtG,OAAO,YAAY,MAAM,0DAA0D,CAAC;AACpF,OAAO,WAAW,MAAM,yDAAyD,CAAC;AAQlF,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,YAAY,EAAE,QAAQ,CAAC;IACvB,SAAS,CAAC,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CACvC;AAUD;;;;;;GAMG;AACH,iBAAS,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAsP7D;AAED,OAAO,EAAE,oBAAoB,EAAE,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=require("tslib"),r=require("react"),n=e(r),i=require("react-router-dom"),a=e(require("@licklist/plugins/dist/services/Route/RouteService")),o=require("../static/loader/LoaderIndicator.js"),
|
|
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=require("tslib"),r=require("react"),n=e(r),i=require("react-router-dom"),a=e(require("@licklist/plugins/dist/services/Route/RouteService")),o=require("../static/loader/LoaderIndicator.js"),l=require("react-bootstrap"),s=e(require("@licklist/plugins/dist/hooks/Query/useQuery")),u=require("lodash"),c=require("./FilterHelperComponent.js"),p=require("./PaginationHelperComponent.js"),d=e(require("@licklist/plugins/dist/services/Table/TableService")),g=require("./PerPageHelperComponent.js"),f=require("./utils/index.js");exports.TableHelperComponent=function(e){var _,m,v=e.paginator,E=e.headers,y=e.renderItemFn,S=e.isLoading,h=e.onRefreshFn,C=e.refreshAt,P=e.striped,b=void 0===P||P,q=e.bordered,F=void 0===q||q,j=e.displaySearchBar,D=void 0===j||j,k=e.displayPerPageSelect,L=void 0===k||k,w=e.displayShowingSection,H=void 0===w||w,O=e.externalFilters,R=void 0===O?{}:O,T=e.initialOptions,N=void 0===T?{}:T,V=s(),K=i.useLocation().pathname,I=Number(f.getFilterOptionsValue(V,N,"page")),x=Number(f.getFilterOptionsValue(V,N,"perPage")),A=String(f.getFilterOptionsValue(V,N,"sortKey")),U=String(f.getFilterOptionsValue(V,N,"sortDirection")),Q=String(f.getFilterOptionsValue(V,N,"filter")),B=t.__read(r.useState(),2),G=B[0],M=B[1],z=t.__read(r.useState({page:I,perPage:x,sortKey:A,sortDirection:U,filter:Q}),2),J=z[0],W=z[1],X=t.__read(r.useState(0),2),Y=X[0],Z=X[1],$=t.__read(r.useState(R),2),ee=$[0],te=$[1];r.useEffect((function(){u.isEqual(G,J)&&u.isEqual(ee,R)||(M(J),te(R),h&&h(J),a.redirectTo([K,["page=".concat(J.page),"perPage=".concat(J.perPage),"sortKey=".concat(escape(J.sortKey)),"sortDirection=".concat(escape(J.sortDirection)),"filter=".concat(escape(J.filter)),new URLSearchParams(R).toString()].join("&")].join("?")))}),[K,J,h,R]),r.useEffect((function(){Y!==C&&(Z((function(e){return null!=C?C:e})),h&&h(J))}),[h,J,C,Y]);var re=function(e){var r,i;if("string"==typeof e)return n.createElement("th",{key:e.toLowerCase(),className:d.getHeaderClasses(e,A,U)},e);if("object"==typeof e){var a={width:null!==(r=e.width)&&void 0!==r?r:"auto"};return n.createElement("th",{key:null!==(i=e.key)&&void 0!==i?i:e.title.toLowerCase(),className:d.getHeaderClasses(e,A,U),style:a,onClick:function(){return e.isSortable&&(r=e.key,n=d.DEFAULT_SORT_DIRECTION,void W(A===r?function(e){return n=d.getSortDirection(e.sortDirection,n),t.__assign(t.__assign({},e),{sortKey:r,sortDirection:n})}:function(e){return t.__assign(t.__assign({},e),{sortKey:r,sortDirection:n})}));var r,n}},e.title)}return null};return n.createElement("div",{className:["table-helper",S?"py-5":"py-1"].join(" ")},n.createElement(o.LoaderIndicator,{isLoaded:!S},n.createElement(l.Row,null,n.createElement(l.Col,null,L&&n.createElement(g.PerPageHelperComponent,{onChangeFn:function(e){W((function(r){return t.__assign(t.__assign({},r),{perPage:e})}))},defaultValue:null!==(_=null==v?void 0:v.per_page)&&void 0!==_?_:d.DEFAULT_PER_PAGE})),n.createElement(l.Col,null,D&&n.createElement(c.FilterHelperComponent,{onClickFn:function(e){W((function(r){var n=r.page,i=t.__rest(r,["page"]),a=n;return(!e&&i.filter||e&&!i.filter)&&(a=1),t.__assign(t.__assign({},i),{page:a,filter:e})}))},defaultValue:null!==(m=J.filter)&&void 0!==m?m:""}))),n.createElement(l.Row,null,n.createElement(l.Col,null,n.createElement("div",{className:"table-responsive"},n.createElement(l.Table,{striped:b,bordered:F,hover:!0},n.createElement("thead",null,n.createElement("tr",null,E.map((function(e){return re(e)})))),n.createElement("tbody",null,v?v.data.map((function(e,t){return y(e,t)})):null))))),n.createElement(p.PaginationHelperComponent,{displayShowingSection:H,paginator:v,onPageChangeFn:function(e){W((function(r){return t.__assign(t.__assign({},r),{page:e})}))}})))};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@licklist/design",
|
|
3
|
-
"version": "0.49.0
|
|
3
|
+
"version": "0.49.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
|
|
@@ -53,9 +53,9 @@
|
|
|
53
53
|
"@fortawesome/free-brands-svg-icons": "5.15.2",
|
|
54
54
|
"@fortawesome/free-solid-svg-icons": "5.15.2",
|
|
55
55
|
"@fortawesome/react-fontawesome": "0.1.9",
|
|
56
|
-
"@licklist/core": "
|
|
56
|
+
"@licklist/core": "^0.17.0",
|
|
57
57
|
"@licklist/eslint-config": "0.3.4",
|
|
58
|
-
"@licklist/plugins": "
|
|
58
|
+
"@licklist/plugins": "^0.23.0",
|
|
59
59
|
"@mdx-js/react": "1.6.22",
|
|
60
60
|
"@popperjs/core": "2.11.8",
|
|
61
61
|
"@react-aria/utils": "3.9.0",
|
|
@@ -19,7 +19,6 @@ export const CalendarDates = ({
|
|
|
19
19
|
fromPrice,
|
|
20
20
|
getAvailability,
|
|
21
21
|
includeAvailability,
|
|
22
|
-
shouldCalculateResources,
|
|
23
22
|
}: CalendarDatesProps) => {
|
|
24
23
|
const fillCalendarDates = useMemo(() => {
|
|
25
24
|
let firstDayOfWeek = calendarDates[0]?.weekday ?? 0;
|
|
@@ -61,7 +60,6 @@ export const CalendarDates = ({
|
|
|
61
60
|
resources={getAvailability?.(date)}
|
|
62
61
|
showResources={includeAvailability}
|
|
63
62
|
variant={Variant.month}
|
|
64
|
-
shouldCalculateResources={shouldCalculateResources}
|
|
65
63
|
/>
|
|
66
64
|
);
|
|
67
65
|
})}
|
|
@@ -2,7 +2,6 @@ import React, { ReactElement } from "react";
|
|
|
2
2
|
import clsx from "clsx";
|
|
3
3
|
import { DateTime } from "luxon";
|
|
4
4
|
import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
|
|
5
|
-
import { has } from "lodash";
|
|
6
5
|
import { AvailabilityIndicator } from "../availability-indicator";
|
|
7
6
|
import { DateContent } from "./DateContent";
|
|
8
7
|
|
|
@@ -19,9 +18,8 @@ export type DateTimeButtonProps = {
|
|
|
19
18
|
isSoldOut?: boolean;
|
|
20
19
|
onSelect: (date: DateTime) => void;
|
|
21
20
|
price?: string | number | ReactElement | null;
|
|
22
|
-
resources
|
|
21
|
+
resources?: ZoneResourcesAvailability | null;
|
|
23
22
|
showResources?: boolean;
|
|
24
|
-
shouldCalculateResources?: boolean;
|
|
25
23
|
variant: Variant;
|
|
26
24
|
};
|
|
27
25
|
|
|
@@ -34,28 +32,17 @@ export const DateTimeButton = ({
|
|
|
34
32
|
price,
|
|
35
33
|
resources,
|
|
36
34
|
showResources,
|
|
37
|
-
shouldCalculateResources = true,
|
|
38
35
|
variant = Variant.week,
|
|
39
36
|
}: DateTimeButtonProps) => {
|
|
40
37
|
const isSoldOut =
|
|
41
38
|
_isSoldOut ||
|
|
42
|
-
|
|
43
|
-
(shouldCalculateResources &&
|
|
44
|
-
resources &&
|
|
45
|
-
resources.bookedResources >= resources.totalResources);
|
|
39
|
+
(resources && resources.bookedResources >= resources.totalResources);
|
|
46
40
|
|
|
47
41
|
const isTimeVariant = variant === Variant.time;
|
|
48
42
|
|
|
49
43
|
const isTimeInPast = isTimeVariant && isDateInPast(date);
|
|
50
44
|
|
|
51
|
-
const
|
|
52
|
-
shouldCalculateResources &&
|
|
53
|
-
// only consider resources if shouldCalculateResources is true
|
|
54
|
-
(!resources ||
|
|
55
|
-
!has(resources, "bookedResources") ||
|
|
56
|
-
!has(resources, "totalResources"));
|
|
57
|
-
|
|
58
|
-
const isDisabled = _isDisabled || isSoldOut || isTimeInPast || noResources;
|
|
45
|
+
const isDisabled = _isDisabled || isSoldOut || isTimeInPast;
|
|
59
46
|
|
|
60
47
|
return (
|
|
61
48
|
<button
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { ReactNode, PropsWithChildren } from "react";
|
|
2
2
|
import { useTranslation } from "react-i18next";
|
|
3
3
|
import Button from "react-bootstrap/Button";
|
|
4
|
-
import { Spinner } from "react-bootstrap";
|
|
5
4
|
import { STEP_FORM_ID } from "../../constants";
|
|
6
5
|
|
|
7
6
|
type ButtonPropsWithoutOnClick = {
|
|
@@ -19,41 +18,29 @@ type FooterProps = Partial<
|
|
|
19
18
|
disabled?: boolean;
|
|
20
19
|
buttonLabel?: ReactNode;
|
|
21
20
|
showButton?: boolean;
|
|
22
|
-
isLoading: boolean;
|
|
23
21
|
} & (ButtonPropsWithoutOnClick | ButtonPropsWithOnClick)
|
|
24
22
|
>;
|
|
25
23
|
|
|
26
24
|
export type BookingSummaryFooterProps = PropsWithChildren<FooterProps>;
|
|
27
25
|
|
|
28
26
|
export const BookingSummaryFooter = ({
|
|
29
|
-
disabled
|
|
27
|
+
disabled = false,
|
|
30
28
|
onClick,
|
|
31
29
|
buttonLabel,
|
|
32
30
|
form = STEP_FORM_ID,
|
|
33
31
|
children,
|
|
34
32
|
showButton = true,
|
|
35
|
-
isLoading = false,
|
|
36
33
|
}: BookingSummaryFooterProps) => {
|
|
37
34
|
const { t } = useTranslation("Design");
|
|
38
35
|
|
|
39
36
|
const buttonProps = onClick ? { onClick } : { type: "submit", form };
|
|
40
37
|
|
|
41
|
-
const disabled = _disabled || isLoading;
|
|
42
|
-
|
|
43
38
|
return (
|
|
44
39
|
<div className="d-flex flex-column">
|
|
45
40
|
{children}
|
|
46
41
|
{showButton && (
|
|
47
|
-
<Button
|
|
48
|
-
|
|
49
|
-
disabled={disabled}
|
|
50
|
-
{...buttonProps}
|
|
51
|
-
>
|
|
52
|
-
{isLoading ? (
|
|
53
|
-
<Spinner animation="border" size="sm" role="status" />
|
|
54
|
-
) : (
|
|
55
|
-
buttonLabel ?? t("continue")
|
|
56
|
-
)}
|
|
42
|
+
<Button className="m-0 mt-3" disabled={disabled} {...buttonProps}>
|
|
43
|
+
{buttonLabel ?? t("continue")}
|
|
57
44
|
</Button>
|
|
58
45
|
)}
|
|
59
46
|
</div>
|
|
@@ -140,7 +140,9 @@ export function ProductControl<T extends FormValues>({
|
|
|
140
140
|
clearErrors,
|
|
141
141
|
} = useFormContext<T>();
|
|
142
142
|
|
|
143
|
-
const { setLoading } = useContext(
|
|
143
|
+
const { setLoading, providerHasBookingManagement } = useContext(
|
|
144
|
+
ProductSetLoadingContext
|
|
145
|
+
);
|
|
144
146
|
const { t } = useTranslation(["Design", "Validation"]);
|
|
145
147
|
const [expanded, setExpanded] = useState(false);
|
|
146
148
|
const [initialImages, setInitialImages] = useState<Image[] | null>(null);
|
|
@@ -392,6 +394,7 @@ export function ProductControl<T extends FormValues>({
|
|
|
392
394
|
<Row className="align-items-start duration-capacity-container">
|
|
393
395
|
<ProductDurationControl
|
|
394
396
|
fieldNamePrefix={fieldNamePrefix}
|
|
397
|
+
providerHasBookingManagement={providerHasBookingManagement}
|
|
395
398
|
disabled={disabledDuration}
|
|
396
399
|
/>
|
|
397
400
|
|
|
@@ -8,11 +8,13 @@ import { useTranslation } from "react-i18next";
|
|
|
8
8
|
import { ReactComponent as IncrementIcon } from "../../../assets/dashboard/increment.svg";
|
|
9
9
|
|
|
10
10
|
export interface ProductDurationControlProps<T> extends FieldNamePrefixPath<T> {
|
|
11
|
+
providerHasBookingManagement: boolean;
|
|
11
12
|
disabled: boolean;
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
export const ProductDurationControl = <T,>({
|
|
15
16
|
fieldNamePrefix,
|
|
17
|
+
providerHasBookingManagement,
|
|
16
18
|
disabled,
|
|
17
19
|
}: ProductDurationControlProps<T>) => {
|
|
18
20
|
const { t } = useTranslation("Design");
|
|
@@ -57,21 +59,18 @@ export const ProductDurationControl = <T,>({
|
|
|
57
59
|
control={control}
|
|
58
60
|
name={fieldName}
|
|
59
61
|
rules={{
|
|
62
|
+
required: {
|
|
63
|
+
value: Boolean(providerHasBookingManagement),
|
|
64
|
+
message: t("Validation:fieldRequired", {
|
|
65
|
+
attribute: t("duration"),
|
|
66
|
+
}),
|
|
67
|
+
},
|
|
60
68
|
min: {
|
|
61
|
-
value:
|
|
69
|
+
value: 1,
|
|
62
70
|
message: t("Validation:fieldMinNumber", {
|
|
63
71
|
attribute: t("duration"),
|
|
64
|
-
min: 0,
|
|
65
72
|
}),
|
|
66
73
|
},
|
|
67
|
-
validate: (val) => {
|
|
68
|
-
if (!disabled && (!val || val < 1)) {
|
|
69
|
-
return t("Validation:fieldRequired", {
|
|
70
|
-
attribute: t("duration"),
|
|
71
|
-
}) as string;
|
|
72
|
-
}
|
|
73
|
-
return true;
|
|
74
|
-
},
|
|
75
74
|
}}
|
|
76
75
|
render={({ field }) => (
|
|
77
76
|
<>
|
|
@@ -24,7 +24,6 @@ export interface ManualBookingSummaryProps {
|
|
|
24
24
|
isFeeFetching: boolean;
|
|
25
25
|
orderDate: string;
|
|
26
26
|
relyOnPeopleType?: RelyOnPeopleType | null;
|
|
27
|
-
isMobileView?: boolean;
|
|
28
27
|
}
|
|
29
28
|
|
|
30
29
|
export const ManualBookingSummary = ({
|
|
@@ -36,7 +35,6 @@ export const ManualBookingSummary = ({
|
|
|
36
35
|
orderDate,
|
|
37
36
|
relyOnPeopleType,
|
|
38
37
|
hasBookingCategory,
|
|
39
|
-
isMobileView,
|
|
40
38
|
}: ManualBookingSummaryProps) => {
|
|
41
39
|
const { t } = useTranslation(["Design", "Sale"]);
|
|
42
40
|
const { formatNumber } = useIntl();
|
|
@@ -46,13 +44,7 @@ export const ManualBookingSummary = ({
|
|
|
46
44
|
const date = currentDate.toFormat(DATE_TIME_MANUAL_BOOKING_FORMAT);
|
|
47
45
|
const time = currentDate.toFormat(TIME_FORMAT);
|
|
48
46
|
return (
|
|
49
|
-
<div
|
|
50
|
-
className={
|
|
51
|
-
isMobileView
|
|
52
|
-
? "manual-booking-summary-mobile"
|
|
53
|
-
: "manual-booking-summary"
|
|
54
|
-
}
|
|
55
|
-
>
|
|
47
|
+
<div className="manual-booking-summary">
|
|
56
48
|
<div className="receipt-title">{t("Sale:receipt")}</div>
|
|
57
49
|
<div className="event-name border-summary-item">{eventName}</div>
|
|
58
50
|
<div className="border-summary-item">{date}</div>
|
|
@@ -11,13 +11,10 @@ import {
|
|
|
11
11
|
rangeDatesToStringDates,
|
|
12
12
|
stringDatesToInputValue,
|
|
13
13
|
} from "./utils";
|
|
14
|
-
import { MOBILE_WIDTH } from "../../iframe/order-process/components/BookingSummary/types";
|
|
15
14
|
|
|
16
15
|
import "react-date-range/dist/styles.css";
|
|
17
16
|
import "react-date-range/dist/theme/default.css";
|
|
18
17
|
|
|
19
|
-
type DateRangeDirection = "vertical" | "horizontal";
|
|
20
|
-
|
|
21
18
|
type DateRangeInputProps = {
|
|
22
19
|
placeholder: string;
|
|
23
20
|
startDate?: string;
|
|
@@ -36,7 +33,7 @@ export const DateRangeInput = ({
|
|
|
36
33
|
disabled,
|
|
37
34
|
}: DateRangeInputProps) => {
|
|
38
35
|
const { t } = useTranslation("Design");
|
|
39
|
-
|
|
36
|
+
|
|
40
37
|
const [state, setState] = useState<Range[]>([
|
|
41
38
|
{
|
|
42
39
|
startDate: new Date(),
|
|
@@ -85,24 +82,6 @@ export const DateRangeInput = ({
|
|
|
85
82
|
}
|
|
86
83
|
}, [startDate, endDate]);
|
|
87
84
|
|
|
88
|
-
useEffect(() => {
|
|
89
|
-
const resizeBodyInMobile = () => {
|
|
90
|
-
if (window.innerWidth > MOBILE_WIDTH) {
|
|
91
|
-
setDirection("horizontal");
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
setDirection("vertical");
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
resizeBodyInMobile();
|
|
99
|
-
window.addEventListener("resize", resizeBodyInMobile);
|
|
100
|
-
|
|
101
|
-
return () => {
|
|
102
|
-
window.removeEventListener("resize", resizeBodyInMobile);
|
|
103
|
-
};
|
|
104
|
-
}, []);
|
|
105
|
-
|
|
106
85
|
return (
|
|
107
86
|
<div>
|
|
108
87
|
<OverlayTrigger
|
|
@@ -115,7 +94,7 @@ export const DateRangeInput = ({
|
|
|
115
94
|
moveRangeOnFirstSelection={false}
|
|
116
95
|
ranges={state}
|
|
117
96
|
months={months}
|
|
118
|
-
direction=
|
|
97
|
+
direction="horizontal"
|
|
119
98
|
/>
|
|
120
99
|
<div className="mt-3 d-flex justify-content-end">
|
|
121
100
|
<Button onClick={onReset} variant="link">
|
|
@@ -8,8 +8,6 @@ export interface BooleanSwitchProps {
|
|
|
8
8
|
value?: boolean;
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
onChange: (value: boolean) => void;
|
|
11
|
-
firstValueTitle?: string;
|
|
12
|
-
secondValueTitle?: string;
|
|
13
11
|
}
|
|
14
12
|
|
|
15
13
|
export function BooleanSwitch({
|
|
@@ -17,14 +15,12 @@ export function BooleanSwitch({
|
|
|
17
15
|
value,
|
|
18
16
|
disabled,
|
|
19
17
|
onChange,
|
|
20
|
-
firstValueTitle,
|
|
21
|
-
secondValueTitle,
|
|
22
18
|
}: BooleanSwitchProps) {
|
|
23
19
|
const { t } = useTranslation("Design");
|
|
24
20
|
|
|
25
21
|
const options: SelectItem[] = [
|
|
26
|
-
{ id: 1, value:
|
|
27
|
-
{ id: 0, value:
|
|
22
|
+
{ id: 1, value: t("yes") },
|
|
23
|
+
{ id: 0, value: t("no") },
|
|
28
24
|
];
|
|
29
25
|
|
|
30
26
|
const handleChange = useCallback(
|
|
@@ -157,19 +157,6 @@
|
|
|
157
157
|
margin-bottom: 0;
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
|
-
|
|
161
|
-
.apply-container{
|
|
162
|
-
display: flex;
|
|
163
|
-
justify-content: space-around;
|
|
164
|
-
column-gap: 2rem;
|
|
165
|
-
margin-left: 3rem;
|
|
166
|
-
|
|
167
|
-
@include media-breakpoint-down(sm) {
|
|
168
|
-
flex-direction: row;
|
|
169
|
-
margin-left: 0rem;
|
|
170
|
-
column-gap: 1rem;
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
160
|
}
|
|
174
161
|
|
|
175
162
|
.additional-filter-container {
|
|
@@ -177,12 +164,10 @@
|
|
|
177
164
|
|
|
178
165
|
@include media-breakpoint-down(md) {
|
|
179
166
|
flex-wrap: wrap;
|
|
180
|
-
|
|
181
167
|
.date-container {
|
|
182
168
|
width: 100%;
|
|
183
169
|
flex: 1;
|
|
184
170
|
}
|
|
185
|
-
|
|
186
171
|
.btn-primary {
|
|
187
172
|
margin-top: 1rem;
|
|
188
173
|
}
|
|
@@ -243,11 +228,6 @@
|
|
|
243
228
|
transform: rotate(45deg);
|
|
244
229
|
}
|
|
245
230
|
}
|
|
246
|
-
|
|
247
|
-
@include media-breakpoint-down(sm) {
|
|
248
|
-
flex-direction: column;
|
|
249
|
-
justify-content: flex-start;
|
|
250
|
-
}
|
|
251
231
|
}
|
|
252
232
|
}
|
|
253
|
-
}
|
|
233
|
+
}
|
|
@@ -1,49 +1,24 @@
|
|
|
1
1
|
.booking-tabs-pane {
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: row;
|
|
4
|
-
justify-content: space-between;
|
|
5
4
|
align-items: center;
|
|
6
5
|
height: 2.75rem;
|
|
7
6
|
background-color: $white;
|
|
8
7
|
|
|
9
8
|
.booking-tabs {
|
|
10
9
|
svg {
|
|
11
|
-
g>rect:first-child {
|
|
12
|
-
fill: $white;
|
|
10
|
+
g > rect:first-child {
|
|
11
|
+
fill: $white;
|
|
13
12
|
}
|
|
14
13
|
}
|
|
15
|
-
|
|
14
|
+
|
|
16
15
|
.active {
|
|
17
16
|
svg {
|
|
18
|
-
g>rect:first-child {
|
|
19
|
-
fill: $blue;
|
|
17
|
+
g > rect:first-child {
|
|
18
|
+
fill: $blue;
|
|
20
19
|
}
|
|
21
20
|
}
|
|
22
21
|
}
|
|
23
|
-
|
|
24
|
-
@include media-breakpoint-down(sm) {
|
|
25
|
-
width: 4rem;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.content {
|
|
30
|
-
display: flex;
|
|
31
|
-
justify-content: space-between;
|
|
32
|
-
width: 90%;
|
|
33
|
-
flex-direction: row;
|
|
34
|
-
|
|
35
|
-
@include media-breakpoint-down(sm) {
|
|
36
|
-
display: flex;
|
|
37
|
-
flex-direction: column;
|
|
38
|
-
align-items: start;
|
|
39
|
-
height: 4rem;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.booking {
|
|
43
|
-
@include media-breakpoint-down(sm) {
|
|
44
|
-
height: 13rem;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
22
|
}
|
|
48
23
|
|
|
49
24
|
.separator {
|
|
@@ -54,12 +29,6 @@
|
|
|
54
29
|
.children {
|
|
55
30
|
flex: 1;
|
|
56
31
|
margin-left: 1rem;
|
|
57
|
-
|
|
58
|
-
@include media-breakpoint-down(sm) {
|
|
59
|
-
display: flex;
|
|
60
|
-
flex-direction: column;
|
|
61
|
-
align-items: start;
|
|
62
|
-
}
|
|
63
32
|
}
|
|
64
33
|
|
|
65
34
|
.buttons {
|
|
@@ -92,33 +61,6 @@
|
|
|
92
61
|
border-radius: 0.625rem;
|
|
93
62
|
margin-right: 0.5rem;
|
|
94
63
|
}
|
|
95
|
-
@include media-breakpoint-down(sm) {
|
|
96
|
-
width: 12.5rem;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
@include media-breakpoint-down(sm) {
|
|
102
|
-
display: flex;
|
|
103
|
-
flex-direction: column;
|
|
104
|
-
align-items: start;
|
|
105
|
-
gap: .5rem;
|
|
106
|
-
margin-top: .5rem;
|
|
107
|
-
white-space: nowrap;
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
@include media-breakpoint-down(sm) {
|
|
112
|
-
display: flex;
|
|
113
|
-
align-items: start;
|
|
114
|
-
gap: 1rem;
|
|
115
|
-
margin-top: 1rem;
|
|
116
|
-
height: 100%;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.booking {
|
|
120
|
-
@include media-breakpoint-down(sm) {
|
|
121
|
-
height: 13rem;
|
|
122
64
|
}
|
|
123
65
|
}
|
|
124
66
|
}
|
|
@@ -361,11 +361,10 @@
|
|
|
361
361
|
width: inherit;
|
|
362
362
|
|
|
363
363
|
@include media-breakpoint-down(sm) {
|
|
364
|
-
|
|
364
|
+
padding: 0 0.5rem;
|
|
365
|
+
padding-top: 2rem;
|
|
365
366
|
}
|
|
366
367
|
|
|
367
|
-
|
|
368
|
-
|
|
369
368
|
.form-control {
|
|
370
369
|
margin-bottom: 1.5rem;
|
|
371
370
|
}
|
|
@@ -412,59 +411,6 @@
|
|
|
412
411
|
}
|
|
413
412
|
}
|
|
414
413
|
|
|
415
|
-
.manual-booking-summary-mobile {
|
|
416
|
-
padding: 0 1.5rem;
|
|
417
|
-
padding-top: 2rem;
|
|
418
|
-
height: max-content;
|
|
419
|
-
margin-bottom: 1.5rem;
|
|
420
|
-
width: inherit;
|
|
421
|
-
|
|
422
|
-
.form-control {
|
|
423
|
-
margin-bottom: .5rem;
|
|
424
|
-
}
|
|
425
|
-
.receipt-title {
|
|
426
|
-
font-size: 1.125rem;
|
|
427
|
-
font-weight: 600;
|
|
428
|
-
padding-bottom: 0.4rem;
|
|
429
|
-
margin-bottom: 1rem;
|
|
430
|
-
border-bottom: 2px solid $gray-400;
|
|
431
|
-
}
|
|
432
|
-
.event-name {
|
|
433
|
-
font-size: 0.94rem;
|
|
434
|
-
font-weight: 600;
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
.border-summary-item {
|
|
438
|
-
padding-bottom: 0.9rem;
|
|
439
|
-
margin-bottom: 1%;
|
|
440
|
-
border-bottom: 2px solid $gray-100;
|
|
441
|
-
flex-wrap: wrap;
|
|
442
|
-
}
|
|
443
|
-
|
|
444
|
-
.total-container {
|
|
445
|
-
display: flex;
|
|
446
|
-
justify-content: space-between;
|
|
447
|
-
font-size: 1rem;
|
|
448
|
-
font-weight: 600;
|
|
449
|
-
|
|
450
|
-
@include media-breakpoint-down(lg) {
|
|
451
|
-
flex-wrap: wrap;
|
|
452
|
-
}
|
|
453
|
-
.total-amount {
|
|
454
|
-
padding-left: 1rem;
|
|
455
|
-
@include media-breakpoint-down(lg) {
|
|
456
|
-
padding-left: 0;
|
|
457
|
-
}
|
|
458
|
-
}
|
|
459
|
-
}
|
|
460
|
-
|
|
461
|
-
.summary-item-container {
|
|
462
|
-
.border-summary-item:nth-last-child(2) {
|
|
463
|
-
border-bottom: 2px solid $gray-400;
|
|
464
|
-
}
|
|
465
|
-
}
|
|
466
|
-
}
|
|
467
|
-
|
|
468
414
|
.menu-list-manual-booking {
|
|
469
415
|
display: flex;
|
|
470
416
|
align-items: center;
|
|
@@ -27,7 +27,6 @@ $btn-switch-option-padding-y: calc(#{$btn-padding-y} - #{sp(1)}) !default;
|
|
|
27
27
|
border-radius: $btn-switch-option-border-radius;
|
|
28
28
|
margin: 0;
|
|
29
29
|
padding: $btn-switch-option-padding-y $btn-switch-option-padding-x;
|
|
30
|
-
min-width: 4.25rem;
|
|
31
30
|
|
|
32
31
|
&:hover,
|
|
33
32
|
&:active,
|
|
@@ -11,12 +11,6 @@ $tab-nav-link-active-border-bottom: 1px solid $tab-nav-link-active-color !defaul
|
|
|
11
11
|
margin-left: -1.25rem;
|
|
12
12
|
border-bottom: 1px solid $nav-tabs-border-color;
|
|
13
13
|
|
|
14
|
-
@include media-breakpoint-down(sm) {
|
|
15
|
-
display: flex;
|
|
16
|
-
flex-direction: column;
|
|
17
|
-
white-space: nowrap;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
14
|
.nav-link {
|
|
21
15
|
color: $tab-nav-link-color;
|
|
22
16
|
background-color: transparent;
|