@qite/tide-booking-component 0.0.2-preview.40 → 0.0.2-preview.41

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 (8) hide show
  1. package/build/build-cjs/booking-wizard/components/product-card.d.ts +1 -0
  2. package/build/build-cjs/index.js +12 -6
  3. package/build/build-esm/booking-wizard/components/product-card.d.ts +1 -0
  4. package/build/build-esm/index.js +12 -6
  5. package/package.json +1 -1
  6. package/src/booking-wizard/components/product-card.tsx +7 -0
  7. package/src/booking-wizard/features/booking/booking.tsx +6 -4
  8. package/src/booking-wizard/features/sidebar/sidebar.tsx +13 -3
package/build/build-cjs/booking-wizard/components/product-card.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from "react";
2
2
  interface ProductCardProps {
3
3
  productName: string;
4
4
  thumbnailUrl?: string;
5
+ handleToggleClick: () => void;
5
6
  }
6
7
  declare const ProductCard: React.FC<ProductCardProps>;
7
8
  export default ProductCard;
package/build/build-cjs/index.js CHANGED
@@ -7944,27 +7944,32 @@ var OptionsForm = function () {
7944
7944
  };
7945
7945
 
7946
7946
  var ProductCard = function (_a) {
7947
- var productName = _a.productName, thumbnailUrl = _a.thumbnailUrl;
7947
+ var productName = _a.productName, thumbnailUrl = _a.thumbnailUrl, handleToggleClick = _a.handleToggleClick;
7948
7948
  return (React__default["default"].createElement("div", { className: "booking__product" },
7949
7949
  React__default["default"].createElement("div", { className: "booking__product-image" }, thumbnailUrl && (React__default["default"].createElement("img", { src: thumbnailUrl + "?height=100&width=100", alt: productName, className: "mediacontent" }))),
7950
7950
  React__default["default"].createElement("div", { className: "booking__product-text" },
7951
- React__default["default"].createElement("h3", { className: "booking__product-heading" }, productName))));
7951
+ React__default["default"].createElement("h3", { className: "booking__product-heading" }, productName)),
7952
+ React__default["default"].createElement("button", { type: "button", className: "booking__product-toggle", onClick: handleToggleClick })));
7952
7953
  };
7953
7954
 
7954
7955
  var Sidebar = function (_a) {
7955
7956
  var productName = _a.productName, thumbnailUrl = _a.thumbnailUrl, isLoading = _a.isLoading, travelersText = _a.travelersText, startDateText = _a.startDateText, endDateText = _a.endDateText, departureFlightText = _a.departureFlightText, returnFlightText = _a.returnFlightText, basePrice = _a.basePrice, totalPrice = _a.totalPrice, includedCosts = _a.includedCosts, extraCosts = _a.extraCosts, deposit = _a.deposit, showAccommodationInfo = _a.showAccommodationInfo, headerComponent = _a.headerComponent, footerComponent = _a.footerComponent, loaderComponent = _a.loaderComponent;
7957
+ var _b = React.useState(false), active = _b[0], setActive = _b[1];
7956
7958
  var canShowPriceBreakdownSection = Boolean(basePrice && basePrice > 0) ||
7957
7959
  !lodash.isEmpty(includedCosts) ||
7958
7960
  !lodash.isEmpty(extraCosts);
7959
7961
  var canShowTotalPriceSection = Boolean(totalPrice && totalPrice > 0);
7960
7962
  var remainingAmount = (totalPrice !== null && totalPrice !== void 0 ? totalPrice : 0) - (deposit !== null && deposit !== void 0 ? deposit : 0);
7963
+ var handleToggleClick = function () {
7964
+ setActive(!active);
7965
+ };
7961
7966
  return (React__default["default"].createElement("div", { className: buildClassName([
7962
7967
  "booking__sidebar",
7963
- "booking__sidebar--active",
7968
+ active && "booking__sidebar--active",
7964
7969
  ]) },
7965
7970
  headerComponent,
7966
7971
  React__default["default"].createElement("div", { className: "booking__sidebar-frame" },
7967
- React__default["default"].createElement(ProductCard, { productName: productName, thumbnailUrl: thumbnailUrl }),
7972
+ React__default["default"].createElement(ProductCard, { productName: productName, thumbnailUrl: thumbnailUrl, handleToggleClick: handleToggleClick }),
7968
7973
  React__default["default"].createElement("div", { className: "pricing-summary" },
7969
7974
  React__default["default"].createElement("div", { className: "pricing-summary__region" },
7970
7975
  React__default["default"].createElement("div", { className: "pricing-summary__group" },
@@ -8695,8 +8700,9 @@ var Booking = function (_a) {
8695
8700
  React__default["default"].createElement("div", { className: "backdrop", id: "backdrop" }),
8696
8701
  React__default["default"].createElement(SidebarContainer, { productName: productName, thumbnailUrl: thumbnailUrl })))),
8697
8702
  !packageDetails && !bookingNumber && (React__default["default"].createElement("div", { className: "booking" },
8698
- loaderComponent,
8699
- React__default["default"].createElement("p", { className: "booking__preparation-text" }, translations.MAIN.PREPARING_BOOKING)))));
8703
+ React__default["default"].createElement("div", { className: "booking__loader" },
8704
+ loaderComponent,
8705
+ React__default["default"].createElement("p", { className: "booking__loader-text" }, translations.MAIN.PREPARING_BOOKING))))));
8700
8706
  };
8701
8707
 
8702
8708
  var BookingWizard = function (_a) {
package/build/build-esm/booking-wizard/components/product-card.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from "react";
2
2
  interface ProductCardProps {
3
3
  productName: string;
4
4
  thumbnailUrl?: string;
5
+ handleToggleClick: () => void;
5
6
  }
6
7
  declare const ProductCard: React.FC<ProductCardProps>;
7
8
  export default ProductCard;
package/build/build-esm/index.js CHANGED
@@ -7933,27 +7933,32 @@ var OptionsForm = function () {
7933
7933
  };
7934
7934
 
7935
7935
  var ProductCard = function (_a) {
7936
- var productName = _a.productName, thumbnailUrl = _a.thumbnailUrl;
7936
+ var productName = _a.productName, thumbnailUrl = _a.thumbnailUrl, handleToggleClick = _a.handleToggleClick;
7937
7937
  return (React.createElement("div", { className: "booking__product" },
7938
7938
  React.createElement("div", { className: "booking__product-image" }, thumbnailUrl && (React.createElement("img", { src: thumbnailUrl + "?height=100&width=100", alt: productName, className: "mediacontent" }))),
7939
7939
  React.createElement("div", { className: "booking__product-text" },
7940
- React.createElement("h3", { className: "booking__product-heading" }, productName))));
7940
+ React.createElement("h3", { className: "booking__product-heading" }, productName)),
7941
+ React.createElement("button", { type: "button", className: "booking__product-toggle", onClick: handleToggleClick })));
7941
7942
  };
7942
7943
 
7943
7944
  var Sidebar = function (_a) {
7944
7945
  var productName = _a.productName, thumbnailUrl = _a.thumbnailUrl, isLoading = _a.isLoading, travelersText = _a.travelersText, startDateText = _a.startDateText, endDateText = _a.endDateText, departureFlightText = _a.departureFlightText, returnFlightText = _a.returnFlightText, basePrice = _a.basePrice, totalPrice = _a.totalPrice, includedCosts = _a.includedCosts, extraCosts = _a.extraCosts, deposit = _a.deposit, showAccommodationInfo = _a.showAccommodationInfo, headerComponent = _a.headerComponent, footerComponent = _a.footerComponent, loaderComponent = _a.loaderComponent;
7946
+ var _b = useState(false), active = _b[0], setActive = _b[1];
7945
7947
  var canShowPriceBreakdownSection = Boolean(basePrice && basePrice > 0) ||
7946
7948
  !isEmpty(includedCosts) ||
7947
7949
  !isEmpty(extraCosts);
7948
7950
  var canShowTotalPriceSection = Boolean(totalPrice && totalPrice > 0);
7949
7951
  var remainingAmount = (totalPrice !== null && totalPrice !== void 0 ? totalPrice : 0) - (deposit !== null && deposit !== void 0 ? deposit : 0);
7952
+ var handleToggleClick = function () {
7953
+ setActive(!active);
7954
+ };
7950
7955
  return (React.createElement("div", { className: buildClassName([
7951
7956
  "booking__sidebar",
7952
- "booking__sidebar--active",
7957
+ active && "booking__sidebar--active",
7953
7958
  ]) },
7954
7959
  headerComponent,
7955
7960
  React.createElement("div", { className: "booking__sidebar-frame" },
7956
- React.createElement(ProductCard, { productName: productName, thumbnailUrl: thumbnailUrl }),
7961
+ React.createElement(ProductCard, { productName: productName, thumbnailUrl: thumbnailUrl, handleToggleClick: handleToggleClick }),
7957
7962
  React.createElement("div", { className: "pricing-summary" },
7958
7963
  React.createElement("div", { className: "pricing-summary__region" },
7959
7964
  React.createElement("div", { className: "pricing-summary__group" },
@@ -8684,8 +8689,9 @@ var Booking = function (_a) {
8684
8689
  React.createElement("div", { className: "backdrop", id: "backdrop" }),
8685
8690
  React.createElement(SidebarContainer, { productName: productName, thumbnailUrl: thumbnailUrl })))),
8686
8691
  !packageDetails && !bookingNumber && (React.createElement("div", { className: "booking" },
8687
- loaderComponent,
8688
- React.createElement("p", { className: "booking__preparation-text" }, translations.MAIN.PREPARING_BOOKING)))));
8692
+ React.createElement("div", { className: "booking__loader" },
8693
+ loaderComponent,
8694
+ React.createElement("p", { className: "booking__loader-text" }, translations.MAIN.PREPARING_BOOKING))))));
8689
8695
  };
8690
8696
 
8691
8697
  var BookingWizard = function (_a) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qite/tide-booking-component",
3
- "version": "0.0.2-preview.40",
3
+ "version": "0.0.2-preview.41",
4
4
  "description": "React BookingWizard component for Tide",
5
5
  "main": "build/build-cjs/index.js",
6
6
  "module": "build/build-esm/index.js",
package/src/booking-wizard/components/product-card.tsx CHANGED
@@ -3,11 +3,13 @@ import React from "react";
3
3
  interface ProductCardProps {
4
4
  productName: string;
5
5
  thumbnailUrl?: string;
6
+ handleToggleClick: () => void;
6
7
  }
7
8
 
8
9
  const ProductCard: React.FC<ProductCardProps> = ({
9
10
  productName,
10
11
  thumbnailUrl,
12
+ handleToggleClick,
11
13
  }) => {
12
14
  return (
13
15
  <div className="booking__product">
@@ -23,6 +25,11 @@ const ProductCard: React.FC<ProductCardProps> = ({
23
25
  <div className="booking__product-text">
24
26
  <h3 className="booking__product-heading">{productName}</h3>
25
27
  </div>
28
+ <button
29
+ type="button"
30
+ className="booking__product-toggle"
31
+ onClick={handleToggleClick}
32
+ ></button>
26
33
  </div>
27
34
  );
28
35
  };
package/src/booking-wizard/features/booking/booking.tsx CHANGED
@@ -248,10 +248,12 @@ const Booking: React.FC<BookingProps> = ({
248
248
  )}
249
249
  {!packageDetails && !bookingNumber && (
250
250
  <div className="booking">
251
- {loaderComponent}
252
- <p className="booking__preparation-text">
253
- {translations.MAIN.PREPARING_BOOKING}
254
- </p>
251
+ <div className="booking__loader">
252
+ {loaderComponent}
253
+ <p className="booking__loader-text">
254
+ {translations.MAIN.PREPARING_BOOKING}
255
+ </p>
256
+ </div>
255
257
  </div>
256
258
  )}
257
259
  </>
package/src/booking-wizard/features/sidebar/sidebar.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import React, { useState } from "react";
2
2
  import { formatPrice } from "../../utils/localization-util";
3
3
  import translations from "../../translations/translations.json";
4
4
  import { compact, isEmpty } from "lodash";
@@ -46,6 +46,8 @@ const Sidebar: React.FC<SidebarProps> = ({
46
46
  footerComponent,
47
47
  loaderComponent,
48
48
  }) => {
49
+ const [active, setActive] = useState<boolean>(false);
50
+
49
51
  const canShowPriceBreakdownSection =
50
52
  Boolean(basePrice && basePrice > 0) ||
51
53
  !isEmpty(includedCosts) ||
@@ -54,17 +56,25 @@ const Sidebar: React.FC<SidebarProps> = ({
54
56
 
55
57
  const remainingAmount = (totalPrice ?? 0) - (deposit ?? 0);
56
58
 
59
+ const handleToggleClick = () => {
60
+ setActive(!active);
61
+ };
62
+
57
63
  return (
58
64
  <div
59
65
  className={buildClassName([
60
66
  "booking__sidebar",
61
- "booking__sidebar--active",
67
+ active && "booking__sidebar--active",
62
68
  ])}
63
69
  >
64
70
  {headerComponent}
65
71
 
66
72
  <div className="booking__sidebar-frame">
67
- <ProductCard productName={productName} thumbnailUrl={thumbnailUrl} />
73
+ <ProductCard
74
+ productName={productName}
75
+ thumbnailUrl={thumbnailUrl}
76
+ handleToggleClick={handleToggleClick}
77
+ />
68
78
  <div className="pricing-summary">
69
79
  <div className="pricing-summary__region">
70
80
  <div className="pricing-summary__group">