@licklist/design 0.44.533 → 0.44.534

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 (112) hide show
  1. package/dist/events/edit-event-modal/utils/getDefaultProductSet.d.ts.map +1 -1
  2. package/dist/events/edit-event-modal/utils/getDefaultProductSet.js +1 -1
  3. package/dist/iframe/event/index.d.ts +0 -1
  4. package/dist/iframe/event/index.d.ts.map +1 -1
  5. package/dist/iframe/index.d.ts +1 -1
  6. package/dist/iframe/index.d.ts.map +1 -1
  7. package/dist/iframe/order-process/components/BookingSummary/BookingSummary.d.ts +1 -1
  8. package/dist/iframe/order-process/components/BookingSummary/BookingSummary.js +1 -1
  9. package/dist/iframe/order-process/components/BookingSummary/types/index.d.ts +1 -1
  10. package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.d.ts +1 -0
  11. package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.d.ts.map +1 -1
  12. package/dist/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.js +1 -1
  13. package/dist/index.d.ts +1 -0
  14. package/dist/index.d.ts.map +1 -1
  15. package/dist/index.js +1 -1
  16. package/dist/number-of-people-input/NumberOfPeopleInput.d.ts.map +1 -0
  17. package/dist/number-of-people-input/NumberOfPeopleInput.js +1 -0
  18. package/dist/{iframe/event/event-details/components/number-of-people-input/component → number-of-people-input/components}/RenderNumberOfPeopleInputComponent.d.ts +2 -3
  19. package/dist/number-of-people-input/components/RenderNumberOfPeopleInputComponent.d.ts.map +1 -0
  20. package/dist/number-of-people-input/components/RenderNumberOfPeopleInputComponent.js +1 -0
  21. package/dist/number-of-people-input/components/index.d.ts +2 -0
  22. package/dist/number-of-people-input/components/index.d.ts.map +1 -0
  23. package/dist/number-of-people-input/index.d.ts +3 -0
  24. package/dist/number-of-people-input/index.d.ts.map +1 -0
  25. package/dist/product-set/control/ProductSetControl.d.ts +2 -1
  26. package/dist/product-set/control/ProductSetControl.d.ts.map +1 -1
  27. package/dist/product-set/control/ProductSetControl.js +1 -1
  28. package/dist/product-set/form/ProductCategoriesControl.d.ts.map +1 -1
  29. package/dist/product-set/form/ProductCategoriesControl.js +1 -1
  30. package/dist/product-set/product-category/ProductCategoryControl.d.ts +0 -1
  31. package/dist/product-set/product-category/ProductCategoryControl.d.ts.map +1 -1
  32. package/dist/product-set/product-category/ProductCategoryControl.js +1 -1
  33. package/dist/sales/manual-booking/summary/ManualBookingSummary.d.ts +3 -1
  34. package/dist/sales/manual-booking/summary/ManualBookingSummary.d.ts.map +1 -1
  35. package/dist/sales/manual-booking/summary/ManualBookingSummary.js +1 -1
  36. package/dist/snippet/snippet-template/preview/Preview.js +1 -1
  37. package/dist/types/iframe.d.ts +1 -0
  38. package/dist/types/iframe.d.ts.map +1 -1
  39. package/package.json +1 -1
  40. package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.stories.tsx +0 -9
  41. package/src/events/edit-event-modal/utils/getDefaultProductSet.ts +2 -1
  42. package/src/iframe/event/event-venue-map/IframeEventVenueMap.stories.tsx +0 -1
  43. package/src/iframe/event/index.ts +0 -1
  44. package/src/iframe/index.ts +0 -1
  45. package/src/iframe/order-process/components/BookingSummary/BookingSummary.tsx +2 -2
  46. package/src/iframe/order-process/components/BookingSummary/types/index.ts +1 -1
  47. package/src/iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.stories.tsx +0 -1
  48. package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx +5 -0
  49. package/src/iframe/payment/payment-page/PaymentPage.stories.tsx +1 -1
  50. package/src/index.ts +1 -0
  51. package/src/{iframe/event/event-details/components/number-of-people-input → number-of-people-input}/NumberOfPeopleInput.tsx +1 -1
  52. package/src/number-of-people-input/components/RenderNumberOfPeopleInputComponent.stories.tsx +92 -0
  53. package/src/{iframe/event/event-details/components/number-of-people-input/component → number-of-people-input/components}/RenderNumberOfPeopleInputComponent.tsx +3 -3
  54. package/src/number-of-people-input/components/index.ts +1 -0
  55. package/src/number-of-people-input/index.ts +2 -0
  56. package/src/product-set/control/ProductSetControl.tsx +36 -0
  57. package/src/product-set/form/ProductCategoriesControl.tsx +0 -1
  58. package/src/product-set/form/ProductSetForm.stories.tsx +2 -6
  59. package/src/product-set/product-category/ProductCategory.stories.tsx +0 -1
  60. package/src/product-set/product-category/ProductCategoryControl.tsx +0 -23
  61. package/src/sales/booking/results/BookingResults.stories.tsx +0 -7
  62. package/src/sales/guest-profile/previous-bookings/PreviousBookings.stories.tsx +0 -7
  63. package/src/sales/manual-booking/summary/ManualBookingSummary.tsx +20 -5
  64. package/src/types/iframe.ts +1 -0
  65. package/dist/iframe/event/event-details/EventDetails.d.ts +0 -10
  66. package/dist/iframe/event/event-details/EventDetails.d.ts.map +0 -1
  67. package/dist/iframe/event/event-details/EventDetails.js +0 -1
  68. package/dist/iframe/event/event-details/components/category-product/CategoryProduct.d.ts +0 -9
  69. package/dist/iframe/event/event-details/components/category-product/CategoryProduct.d.ts.map +0 -1
  70. package/dist/iframe/event/event-details/components/category-product/CategoryProduct.js +0 -1
  71. package/dist/iframe/event/event-details/components/category-product/index.d.ts +0 -2
  72. package/dist/iframe/event/event-details/components/category-product/index.d.ts.map +0 -1
  73. package/dist/iframe/event/event-details/components/event-details-form/EventDetailsForm.d.ts +0 -26
  74. package/dist/iframe/event/event-details/components/event-details-form/EventDetailsForm.d.ts.map +0 -1
  75. package/dist/iframe/event/event-details/components/event-details-form/EventDetailsForm.js +0 -1
  76. package/dist/iframe/event/event-details/components/event-details-form/index.d.ts +0 -2
  77. package/dist/iframe/event/event-details/components/event-details-form/index.d.ts.map +0 -1
  78. package/dist/iframe/event/event-details/components/number-of-people-input/NumberOfPeopleInput.d.ts.map +0 -1
  79. package/dist/iframe/event/event-details/components/number-of-people-input/NumberOfPeopleInput.js +0 -1
  80. package/dist/iframe/event/event-details/components/number-of-people-input/component/RenderNumberOfPeopleInputComponent.d.ts.map +0 -1
  81. package/dist/iframe/event/event-details/components/number-of-people-input/component/RenderNumberOfPeopleInputComponent.js +0 -1
  82. package/dist/iframe/event/event-details/components/number-of-people-input/component/index.d.ts +0 -2
  83. package/dist/iframe/event/event-details/components/number-of-people-input/component/index.d.ts.map +0 -1
  84. package/dist/iframe/event/event-details/components/number-of-people-input/index.d.ts +0 -2
  85. package/dist/iframe/event/event-details/components/number-of-people-input/index.d.ts.map +0 -1
  86. package/dist/iframe/event/event-details/components/product-category-view/ProductCategoryView.d.ts +0 -8
  87. package/dist/iframe/event/event-details/components/product-category-view/ProductCategoryView.d.ts.map +0 -1
  88. package/dist/iframe/event/event-details/components/product-category-view/ProductCategoryView.js +0 -1
  89. package/dist/iframe/event/event-details/components/product-category-view/index.d.ts +0 -2
  90. package/dist/iframe/event/event-details/components/product-category-view/index.d.ts.map +0 -1
  91. package/dist/iframe/event/event-details/index.d.ts +0 -2
  92. package/dist/iframe/event/event-details/index.d.ts.map +0 -1
  93. package/dist/iframe/event/event-details/utils/index.d.ts +0 -2
  94. package/dist/iframe/event/event-details/utils/index.d.ts.map +0 -1
  95. package/dist/iframe/event/event-details/utils/routes.d.ts +0 -2
  96. package/dist/iframe/event/event-details/utils/routes.d.ts.map +0 -1
  97. package/dist/iframe/event/event-details/utils/routes.js +0 -1
  98. package/src/iframe/event/event-details/EventDetails.stories.tsx +0 -187
  99. package/src/iframe/event/event-details/EventDetails.tsx +0 -92
  100. package/src/iframe/event/event-details/EventDetailsOneStepForm.stories.tsx +0 -123
  101. package/src/iframe/event/event-details/components/category-product/CategoryProduct.tsx +0 -109
  102. package/src/iframe/event/event-details/components/category-product/index.ts +0 -1
  103. package/src/iframe/event/event-details/components/event-details-form/EventDetailsForm.tsx +0 -250
  104. package/src/iframe/event/event-details/components/event-details-form/index.ts +0 -5
  105. package/src/iframe/event/event-details/components/number-of-people-input/component/index.ts +0 -1
  106. package/src/iframe/event/event-details/components/number-of-people-input/index.ts +0 -1
  107. package/src/iframe/event/event-details/components/product-category-view/ProductCategoryView.tsx +0 -34
  108. package/src/iframe/event/event-details/components/product-category-view/index.ts +0 -1
  109. package/src/iframe/event/event-details/index.ts +0 -1
  110. package/src/iframe/event/event-details/utils/index.ts +0 -1
  111. package/src/iframe/event/event-details/utils/routes.ts +0 -6
  112. /package/dist/{iframe/event/event-details/components/number-of-people-input → number-of-people-input}/NumberOfPeopleInput.d.ts +0 -0
@@ -1,92 +0,0 @@
1
- import React, { useState, useMemo } from "react";
2
- import { MemoryRouter, Route } from "react-router-dom";
3
- import {
4
- EventDetailsForm,
5
- EventDetailsFormProps,
6
- } from "./components/event-details-form";
7
- import { WizardFormValues } from "../../../types";
8
- import { routesByStepsCount } from "./utils";
9
-
10
- type EventDetailsProps = EventDetailsFormProps & {
11
- onSubmit: (values: WizardFormValues) => void;
12
- defaultValues?: WizardFormValues;
13
- };
14
-
15
- export function EventDetails({
16
- onSubmit,
17
- menus,
18
- defaultValues = {},
19
- ...restProps
20
- }: EventDetailsProps) {
21
- const [stepFormValues, setStepFormValues] =
22
- useState<WizardFormValues>(defaultValues);
23
-
24
- const menu = menus && menus?.length !== 0 ? menus[0] : null;
25
- const numberOfSteps = menu?.menuSteps?.length || 0;
26
-
27
- const routes = useMemo(
28
- () => routesByStepsCount(numberOfSteps),
29
- [numberOfSteps]
30
- );
31
-
32
- const submitFormsValues = (values: WizardFormValues) => {
33
- if (!onSubmit) return;
34
-
35
- onSubmit(values);
36
- };
37
-
38
- const saveFormValues = ({
39
- values,
40
- pathname,
41
- isBackAction = false,
42
- }: {
43
- values: WizardFormValues;
44
- pathname?: string;
45
- isBackAction?: boolean;
46
- }) => {
47
- const nextValues = { ...stepFormValues, ...values };
48
- setStepFormValues(nextValues);
49
-
50
- if (!pathname || (routes[routes.length - 1] === pathname && !isBackAction))
51
- return submitFormsValues(nextValues);
52
-
53
- return undefined;
54
- };
55
-
56
- if (routes.length) {
57
- return (
58
- <MemoryRouter initialEntries={routes} initialIndex={0}>
59
- {routes.map((route: string) => {
60
- return (
61
- <Route
62
- path={route}
63
- exact
64
- key={route}
65
- render={() => (
66
- <EventDetailsForm
67
- {...restProps}
68
- menu={menu}
69
- onFormSubmit={saveFormValues}
70
- routes={routes}
71
- numberOfSteps={numberOfSteps}
72
- defaultValues={stepFormValues}
73
- />
74
- )}
75
- />
76
- );
77
- })}
78
- </MemoryRouter>
79
- );
80
- }
81
-
82
- return (
83
- <EventDetailsForm
84
- {...restProps}
85
- menu={menu}
86
- onFormSubmit={saveFormValues}
87
- routes={routes}
88
- numberOfSteps={numberOfSteps}
89
- defaultValues={stepFormValues}
90
- />
91
- );
92
- }
@@ -1,123 +0,0 @@
1
- import { Meta } from "@storybook/react";
2
- import React, { useState } from "react";
3
- import { boolean } from "@storybook/addon-knobs";
4
- import { EventDetails } from "./EventDetails";
5
-
6
- export default {
7
- title: "Iframe/Event/EventDetailsOneStepForm",
8
- component: EventDetails,
9
- } as Meta;
10
-
11
- const productCategories = [
12
- {
13
- id: 1,
14
- name: "Early Bird General Admission",
15
- products: [
16
- {
17
- id: 7,
18
- name: "Beer",
19
- description: `Ticket is valid for students and non students.
20
- You do not need student ID for this event but do require regular age ID e.g. driving licence or passport.
21
- Ticket valid for entry before 11.30pm for 12.30am showtime.`,
22
- minQuantity: 1,
23
- maxQuantity: 10,
24
- price: 1,
25
- },
26
- {
27
- id: 8,
28
- name: "Wine",
29
- description: `Ticket is valid for students and non students.
30
- You do not need student ID for this event but do require regular age ID e.g. driving licence or passport.
31
- Ticket valid for entry before 11.30pm for 12.30am showtime.`,
32
- minQuantity: 1,
33
- maxQuantity: 10,
34
- price: 1,
35
- isRequired: true,
36
- },
37
- ],
38
- },
39
- {
40
- id: 2,
41
- name: "Nice",
42
- products: [
43
- {
44
- id: 3,
45
- name: "Beer",
46
- description: `Ticket is valid for students and non students.
47
- You do not need student ID for this event but do require regular age ID e.g. driving licence or passport.
48
- Ticket valid for entry before 11.30pm for 12.30am showtime.`,
49
- minQuantity: 1,
50
- maxQuantity: 10,
51
- price: 1,
52
- },
53
- {
54
- id: 5,
55
- name: "Wine",
56
- description: `Ticket is valid for students and non students.
57
- You do not need student ID for this event but do require regular age ID e.g. driving licence or passport.
58
- Ticket valid for entry before 11.30pm for 12.30am showtime.`,
59
- minQuantity: 1,
60
- maxQuantity: 10,
61
- price: 1,
62
- },
63
- ],
64
- },
65
- ];
66
-
67
- const menus = [
68
- {
69
- id: 1,
70
- name: "Menu 1",
71
- menuSteps: [
72
- {
73
- id: 1,
74
- name: "Burger",
75
- productCategories: productCategories,
76
- },
77
- ],
78
- },
79
- ];
80
-
81
- export function Default() {
82
- const [_order, setOrder] = useState({});
83
-
84
- const onSubmit = (values: any) => {
85
- setOrder(values);
86
- };
87
-
88
- const showImage = boolean("showImage", true);
89
-
90
- return (
91
- <div>
92
- <EventDetails
93
- menus={menus}
94
- description="On the other hand, we denounce with righteous indignation and dislike
95
- men who are so beguiled and demoralized by the charms of pleasure of
96
- the moment, so blinded by desire, that they cannot foresee the pain
97
- and trouble that are bound to ensue; and equal blame belongs to those
98
- who fail in their duty through weakness of will, which is the same as
99
- saying through shrinking from toil and pain. These cases are perfectly
100
- simple and easy to distinguish. In a free hour, when our power of
101
- choice is untrammelled and when nothing prevents our being able to do
102
- what we like best, every pleasure is to be welcomed and every pain
103
- avoided. But in certain circumstances and owing to the claims of duty
104
- or the obligations of business it will frequently occur that pleasures
105
- have to be repudiated and annoyances accepted. The wise man therefore
106
- always holds in these matters to this principle of selection: he
107
- rejects pleasures to secure other greater pleasures, or else he
108
- endures pains to avoid worse pains."
109
- cost={6}
110
- title="Glitterbomb Bucks / Baga Chipz"
111
- date="Sat 2nd May"
112
- imageSrc={
113
- // eslint-disable-next-line max-len
114
- showImage
115
- ? "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80 387w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80 687w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80 774w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80 987w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80 1287w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80 1374w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80 1587w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80 1887w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80 1974w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2187&q=80 2187w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2487&q=80 2487w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2574&q=80 2574w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2787&q=80 2787w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3087&q=80 3087w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3174&q=80 3174w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3387&q=80 3387w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3687&q=80 3687w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3774&q=80 3774w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3987&q=80 3987w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=4000&q=80 4000w"
116
- : null
117
- }
118
- onSubmit={onSubmit}
119
- relyOnPeopleCategoryIds={[1]}
120
- />
121
- </div>
122
- );
123
- }
@@ -1,109 +0,0 @@
1
- import React from "react";
2
- import { useIntl } from "react-intl";
3
- import { useFormContext, Controller } from "react-hook-form";
4
- import clsx from "clsx";
5
- import { useTranslation, Trans } from "react-i18next";
6
- import { TicketDescription } from "../../../ticket-description";
7
- import { NumberInput } from "../../../../../static";
8
- import { ProductCategory, Product } from "../../../../../types";
9
-
10
- interface CategoryProductProps {
11
- product: Product;
12
- category: ProductCategory;
13
- }
14
-
15
- export const CategoryProduct = ({
16
- product,
17
- category,
18
- }: CategoryProductProps) => {
19
- const { formatNumber } = useIntl();
20
- const { t } = useTranslation("Design");
21
- const { control, clearErrors } = useFormContext();
22
-
23
- return (
24
- <Controller
25
- control={control}
26
- name={`${product.id}` as const}
27
- rules={{
28
- required: product.isRequired,
29
- validate: product.isRequired
30
- ? (product) => product?.quantity > 0
31
- : undefined,
32
- }}
33
- render={({
34
- field: { onChange, value: productInfo = {} },
35
- fieldState: { invalid },
36
- }) => {
37
- return (
38
- <div id={String(product.id)}>
39
- <div className={clsx("iframe-event__product", invalid && "error")}>
40
- <TicketDescription
41
- title={product.name}
42
- description={product.description}
43
- className="iframe-event__product-description"
44
- images={product.images}
45
- />
46
-
47
- <NumberInput
48
- onChange={(val) => {
49
- onChange({
50
- id: product.id,
51
- quantity: val,
52
- name: product.name,
53
- price: product.price,
54
- productsCategoryId: category.id,
55
- });
56
- clearErrors(`${product.id}` as const);
57
- }}
58
- onArrowDown={() => {
59
- onChange({
60
- id: product.id,
61
- quantity: productInfo?.quantity - 1 || 0,
62
- name: product.name,
63
- price: product.price,
64
- productsCategoryId: category.id,
65
- });
66
- clearErrors(`${product.id}` as const);
67
- }}
68
- onArrowUp={() => {
69
- onChange({
70
- id: product.id,
71
- quantity: (productInfo?.quantity ?? 0) + 1,
72
- name: product.name,
73
- price: product.price,
74
- productsCategoryId: category.id,
75
- });
76
- clearErrors(`${product.id}` as const);
77
- }}
78
- min={0}
79
- value={productInfo?.quantity || 0}
80
- className={clsx(
81
- "iframe-event__product-count",
82
- invalid && "error"
83
- )}
84
- />
85
- <span className="iframe-event__product-price-multiplier">X</span>
86
- <span className="iframe-event__product-price">
87
- {formatNumber(product.price * (productInfo?.quantity || 1), {
88
- style: "currency",
89
- currency: "GBP",
90
- })}
91
- </span>
92
- </div>
93
- {invalid && (
94
- <div className="d-flex mt-3 ml-5 mr-5 w-100">
95
- <p className="iframe-event__message-error">
96
- <Trans
97
- t={t}
98
- i18nKey="pleaseSelectAtLeastFrom"
99
- values={{ min: 1, type: "item", from: "this category" }}
100
- />
101
- </p>
102
- </div>
103
- )}
104
- </div>
105
- );
106
- }}
107
- />
108
- );
109
- };
@@ -1 +0,0 @@
1
- export { CategoryProduct } from "./CategoryProduct";
@@ -1,250 +0,0 @@
1
- import React, {
2
- CSSProperties,
3
- useState,
4
- useRef,
5
- useEffect,
6
- useMemo,
7
- } from "react";
8
- import { useHistory, useLocation } from "react-router-dom";
9
- import { Badge, Image, Form } from "react-bootstrap";
10
- import { useTranslation, Trans } from "react-i18next";
11
- import { useIntl } from "react-intl";
12
- import { useForm, FormProvider, useWatch } from "react-hook-form";
13
- import clsx from "clsx";
14
- import {
15
- scrollToError,
16
- scrollToElement,
17
- } from "@licklist/plugins/dist/utils/ScrollUtils";
18
- import {
19
- getFirstErrorKey,
20
- isFormValuesEmpty,
21
- } from "@licklist/plugins/dist/utils/FormValues";
22
-
23
- import { TextExpand } from "../../../../../static";
24
- import { EventNavigationFooter } from "../../../event-navigation-footer";
25
- import { ProductCategoryView } from "../product-category-view";
26
- import { NumberOfPeopleInput } from "../number-of-people-input";
27
-
28
- import { Menu, WizardFormValues } from "../../../../../types";
29
- import { TipTapEditor } from "../../../../../tiptap-editor/TipTapEditor";
30
-
31
- const DESCRIPTION_MAX_LENGTH = 120;
32
- const NO_ORDER_ITEMS_ERROR = "NO_ORDER_ITEMS_ERROR";
33
-
34
- export interface WizardFormProps {
35
- onFormSubmit: (props: {
36
- values: WizardFormValues;
37
- pathname?: string;
38
- isBackAction?: boolean;
39
- }) => void;
40
- routes?: string[];
41
- menu: Menu;
42
- numberOfSteps: number;
43
- defaultValues: WizardFormValues;
44
- }
45
-
46
- export interface EventDetailsFormProps {
47
- title: string;
48
- date: string;
49
- cost?: number;
50
- description: string;
51
- imageSrc?: null | string;
52
- menus?: Menu[];
53
- isBuyNowDisabled?: boolean;
54
- relyOnPeopleCategoryIds?: number[];
55
- onPrevStep?: () => void;
56
- }
57
-
58
- export function EventDetailsForm({
59
- title,
60
- cost,
61
- description,
62
- imageSrc,
63
- date,
64
- menu,
65
- isBuyNowDisabled,
66
- onFormSubmit,
67
- routes = [],
68
- numberOfSteps,
69
- defaultValues,
70
- relyOnPeopleCategoryIds = [],
71
- onPrevStep,
72
- }: EventDetailsFormProps & WizardFormProps) {
73
- const history = useHistory();
74
- const { pathname } = useLocation();
75
-
76
- const { formatNumber } = useIntl();
77
- const { t } = useTranslation("Design");
78
- const form = useForm({ defaultValues });
79
- const headerRef = useRef(null);
80
-
81
- const {
82
- trigger,
83
- handleSubmit,
84
- getValues,
85
- control,
86
- setError,
87
- clearErrors,
88
- formState: { errors },
89
- } = form;
90
- const formValues = useWatch({ control });
91
-
92
- const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
93
-
94
- const pathNameIndex = routes.indexOf(pathname);
95
- const step = pathNameIndex > 0 ? pathNameIndex : 0;
96
- const nextStep = step + 1;
97
-
98
- const onNextClick = async () => {
99
- if (!(await trigger())) {
100
- scrollToError(getFirstErrorKey(errors));
101
- return;
102
- }
103
- submitCurrentForm(getValues());
104
-
105
- if (routes.length) {
106
- history.push(routes[pathNameIndex + 1]);
107
- }
108
- };
109
-
110
- const onPrevClick = () => {
111
- onFormSubmit({ values: getValues(), pathname, isBackAction: true });
112
-
113
- if (routes.length) {
114
- history.push(routes[pathNameIndex - 1]);
115
- }
116
- };
117
-
118
- const submitCurrentForm = (values: WizardFormValues) => {
119
- if (nextStep === numberOfSteps && isFormValuesEmpty(values)) {
120
- setError(NO_ORDER_ITEMS_ERROR, {});
121
- scrollToError(NO_ORDER_ITEMS_ERROR);
122
- return;
123
- }
124
-
125
- onFormSubmit({ values, pathname, isBackAction: false });
126
- };
127
-
128
- const onErrorSubmit = (submitErrors) => {
129
- scrollToError(getFirstErrorKey(submitErrors));
130
- };
131
-
132
- const shouldShowPeopleInput = useMemo(() => {
133
- const values = Object.values(formValues)
134
- .filter(Boolean)
135
- .filter(
136
- (product) =>
137
- relyOnPeopleCategoryIds.includes(product.productsCategoryId) &&
138
- product.quantity > 0
139
- );
140
-
141
- return Boolean(values.length);
142
- }, [formValues, relyOnPeopleCategoryIds]);
143
-
144
- useEffect(() => {
145
- scrollToElement(headerRef.current);
146
- }, []);
147
-
148
- useEffect(() => {
149
- if (!isFormValuesEmpty(formValues)) {
150
- clearErrors(NO_ORDER_ITEMS_ERROR);
151
- }
152
- }, [formValues, clearErrors]);
153
-
154
- const descriptionWrapperStyle = {
155
- "--description-wrapper-height": isDescriptionExpanded ? "inherit" : "8rem",
156
- } as CSSProperties;
157
-
158
- return (
159
- <Form onSubmit={handleSubmit(submitCurrentForm, onErrorSubmit)}>
160
- <FormProvider {...form}>
161
- <div className="iframe-event">
162
- <div className="iframe-event__header" ref={headerRef}>
163
- {imageSrc && (
164
- <Image src={imageSrc} width="300rem" height="250rem" />
165
- )}
166
- <div className={clsx(imageSrc && "ml-5")}>
167
- <Badge variant="dark" className="iframe-event__badge">
168
- {date}
169
- </Badge>
170
- <h5 className="mt-3 iframe-event__title">{title}</h5>
171
- <div className="d-flex flex-wrap justify-content-between">
172
- {cost !== undefined && (
173
- <div>
174
- <div className="iframe-event-card__label">{t("cost")}</div>
175
- <div className="iframe-event-card__bold">
176
- {t("from")}{" "}
177
- {formatNumber(cost, {
178
- style: "currency",
179
- currency: "GBP",
180
- })}
181
- </div>
182
- </div>
183
- )}
184
- </div>
185
- </div>
186
- </div>
187
- {!!description && (
188
- <div
189
- className="iframe-event__description-wrapper"
190
- style={descriptionWrapperStyle}
191
- >
192
- {description.length > DESCRIPTION_MAX_LENGTH ? (
193
- <TextExpand
194
- className="iframe-event__description my-6"
195
- isExpanded={isDescriptionExpanded}
196
- setIsExpanded={setIsDescriptionExpanded}
197
- >
198
- <TipTapEditor viewMode disabled content={description} />
199
- </TextExpand>
200
- ) : (
201
- <div className="my-6">
202
- <TipTapEditor viewMode disabled content={description} />
203
- </div>
204
- )}
205
- </div>
206
- )}
207
- {!!menu && (
208
- <>
209
- {menu.menuSteps[step].name && (
210
- <h3 className="iframe-event__name">
211
- {menu.menuSteps[step].name}
212
- </h3>
213
- )}
214
-
215
- <ProductCategoryView
216
- productCategories={menu.menuSteps[step]?.productCategories}
217
- />
218
-
219
- {shouldShowPeopleInput && nextStep === numberOfSteps && (
220
- <NumberOfPeopleInput />
221
- )}
222
- {errors[NO_ORDER_ITEMS_ERROR] && (
223
- <div
224
- className="d-flex m-5 justify-content-center form-error"
225
- id={NO_ORDER_ITEMS_ERROR}
226
- >
227
- <Trans
228
- t={t}
229
- i18nKey="pleaseSelectAtLeastFrom"
230
- values={{ min: 1, type: "item", from: "those categories" }}
231
- />
232
- </div>
233
- )}
234
- <div className="iframe-event__footer">
235
- <EventNavigationFooter
236
- isBuyNowDisabled={isBuyNowDisabled}
237
- amount={numberOfSteps}
238
- activeElement={nextStep}
239
- onPrevClick={onPrevClick}
240
- onNextClick={onNextClick}
241
- onPrevStep={onPrevStep}
242
- />
243
- </div>
244
- </>
245
- )}
246
- </div>
247
- </FormProvider>
248
- </Form>
249
- );
250
- }
@@ -1,5 +0,0 @@
1
- export {
2
- EventDetailsForm,
3
- EventDetailsFormProps,
4
- WizardFormProps,
5
- } from "./EventDetailsForm";
@@ -1 +0,0 @@
1
- export { RenderNumberOfPeopleInputComponent } from "./RenderNumberOfPeopleInputComponent";
@@ -1 +0,0 @@
1
- export { NumberOfPeopleInput } from "./NumberOfPeopleInput";
@@ -1,34 +0,0 @@
1
- import React from "react";
2
-
3
- import { ProductCategory } from "../../../../../types";
4
- import { CategoryProduct } from "../category-product";
5
-
6
- interface ProductCategoryViewProps {
7
- productCategories: ProductCategory[];
8
- }
9
-
10
- export function ProductCategoryView({
11
- productCategories,
12
- }: ProductCategoryViewProps) {
13
- return (
14
- <>
15
- {productCategories.length !== 0 &&
16
- productCategories.map((category) => {
17
- return (
18
- <div key={category.id} className="iframe-event__category">
19
- <h4 className="iframe-event__name">{category.name}</h4>
20
- {category.products.map((product) => {
21
- return (
22
- <CategoryProduct
23
- key={product.id}
24
- product={product}
25
- category={category}
26
- />
27
- );
28
- })}
29
- </div>
30
- );
31
- })}
32
- </>
33
- );
34
- }
@@ -1 +0,0 @@
1
- export { ProductCategoryView } from "./ProductCategoryView";
@@ -1 +0,0 @@
1
- export { EventDetails } from "./EventDetails";
@@ -1 +0,0 @@
1
- export * from "./routes";
@@ -1,6 +0,0 @@
1
- const STEP_PATH_PREFIX = "step_";
2
-
3
- export const routesByStepsCount = (count: number) =>
4
- Array.from({ length: count }, (_v, i) => i).map(
5
- (stepIndex: number) => `/${STEP_PATH_PREFIX}${stepIndex}`
6
- );