@licklist/design 0.44.485-dev.74 → 0.44.485-dev.76

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 (93) hide show
  1. package/dist/iframe/activities-card-page/components/activities-card/ActivitiesCard.d.ts +8 -0
  2. package/dist/iframe/activities-card-page/components/activities-card/ActivitiesCard.d.ts.map +1 -0
  3. package/dist/iframe/activities-card-page/components/activities-card/ActivitiesCard.js +1 -0
  4. package/dist/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.d.ts +9 -0
  5. package/dist/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.d.ts.map +1 -0
  6. package/dist/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.js +1 -0
  7. package/dist/iframe/activities-card-page/index.d.ts +3 -0
  8. package/dist/iframe/activities-card-page/index.d.ts.map +1 -0
  9. package/dist/iframe/index.d.ts +1 -0
  10. package/dist/iframe/index.d.ts.map +1 -1
  11. package/dist/index.js +1 -1
  12. package/dist/sales/booking/filter/{components/AdditionalFIlterSection.d.ts → AdditionalFilterSection.d.ts} +1 -1
  13. package/dist/sales/booking/filter/AdditionalFilterSection.d.ts.map +1 -0
  14. package/dist/sales/booking/filter/AdditionalFilterSection.js +1 -0
  15. package/dist/sales/booking/filter/{components/MainFilterSection.d.ts → MainFilterSection.d.ts} +1 -1
  16. package/dist/sales/booking/filter/MainFilterSection.d.ts.map +1 -0
  17. package/dist/sales/booking/filter/MainFilterSection.js +1 -0
  18. package/dist/sales/booking/filter/ResultTagButton.d.ts.map +1 -0
  19. package/dist/sales/booking/filter/ResultTagButton.js +1 -0
  20. package/dist/sales/booking/filter/SearchingForSection.d.ts.map +1 -0
  21. package/dist/sales/booking/filter/index.d.ts +5 -2
  22. package/dist/sales/booking/filter/index.d.ts.map +1 -1
  23. package/dist/sales/booking/filter/{BookingFilter.d.ts → types.d.ts} +2 -3
  24. package/dist/sales/booking/filter/types.d.ts.map +1 -0
  25. package/dist/sales/booking/index.d.ts +0 -1
  26. package/dist/sales/booking/index.d.ts.map +1 -1
  27. package/dist/sales/booking/results/constants.d.ts.map +1 -1
  28. package/dist/sales/booking/results/constants.js +1 -1
  29. package/dist/sales/booking/results/index.d.ts +1 -0
  30. package/dist/sales/booking/results/index.d.ts.map +1 -1
  31. package/dist/snippet/snippet-template/preview/Preview.js +1 -1
  32. package/dist/static/date-range-input/DateRangeInput.d.ts +2 -1
  33. package/dist/static/date-range-input/DateRangeInput.d.ts.map +1 -1
  34. package/dist/styles/iframe-events/ActivitiesCard.scss +55 -0
  35. package/dist/styles/iframe-events/ActivitiesSelectedCard.scss +52 -0
  36. package/dist/styles/iframe-events/_index.scss +2 -0
  37. package/dist/styles/sales/RandomColors.scss +7 -4
  38. package/dist/styles/themes/bookedit/_variables.scss +3 -2
  39. package/package.json +1 -1
  40. package/src/iframe/activities-card-page/components/activities-card/ActivitiesCard.tsx +68 -0
  41. package/src/iframe/activities-card-page/components/activities-card/ActivitiesCardList.stories.tsx +120 -0
  42. package/src/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.stories.tsx +67 -0
  43. package/src/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.tsx +57 -0
  44. package/src/iframe/activities-card-page/index.ts +2 -0
  45. package/src/iframe/index.ts +1 -0
  46. package/src/iframe/select-date-time/index.ts +1 -0
  47. package/src/sales/booking/filter/{components/AdditionalFIlterSection.tsx → AdditionalFilterSection.tsx} +2 -1
  48. package/src/sales/booking/filter/{components/MainFilterSection.tsx → MainFilterSection.tsx} +6 -5
  49. package/src/sales/booking/filter/{components/ResultTagButton.tsx → ResultTagButton.tsx} +2 -1
  50. package/src/sales/booking/filter/{components/SearchingForSection.tsx → SearchingForSection.tsx} +1 -0
  51. package/src/sales/booking/filter/index.ts +5 -2
  52. package/src/sales/booking/filter/types.tsx +14 -0
  53. package/src/sales/booking/index.ts +0 -1
  54. package/src/sales/booking/results/constants.ts +1 -0
  55. package/src/sales/booking/results/index.ts +1 -0
  56. package/src/static/date-range-input/DateRangeInput.tsx +2 -1
  57. package/src/styles/iframe-events/ActivitiesCard.scss +55 -0
  58. package/src/styles/iframe-events/ActivitiesSelectedCard.scss +52 -0
  59. package/src/styles/iframe-events/_index.scss +2 -0
  60. package/src/styles/sales/RandomColors.scss +7 -4
  61. package/src/styles/themes/bookedit/_variables.scss +3 -2
  62. package/tsconfig.json +2 -2
  63. package/dist/assets/dashboard/bookingCalendar.svg +0 -67
  64. package/dist/assets/dashboard/bookingCalendar.svg.js +0 -1
  65. package/dist/assets/dashboard/bookingList.svg +0 -68
  66. package/dist/assets/dashboard/bookingList.svg.js +0 -1
  67. package/dist/assets/dashboard/bookingListSmall.svg +0 -6
  68. package/dist/assets/dashboard/bookingListSmall.svg.js +0 -1
  69. package/dist/sales/booking/filter/BookingFilter.d.ts.map +0 -1
  70. package/dist/sales/booking/filter/BookingFilter.js +0 -1
  71. package/dist/sales/booking/filter/components/AdditionalFIlterSection.d.ts.map +0 -1
  72. package/dist/sales/booking/filter/components/AdditionalFIlterSection.js +0 -1
  73. package/dist/sales/booking/filter/components/MainFilterSection.d.ts.map +0 -1
  74. package/dist/sales/booking/filter/components/MainFilterSection.js +0 -1
  75. package/dist/sales/booking/filter/components/ResultTagButton.d.ts.map +0 -1
  76. package/dist/sales/booking/filter/components/ResultTagButton.js +0 -1
  77. package/dist/sales/booking/filter/components/SearchingForSection.d.ts.map +0 -1
  78. package/dist/sales/booking/tabs/BookingTabs.d.ts +0 -12
  79. package/dist/sales/booking/tabs/BookingTabs.d.ts.map +0 -1
  80. package/dist/sales/booking/tabs/BookingTabs.js +0 -1
  81. package/dist/sales/booking/tabs/index.d.ts +0 -3
  82. package/dist/sales/booking/tabs/index.d.ts.map +0 -1
  83. package/src/assets/dashboard/bookingCalendar.svg +0 -67
  84. package/src/assets/dashboard/bookingList.svg +0 -68
  85. package/src/assets/dashboard/bookingListSmall.svg +0 -6
  86. package/src/sales/booking/filter/BookingFilter.stories.tsx +0 -56
  87. package/src/sales/booking/filter/BookingFilter.tsx +0 -56
  88. package/src/sales/booking/tabs/BookingTabs.stories.tsx +0 -17
  89. package/src/sales/booking/tabs/BookingTabs.tsx +0 -89
  90. package/src/sales/booking/tabs/index.ts +0 -2
  91. /package/dist/sales/booking/filter/{components/ResultTagButton.d.ts → ResultTagButton.d.ts} +0 -0
  92. /package/dist/sales/booking/filter/{components/SearchingForSection.d.ts → SearchingForSection.d.ts} +0 -0
  93. /package/dist/sales/booking/filter/{components/SearchingForSection.js → SearchingForSection.js} +0 -0
package/src/iframe/activities-card-page/components/activities-card/ActivitiesCard.tsx ADDED
@@ -0,0 +1,68 @@
1
+ import React from "react";
2
+ import clsx from "clsx";
3
+ import { useTranslation } from "react-i18next";
4
+ import { useIntl } from "react-intl";
5
+
6
+ export interface ActivitiesCardProps {
7
+ card: any;
8
+ onSelectCardId?: (productSetId: number) => void;
9
+ isActive: boolean;
10
+ }
11
+
12
+ export const ActivitiesCard = ({
13
+ card,
14
+ onSelectCardId,
15
+ isActive,
16
+ }: ActivitiesCardProps) => {
17
+ const { formatNumber } = useIntl();
18
+ const { t } = useTranslation("Design");
19
+ const { imageSrc, title, time, cost } = card;
20
+
21
+ const onClick = () => {
22
+ onSelectCardId(card);
23
+ };
24
+
25
+ return (
26
+ <div
27
+ id={card.id}
28
+ role="button"
29
+ className={clsx("iframe-activities-card", isActive && "active")}
30
+ onClick={onClick}
31
+ onKeyPress={onClick}
32
+ tabIndex={0}
33
+ >
34
+ {imageSrc && (
35
+ <div
36
+ className="card-image"
37
+ style={{
38
+ backgroundImage: `url("${imageSrc}")`,
39
+ }}
40
+ />
41
+ )}
42
+ <div className={clsx("d-flex", "flex-column", !imageSrc && "no-image")}>
43
+ <div className="title">{title}</div>
44
+
45
+ {time && (
46
+ <div className="cost">
47
+ <div className="d-flex align-items-center">
48
+ <p className="m-0">
49
+ {time} {t("Mins")}
50
+ </p>
51
+ </div>
52
+ </div>
53
+ )}
54
+
55
+ {typeof cost === "number" && cost && (
56
+ <div className="label">
57
+ <div className="d-flex align-items-center mb-3">
58
+ <p className="m-0">
59
+ {t("from")}{" "}
60
+ {formatNumber(cost, { style: "currency", currency: "GBP" })}
61
+ </p>
62
+ </div>
63
+ </div>
64
+ )}
65
+ </div>
66
+ </div>
67
+ );
68
+ };
package/src/iframe/activities-card-page/components/activities-card/ActivitiesCardList.stories.tsx ADDED
@@ -0,0 +1,120 @@
1
+ import React, { useState } from "react";
2
+ import { useTranslation } from "react-i18next";
3
+ import { Meta } from "@storybook/react";
4
+ import { ActivitiesCard } from "./ActivitiesCard";
5
+
6
+
7
+ export default {
8
+ title: "Iframe/Activities Card/ActivitiesCardList",
9
+ component: Default,
10
+ } as Meta;
11
+
12
+ const currentCard = [
13
+ {
14
+ id: 1,
15
+ imageSrc:
16
+ "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
17
+ goToDetails: true,
18
+ title: "TEST CARD",
19
+ time: "45",
20
+ cost: 200,
21
+ },
22
+ {
23
+ id: 3,
24
+ imageSrc:
25
+ "https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=873&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 873w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1173&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1173w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1473&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1473w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1746&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1746w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1773&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1773w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2073w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2346&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2346w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2373&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2373w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2673&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2673w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2946&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2946w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2973&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2973w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=3008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3008w",
26
+ goToDetails: true,
27
+ title: "Clay Pigeons & Axe NEW CARD",
28
+ time: "45",
29
+ cost: 200,
30
+ },
31
+ {
32
+ id: 2,
33
+ imageSrc:
34
+ "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
35
+ goToDetails: false,
36
+ title: "TEST CARD",
37
+ time: "45",
38
+ cost: 200,
39
+ },
40
+ {
41
+ id: 4,
42
+ imageSrc:
43
+ "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
44
+ goToDetails: true,
45
+ title: "Clay Pigeons & Axe NEW CARD",
46
+ time: "45",
47
+ cost: 200,
48
+ },
49
+ {
50
+ id: 5,
51
+ imageSrc:
52
+ "https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=435&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 435w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=735&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 735w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 870w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=1035&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1035w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=1335&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1335w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1470w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=1635&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1635w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1935w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2070w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=2235&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2235w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=2535&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2535w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2670w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=2835&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2835w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=3135&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3135w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3270w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=3435&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3435w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=3735&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3735w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3870w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=4035&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4035w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=4335&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4335w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=4470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4470w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=4635&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4635w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=4935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4935w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=5070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5070w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=5235&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5235w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=5535&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5535w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=5670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5670w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=5835&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5835w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=6135&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 6135w, https://images.unsplash.com/photo-1605496036006-fa36378ca4ab?q=80&w=6240&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 6240w",
53
+ goToDetails: true,
54
+ title: "Clay Pigeons & Axe NEW CARD",
55
+ time: "45",
56
+ cost: 200,
57
+ },
58
+ {
59
+ id: 6,
60
+ imageSrc:
61
+ "https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 774w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1074w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1374w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=1548&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1548w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=1674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1674w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1974w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2148&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2148w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2274&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2274w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2574w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2748&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2748w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2874w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=3174&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3174w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3348w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=3474&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3474w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3774w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=3948&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3948w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=4074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4074w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=4374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4374w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=4548&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4548w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=4674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4674w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=4974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 4974w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=5148&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5148w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=5274&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5274w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=5574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5574w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=5748&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5748w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=5874&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 5874w, https://plus.unsplash.com/premium_photo-1668383210938-0183489b5f8a?q=80&w=6000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 6000w",
62
+ goToDetails: true,
63
+ title: "Clay Pigeons & Axe NEW CARD",
64
+ time: "45",
65
+ cost: 200,
66
+ },
67
+ {
68
+ id: 9,
69
+ imageSrc:
70
+ "https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=873&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 873w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1173&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1173w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1473&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1473w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1746&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1746w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=1773&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 1773w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2073w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2346&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2346w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2373&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2373w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2673&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2673w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2946&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2946w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=2973&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 2973w, https://images.unsplash.com/photo-1587691592099-24045742c181?q=80&w=3008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D 3008w",
71
+ goToDetails: true,
72
+ title: "Clay Pigeons & Axe NEW CARD",
73
+ time: "45",
74
+ cost: 200,
75
+ },
76
+ ];
77
+
78
+
79
+ export function Default(props) {
80
+
81
+ const { t } = useTranslation("Design");
82
+
83
+ const [selectedCard, onSelectCardId] = useState<any | null>(null);
84
+
85
+ const onSelectCard = (item: number) => {
86
+ onSelectCardId(item);
87
+ };
88
+
89
+ return (
90
+ <div>
91
+ <h5 className="d-flex align-items-center justify-content-start w-100">
92
+ {t("selectActivities")}
93
+ </h5>
94
+ <div
95
+ style={{
96
+ display: "grid",
97
+ gridTemplateColumns: "repeat(auto-fill, 15rem)",
98
+ gridGap: "1rem",
99
+ justifyContent: "center",
100
+ padding: "1rem",
101
+ }}
102
+ >
103
+ {currentCard.map((card) => (
104
+ <ActivitiesCard
105
+ key={card.id}
106
+ card={card}
107
+ isActive={selectedCard?.id === card.id}
108
+ onSelectCardId={onSelectCard}
109
+ />
110
+ ))}
111
+ </div>
112
+ </div>
113
+ );
114
+ }
115
+
116
+ Default.args = {
117
+ isLoading: false,
118
+ data: currentCard,
119
+ showBottomBlock: true,
120
+ };
package/src/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.stories.tsx ADDED
@@ -0,0 +1,67 @@
1
+ import React from "react";
2
+ import { Meta, Story } from "@storybook/react";
3
+ import { ActivitiesSelectedCard } from "./ActivitiesSelectedCard";
4
+
5
+ export default {
6
+ title: "Iframe/Activities Selected Card/ActivitiesSelectedCard",
7
+ component: ActivitiesSelectedCard,
8
+ } as Meta;
9
+
10
+ export type ActiveCard = {
11
+ id: number;
12
+ imageSrc: string;
13
+ goToDetails: boolean;
14
+ title: string;
15
+ time: number;
16
+ cost: number;
17
+ };
18
+
19
+ export const Default: Story<any> = () => {
20
+ const currentCard = [
21
+ {
22
+ id: 1,
23
+ imageSrc:
24
+ "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
25
+ title: "TEST CARD",
26
+ time: "45",
27
+ cost: 200,
28
+ },
29
+ {
30
+ id: 3,
31
+ imageSrc:
32
+ "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
33
+ title: "Clay Pigeons & Axe NEW CARD",
34
+ time: "45",
35
+ cost: 200,
36
+ },
37
+ {
38
+ id: 2,
39
+ imageSrc:
40
+ "https://images.unsplash.com/photo-1656660371960-7fa3321af896?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
41
+ title: "People Item / Title",
42
+ time: "45",
43
+ cost: 200,
44
+ },
45
+ ];
46
+
47
+ return (
48
+ <div
49
+ style={{
50
+ display: "flex",
51
+ flexWrap: "wrap",
52
+ flexDirection: "column",
53
+ padding: "0 1rem",
54
+ }}
55
+ >
56
+ {currentCard.map((card) => (
57
+ <ActivitiesSelectedCard
58
+ key={card.id}
59
+ imageSrc={card.imageSrc}
60
+ title={card.title}
61
+ cost={card.cost}
62
+ time={card.time}
63
+ />
64
+ ))}
65
+ </div>
66
+ );
67
+ };
package/src/iframe/activities-card-page/components/activities-selected-card/ActivitiesSelectedCard.tsx ADDED
@@ -0,0 +1,57 @@
1
+ import React from "react";
2
+ import clsx from "clsx";
3
+ import { useTranslation } from "react-i18next";
4
+ import { useIntl } from "react-intl";
5
+
6
+ export interface ActivitiesSelectedCardProps {
7
+ imageSrc: string;
8
+ title: string;
9
+ time: string;
10
+ cost: number;
11
+ }
12
+
13
+ export const ActivitiesSelectedCard = ({
14
+ imageSrc,
15
+ title,
16
+ time,
17
+ cost,
18
+ }: ActivitiesSelectedCardProps) => {
19
+ const { t } = useTranslation("Design");
20
+ const { formatNumber } = useIntl();
21
+
22
+ return (
23
+ <div>
24
+ <div className={clsx("selected-activities-card")}>
25
+ <div className="description">
26
+ <div className="title">{title}</div>
27
+ {time && (
28
+ <div>
29
+ <p>
30
+ {time} {t("Mins")}{" "}
31
+ </p>
32
+ </div>
33
+ )}
34
+
35
+ {typeof cost === "number" && cost && (
36
+ <div>
37
+ <p>
38
+ {t("from")}{" "}
39
+ {formatNumber(cost, { style: "currency", currency: "GBP" })}
40
+ </p>
41
+ </div>
42
+ )}
43
+ </div>
44
+
45
+ {imageSrc && (
46
+ <div className="image-container">
47
+ <div
48
+ className="image"
49
+ style={{ backgroundImage: `url("${imageSrc}")` }}
50
+ />
51
+ </div>
52
+ )}
53
+ </div>
54
+ <hr className="selected-activities-card-hr" />
55
+ </div>
56
+ );
57
+ };
package/src/iframe/activities-card-page/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { ActivitiesSelectedCard } from "./components/activities-selected-card/ActivitiesSelectedCard";
2
+ export { ActivitiesCard } from "./components/activities-card/ActivitiesCard";
package/src/iframe/index.ts CHANGED
@@ -42,5 +42,6 @@ export {
42
42
  } from "./order-process";
43
43
  export { PoweredBy } from "./powered-by";
44
44
  export * from "./page";
45
+ export { ActivitiesSelectedCard, ActivitiesCard } from "./activities-card-page";
45
46
  export { CustomDateField, CustomDateFieldProps } from "./custom-fields";
46
47
  export { SelectDateAndTimeEvent } from "./select-date-time";
package/src/iframe/select-date-time/index.ts CHANGED
@@ -1 +1,2 @@
1
1
  export { SelectDateAndTimeEvent } from "./component/date-container/SelectDateAndTimeEvent";
2
+
package/src/sales/booking/filter/{components/AdditionalFIlterSection.tsx → AdditionalFilterSection.tsx} RENAMED
@@ -12,7 +12,7 @@ import {
12
12
  BookingContext,
13
13
  BookingFilters,
14
14
  } from "@licklist/plugins/dist/context/booking/BookingContext";
15
- import { DateRangeInput } from "../../../../static/date-range-input/DateRangeInput";
15
+ import { DateRangeInput } from "../../../static/date-range-input/DateRangeInput";
16
16
  import { FilterSectionProps } from "./SearchingForSection";
17
17
 
18
18
  const ORDER_STATUSES_FOR_UPDATE = [
@@ -22,6 +22,7 @@ const ORDER_STATUSES_FOR_UPDATE = [
22
22
  ORDER_STATUS_ACTION_REQUIRED,
23
23
  ];
24
24
 
25
+ // @TODO fix issue with import DateRangeInput and move component to dashboard
25
26
  export type AdditionalFilterSectionProps = {
26
27
  onAddFiltersClick?: () => void;
27
28
  onCancelFilterClick?: () => void;
package/src/sales/booking/filter/{components/MainFilterSection.tsx → MainFilterSection.tsx} RENAMED
@@ -4,16 +4,17 @@ import { Form, Button } from "react-bootstrap";
4
4
  import clsx from "clsx";
5
5
  import useDebounce from "use-debounce/lib/useDebounce";
6
6
  import { BookingContext } from "@licklist/plugins/dist/context/booking/BookingContext";
7
- import Icon from "../../../../static/Icon";
8
- import { BookingFilterProps } from "../BookingFilter";
9
- import { ReactComponent as RefreshIcon } from "../../../../assets/dashboard/refresh.svg";
10
- import { ReactComponent as FullscreenIcon } from "../../../../assets/dashboard/fullscreen.svg";
11
- import { ReactComponent as MinimizeIcon } from "../../../../assets/dashboard/minimize.svg";
7
+ import Icon from "../../../static/Icon";
8
+ import { ReactComponent as RefreshIcon } from "../../../assets/dashboard/refresh.svg";
9
+ import { ReactComponent as FullscreenIcon } from "../../../assets/dashboard/fullscreen.svg";
10
+ import { ReactComponent as MinimizeIcon } from "../../../assets/dashboard/minimize.svg";
11
+ import { BookingFilterProps } from "./types";
12
12
 
13
13
  export type MainFilterSectionProps = Omit<BookingFilterProps, "staffMembers">;
14
14
 
15
15
  const DEBOUNCE_QUERY_TIME = 300;
16
16
 
17
+ // @TODO fix issue with import DateRangeInput and move component to dashboard
17
18
  export const MainFilterSection = ({
18
19
  isFilterOpen,
19
20
  onAddFiltersClick,
package/src/sales/booking/filter/{components/ResultTagButton.tsx → ResultTagButton.tsx} RENAMED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import Icon from "../../../../static/Icon";
2
+ import Icon from "../../../static/Icon";
3
3
 
4
4
  export type ResultTagButtonProps = {
5
5
  tagKey: string;
@@ -7,6 +7,7 @@ export type ResultTagButtonProps = {
7
7
  onRemoveClick: (tagKey: string) => void;
8
8
  };
9
9
 
10
+ // @TODO fix issue with import DateRangeInput and move component to dashboard
10
11
  export const ResultTagButton = ({
11
12
  tagKey,
12
13
  value,
package/src/sales/booking/filter/{components/SearchingForSection.tsx → SearchingForSection.tsx} RENAMED
@@ -20,6 +20,7 @@ export interface FilterSectionProps {
20
20
  isLoading: boolean;
21
21
  }
22
22
 
23
+ // @TODO fix issue with import DateRangeInput and move component to dashboard
23
24
  export const SearchingForSection = ({ staffMembers }: { staffMembers }) => {
24
25
  const { t } = useTranslation("Design");
25
26
  const { filters, setFilters } = useContext(BookingContext);
package/src/sales/booking/filter/index.ts CHANGED
@@ -1,2 +1,5 @@
1
- export { BookingFilter } from "./BookingFilter";
2
- export type { BookingFilterProps } from "./BookingFilter";
1
+ export { AdditionalFilterSection } from "./AdditionalFilterSection";
2
+ export { MainFilterSection } from "./MainFilterSection";
3
+ export { ResultTagButton } from "./ResultTagButton";
4
+ export { SearchingForSection } from "./SearchingForSection";
5
+ export { BookingFilterProps } from "./types";
package/src/sales/booking/filter/types.tsx ADDED
@@ -0,0 +1,14 @@
1
+ import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
2
+ import { PropsWithChildren } from "react";
3
+
4
+ export type BookingFilterProps = PropsWithChildren<{
5
+ onAddFiltersClick?: () => void;
6
+ onCancelFilterClick?: () => void;
7
+ onRefreshClick?: () => void;
8
+ onFullscreenButtonClick?: () => void;
9
+ isFilterOpen?: boolean;
10
+ autoFocusOnMount?: boolean;
11
+ isFullscreenMode?: boolean;
12
+ staffMembers?: User[] | null;
13
+ isLoading: boolean;
14
+ }>;
package/src/sales/booking/index.ts CHANGED
@@ -1,3 +1,2 @@
1
- export * from "./tabs";
2
1
  export * from "./filter";
3
2
  export * from "./results";
package/src/sales/booking/results/constants.ts CHANGED
@@ -3,4 +3,5 @@ export const BACKGROUND_COLOR_CLASSNAMES = [
3
3
  "random-color-yellow",
4
4
  "random-color-green",
5
5
  "random-color-pink",
6
+ "random-color-violet",
6
7
  ];
package/src/sales/booking/results/index.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { BookingResults } from "./BookingResults";
2
+ export * from "./constants";
2
3
  export type { BookingResultsProps } from "./BookingResults";
package/src/static/date-range-input/DateRangeInput.tsx CHANGED
@@ -3,6 +3,7 @@ import { Button, Form, OverlayTrigger, Popover } from "react-bootstrap";
3
3
  import { DateRange, Range } from "react-date-range";
4
4
  import { useClickAway } from "react-use";
5
5
  import { useTranslation } from "react-i18next";
6
+ // @TODO fix issue with Poper, because we can't import DateRangeInput to our apps
6
7
  import type Popper from "@popperjs/core";
7
8
  import { useId } from "@react-aria/utils";
8
9
  import { Icon } from "..";
@@ -15,7 +16,7 @@ import {
15
16
  import "react-date-range/dist/styles.css";
16
17
  import "react-date-range/dist/theme/default.css";
17
18
 
18
- export type DateRangeInputProps = {
19
+ type DateRangeInputProps = {
19
20
  placeholder: string;
20
21
  startDate?: string;
21
22
  endDate?: string;
package/src/styles/iframe-events/ActivitiesCard.scss ADDED
@@ -0,0 +1,55 @@
1
+ @import "../snippet-templates/snippetVariables";
2
+
3
+ .iframe-activities-card {
4
+ position: relative;
5
+ border: 2px solid transparent;
6
+ transition: $color-transition;
7
+ color: $snippet-elements-body-color;
8
+ border-radius: 0.3rem;
9
+ padding: .375rem;
10
+ min-height: 12.5rem;
11
+ width: 12.375rem;
12
+ flex-direction: column;
13
+ word-wrap: break-word;
14
+ background-color: #fff;
15
+ background-clip: border-box;
16
+
17
+ &.active {
18
+ border: 2px solid #0E8BE1;
19
+ }
20
+
21
+ .card-image {
22
+ width: 100%;
23
+ height: 6.3rem;
24
+ background-repeat: no-repeat;
25
+ background-size: cover;
26
+ background-position: center;
27
+ cursor: pointer;
28
+ border: 1px solid transparent;
29
+ margin-bottom: .5rem;
30
+ border-radius: .3rem;
31
+ }
32
+
33
+
34
+ .title {
35
+ transition: $color-transition;
36
+ color: $snippet-elements-body-color;
37
+ font-weight: 600;
38
+ line-height: 1.25rem;
39
+ cursor: pointer;
40
+ font-size: .875rem;
41
+ }
42
+
43
+ .cost {
44
+ transition: $color-transition;
45
+ color: $snippet-elements-body-color;
46
+ font-size: 0.8rem;
47
+ }
48
+
49
+ .label {
50
+ text-transform: lowercase;
51
+ transition: $color-transition;
52
+ color: $snippet-elements-body-color;
53
+ font-size: 0.8rem;
54
+ }
55
+ }
package/src/styles/iframe-events/ActivitiesSelectedCard.scss ADDED
@@ -0,0 +1,52 @@
1
+ @import "../snippet-templates/snippetVariables";
2
+
3
+ .selected-activities-card {
4
+ display: flex;
5
+ justify-content: space-between;
6
+ align-items: center;
7
+ cursor: pointer;
8
+ height: 5rem;
9
+ border: 1px solid $snippet-product-set-border-color;
10
+ background-color: $snippet-product-set-background-color;
11
+ color: $snippet-product-set-font-color;
12
+ transition: $color-transition;
13
+
14
+ p {
15
+ margin-bottom: 0;
16
+ }
17
+
18
+ .description {
19
+ width: 70%;
20
+ font-size: .81rem;
21
+ display: flex;
22
+ flex-direction: column;
23
+ }
24
+
25
+ .title {
26
+ font-weight: 600;
27
+ font-size: 0.875rem;
28
+ line-height: 1.5rem;
29
+ }
30
+
31
+ .image-container {
32
+ display: flex;
33
+ justify-content: start;
34
+ height: 100%;
35
+
36
+ .image {
37
+ display: flex;
38
+ align-items: start;
39
+ width: 7rem;
40
+ height: 4rem;
41
+ margin-left: 3rem;
42
+ background-repeat: no-repeat;
43
+ background-size: cover;
44
+ background-position: center;
45
+ border-radius: 0.5rem;
46
+ }
47
+ }
48
+ }
49
+
50
+ .selected-activities-card-hr {
51
+ margin-top: 0;
52
+ }
package/src/styles/iframe-events/_index.scss CHANGED
@@ -15,4 +15,6 @@
15
15
  @import "./CalendarSelect.scss";
16
16
  @import "./EventStepVenueMapZones.scss";
17
17
  @import "./CategoryStepsForm.scss";
18
+ @import "./ActivitiesSelectedCard.scss";
18
19
  @import "./SelectDateAndTimeEvent.scss";
20
+ @import "./ActivitiesCard.scss";
package/src/styles/sales/RandomColors.scss CHANGED
@@ -1,17 +1,20 @@
1
1
  .random-color {
2
2
  &-blue {
3
- background-color: #E4F9FF;
3
+ background-color: #e4f9ff;
4
4
  }
5
5
 
6
6
  &-yellow {
7
- background-color: #F7F4C1;
7
+ background-color: #f7f4c1;
8
8
  }
9
9
 
10
10
  &-green {
11
- background-color: #E4FFF3;
11
+ background-color: #e4fff3;
12
12
  }
13
13
 
14
14
  &-pink {
15
- background-color: #FFE4F8;
15
+ background-color: #ffe4f8;
16
+ }
17
+ &-violet {
18
+ background-color: #e4e4ff;
16
19
  }
17
20
  }
package/src/styles/themes/bookedit/_variables.scss CHANGED
@@ -38,7 +38,7 @@ $blue: #0e8ce2;
38
38
  $indigo: #6610f2 !default;
39
39
  $purple: #6f42c1 !default;
40
40
  $pink: #e83e8c !default;
41
- $dark-pink: #E20E58 !default;
41
+ $dark-pink: #e20e58 !default;
42
42
  $red: #f94b25;
43
43
  $orange: #fd7e14 !default;
44
44
  $yellow: #ffc107 !default;
@@ -65,7 +65,7 @@ $colors: (
65
65
  "gray": $gray-600,
66
66
  "gray-dark": $gray-800,
67
67
  "light-yellow": $light-yellow,
68
- "dark-pink": $dark-pink
68
+ "dark-pink": $dark-pink,
69
69
  );
70
70
 
71
71
  $primary: $blue !default;
@@ -231,6 +231,7 @@ $line-height-lg: 1.5 !default;
231
231
  $line-height-sm: 1.5 !default;
232
232
 
233
233
  $border-width: 1px !default;
234
+ $calendar-border: 2px solid #f2f2f2;
234
235
  $border-color: $gray-300 !default;
235
236
 
236
237
  $border-radius: 1rem;