@lookiero/checkout 14.7.0 → 14.8.0-beta.1

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 (72) hide show
  1. package/dist/public/public/assets/adaptive-icon.png +0 -0
  2. package/dist/public/public/assets/favicon.png +0 -0
  3. package/dist/public/public/assets/icon.png +0 -0
  4. package/dist/public/public/assets/splash.png +0 -0
  5. package/dist/public/public/images/not-found.png +0 -0
  6. package/dist/src/ExpoRoot.js +2 -3
  7. package/dist/src/infrastructure/delivery/bootstrap.mock.js +2 -2
  8. package/dist/src/infrastructure/projection/pricing/httpPricingByCheckoutIdView.js +2 -3
  9. package/dist/src/infrastructure/projection/pricing/pricing.d.ts +1 -18
  10. package/dist/src/infrastructure/projection/pricing/pricing.js +1 -12
  11. package/dist/src/infrastructure/projection/pricing/pricing.mock.d.ts +2 -9
  12. package/dist/src/infrastructure/projection/pricing/pricing.mock.js +10 -50
  13. package/dist/src/infrastructure/projection/pricing/react/useViewPricingByCheckoutId.d.ts +2 -2
  14. package/dist/src/infrastructure/tracking/useTrackCheckout.d.ts +2 -2
  15. package/dist/src/infrastructure/tracking/useTrackCheckout.js +3 -3
  16. package/dist/src/infrastructure/ui/components/atoms/price/Price.d.ts +7 -2
  17. package/dist/src/infrastructure/ui/components/atoms/price/Price.js +7 -7
  18. package/dist/src/infrastructure/ui/views/checkout/Checkout.js +2 -2
  19. package/dist/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.js +1 -1
  20. package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.js +2 -1
  21. package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/components/aspectRatioView/AspectRatioView.d.ts +15 -0
  22. package/dist/src/infrastructure/ui/views/item/components/productVariantSlider/components/aspectRatioView/AspectRatioView.js +16 -0
  23. package/dist/src/infrastructure/ui/views/return/components/price/Price.d.ts +7 -2
  24. package/dist/src/infrastructure/ui/views/return/components/price/Price.js +7 -7
  25. package/dist/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.js +1 -1
  26. package/dist/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.js +1 -1
  27. package/dist/src/infrastructure/ui/views/summary/Summary.js +3 -3
  28. package/dist/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.d.ts +2 -5
  29. package/dist/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.js +4 -4
  30. package/dist/src/infrastructure/ui/views/summary/components/pricing/Pricing.d.ts +2 -5
  31. package/dist/src/infrastructure/ui/views/summary/components/pricing/Pricing.js +16 -18
  32. package/dist/src/projection/customer/customer.d.ts +0 -1
  33. package/dist/src/projection/pricing/pricing.d.ts +6 -24
  34. package/dist/src/projection/pricing/pricing.js +1 -1
  35. package/dist/src/projection/pricing/viewPricingByCheckoutId.d.ts +2 -2
  36. package/dist/src/version.d.ts +2 -2
  37. package/dist/src/version.js +2 -2
  38. package/package.json +1 -1
  39. package/src/ExpoRoot.tsx +2 -3
  40. package/src/infrastructure/delivery/bootstrap.mock.ts +2 -2
  41. package/src/infrastructure/projection/pricing/httpPricingByCheckoutIdView.test.ts +3 -7
  42. package/src/infrastructure/projection/pricing/httpPricingByCheckoutIdView.ts +3 -8
  43. package/src/infrastructure/projection/pricing/pricing.mock.ts +11 -61
  44. package/src/infrastructure/projection/pricing/react/useViewPricingByCheckoutId.test.ts +3 -3
  45. package/src/infrastructure/projection/pricing/react/useViewPricingByCheckoutId.ts +2 -2
  46. package/src/infrastructure/tracking/useTrackCheckout.test.tsx +9 -9
  47. package/src/infrastructure/tracking/useTrackCheckout.ts +5 -5
  48. package/src/infrastructure/ui/components/atoms/price/Price.test.tsx +22 -4
  49. package/src/infrastructure/ui/components/atoms/price/Price.tsx +14 -9
  50. package/src/infrastructure/ui/hooks/useCheckoutFlow.test.tsx +2 -2
  51. package/src/infrastructure/ui/views/checkout/Checkout.test.tsx +4 -10
  52. package/src/infrastructure/ui/views/checkout/Checkout.tsx +2 -7
  53. package/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.tsx +1 -1
  54. package/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.tsx +1 -1
  55. package/src/infrastructure/ui/views/item/components/productVariantSlider/__snapshots__/ProductVariantSlider.test.tsx.snap +198 -192
  56. package/src/infrastructure/ui/views/item/components/productVariantSlider/components/aspectRatioView/AspectRatioView.tsx +46 -0
  57. package/src/infrastructure/ui/views/item/views/productVariant/__snapshots__/ProductVariant.test.tsx.snap +594 -576
  58. package/src/infrastructure/ui/views/return/components/price/Price.test.tsx +22 -4
  59. package/src/infrastructure/ui/views/return/components/price/Price.tsx +14 -9
  60. package/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.tsx +6 -1
  61. package/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.tsx +6 -1
  62. package/src/infrastructure/ui/views/summary/Summary.test.tsx +4 -10
  63. package/src/infrastructure/ui/views/summary/Summary.tsx +1 -5
  64. package/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.test.tsx +10 -24
  65. package/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.tsx +5 -15
  66. package/src/infrastructure/ui/views/summary/components/collapsiblePricing/__snapshots__/CollapsiblePricing.test.tsx.snap +2 -2
  67. package/src/infrastructure/ui/views/summary/components/pricing/Pricing.tsx +42 -38
  68. package/src/projection/customer/customer.ts +0 -1
  69. package/src/projection/pricing/pricing.ts +6 -26
  70. package/src/projection/pricing/viewPricingByCheckoutId.test.ts +4 -5
  71. package/src/projection/pricing/viewPricingByCheckoutId.ts +2 -2
  72. package/src/infrastructure/projection/pricing/pricing.ts +0 -32
@@ -20,12 +20,11 @@ const tradename = Tradename.LOOKIERO;
20
20
  const theme = themeByTradename({ tradename });
21
21
  const locale = Locale.es_ES;
22
22
  const customer = {
23
- customerId: "ec091fb1-04f3-46da-8262-aab5c88e0b3a",
23
+ customerId: "0d26cc55-b59e-4cde-971d-e587673f691e",
24
24
  country: Country.ES,
25
25
  segment: Segment.WOMEN,
26
26
  email: "email@example.com",
27
27
  name: "Adèle Léonce Émilie",
28
- migrated: false,
29
28
  };
30
29
  const sentryConfig = {
31
30
  publicKey: "66cadf9444db4ea5945670f12ec08ae7",
@@ -41,7 +40,7 @@ const apiUrl = Platform.OS !== "web"
41
40
  ? "/local-to-dev"
42
41
  : "http://localhost:3004/local-to-dev"
43
42
  : "/checkout/api";
44
- const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzNzIyNDE2LCJleHAiOjE3NzE4NzQ4OTgsImRpc3BsYXlOYW1lIjoibWFpbC5kZXYrdGRwLjUzYWI2MmI5LTQwYTYtNDkwOC1iMGM0LWM3ZDRiNDZhODU2N0Bsb29raWVyby5jb20iLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwidHJhZGVuYW1lIjoiTE9PS0lFUk8iLCJ1dWlkIjoiZWMwOTFmYjEtMDRmMy00NmRhLTgyNjItYWFiNWM4OGUwYjNhIiwiaWF0IjoxNzcxODQ2MDk4fQ.UKFl9pA4d1t9uR2iGVMc6XuwPbfUI_XWEbovie-Z_RI";
43
+ const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzNzI0MjA2LCJleHAiOjE3NzMyNTgxNDYsImRpc3BsYXlOYW1lIjoibWFpbC5kZXYrdGRwLmMwN2NiYTQ3LTc5MDUtNDE0Yi04Y2ViLTIzZDIxMTgyZDgzMEBsb29raWVyby5jb20iLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwidHJhZGVuYW1lIjoiTE9PS0lFUk8iLCJ1dWlkIjoiMGQyNmNjNTUtYjU5ZS00Y2RlLTk3MWQtZTU4NzY3M2Y2OTFlIiwiaWF0IjoxNzczMjI5MzQ2fQ.qEd3wCB6qbMBCZnOWa3sa_aC-FDJe_f1AshhXYq1MIM";
45
44
  const getAuthToken = () => Promise.resolve(authToken);
46
45
  const useRedirect = () => ({
47
46
  returnUrl: "https://web2.dev.aws.lookiero.es/user/",
@@ -6,7 +6,7 @@ import { checkoutFeedback as checkoutFeedbackMock } from "../projection/checkout
6
6
  import { checkoutFeedbackDefinition as checkoutFeedbackDefinitionMock } from "../projection/checkoutFeedback/checkoutFeedbackDefinition.mock";
7
7
  import { feedback as feedbackMock } from "../projection/feedback/feedback.mock";
8
8
  import { paymentFlowPayload as paymentFlowPayloadMock } from "../projection/payment/paymentFlowPayload.mock";
9
- import { pricing as pricingMock } from "../projection/pricing/pricing.mock";
9
+ import { mockCheckoutPricingProjection } from "../projection/pricing/pricing.mock";
10
10
  import { returnQuestions as returnQuestionsMock } from "../projection/returnQuestion/returnQuestions.mock";
11
11
  import { baseBootstrap } from "./baseBootstrap";
12
12
  import { checkoutBookingDataSource } from "./mock/checkoutBookingDataSource";
@@ -52,7 +52,7 @@ const checkoutItemByIdView = async ({ checkoutItemId }) => dataSource.getCheckou
52
52
  const returnQuestionsByCheckoutItemIdView = async () => returnQuestionsMock;
53
53
  const checkoutBookingByIdView = async () => checkoutBookingMock;
54
54
  const bookedProductsVariantsForCheckoutItemView = async () => bookedProductsVariants;
55
- const pricingByCheckoutIdView = async () => pricingMock();
55
+ const pricingByCheckoutIdView = async () => mockCheckoutPricingProjection;
56
56
  const paymentFlowPayloadByCheckoutIdView = async () => paymentFlowPayloadMock;
57
57
  const checkoutFeedbackDefinitionByCheckoutIdView = async () => checkoutFeedbackDefinitionMock;
58
58
  const bootstrap = () => baseBootstrap({
@@ -1,11 +1,10 @@
1
- import { toPricingProjection } from "./pricing";
2
1
  const httpPricingByCheckoutIdView = ({ httpPost }) => async ({ checkoutId, signal }) => await httpPost({
3
- endpoint: "/view-pricing-by-checkout-id",
2
+ endpoint: "/view-checkout-pricing-by-checkout-id",
4
3
  body: { checkoutId },
5
4
  signal,
6
5
  result: {
7
6
  error: null,
8
- success: (response) => toPricingProjection(response.result),
7
+ success: (response) => response,
9
8
  },
10
9
  });
11
10
  export { httpPricingByCheckoutIdView };
@@ -1,18 +1 @@
1
- import { PriceProjection } from "../../../projection/price/price";
2
- import { PricingProjection, ServiceProjection } from "../../../projection/pricing/pricing";
3
- interface PricingDto {
4
- readonly balanceDiscount: PriceProjection;
5
- readonly discount: PriceProjection;
6
- readonly discountPercentage: number;
7
- readonly orderTotal: PriceProjection;
8
- readonly pendingToPay: PriceProjection;
9
- readonly service: ServiceProjection;
10
- readonly subtotal: PriceProjection;
11
- readonly paidWithPromocode?: boolean;
12
- }
13
- interface ToPricingProjectionFunction {
14
- (pricingDto: PricingDto): PricingProjection;
15
- }
16
- declare const toPricingProjection: ToPricingProjectionFunction;
17
- export type { PricingDto };
18
- export { toPricingProjection };
1
+ export {};
@@ -1,12 +1 @@
1
- const toPricingProjection = (pricingDto) => ({
2
- ...pricingDto,
3
- discount: {
4
- ...pricingDto.discount,
5
- amount: -Math.abs(pricingDto.discount.amount),
6
- },
7
- balanceDiscount: {
8
- ...pricingDto.balanceDiscount,
9
- amount: -Math.abs(pricingDto.balanceDiscount.amount),
10
- },
11
- });
12
- export { toPricingProjection };
1
+ export {};
@@ -1,10 +1,3 @@
1
- import { CheckoutPricingProjection, PricingProjection } from "../../../projection/pricing/pricing";
2
- interface PricingFunctionArgs {
3
- readonly paidWithPromocode: boolean;
4
- }
5
- interface PricingFunction {
6
- (args?: PricingFunctionArgs): PricingProjection;
7
- }
8
- declare const pricing: PricingFunction;
1
+ import { CheckoutPricingProjection } from "../../../projection/pricing/pricing";
9
2
  declare const mockCheckoutPricingProjection: CheckoutPricingProjection;
10
- export { pricing, mockCheckoutPricingProjection };
3
+ export { mockCheckoutPricingProjection };
@@ -1,69 +1,29 @@
1
1
  import { Currency } from "@lookiero/sty-psp-locale";
2
- import { CheckoutPrincingContext, CheckoutPrincingType, } from "../../../projection/pricing/pricing";
3
- const pricing = ({ paidWithPromocode } = { paidWithPromocode: false }) => ({
4
- orderTotal: {
5
- amount: 18301,
6
- currency: Currency.EUR,
7
- },
8
- pendingToPay: {
9
- amount: 16301,
10
- currency: Currency.EUR,
11
- },
12
- subtotal: {
13
- amount: 21801,
14
- currency: Currency.EUR,
15
- },
16
- discount: {
17
- amount: -2500,
18
- currency: Currency.EUR,
19
- },
20
- discountPercentage: 25,
21
- balanceDiscount: {
22
- amount: -2000,
23
- currency: Currency.EUR,
24
- },
25
- service: {
26
- reference: "LK-service",
27
- originalPrice: {
28
- amount: 10.0,
29
- currency: Currency.EUR,
30
- },
31
- discount: {
32
- amount: 0,
33
- currency: Currency.EUR,
34
- },
35
- finalPrice: {
36
- amount: -1000,
37
- currency: Currency.EUR,
38
- },
39
- prepaid: true,
40
- paidWithPromocode,
41
- },
42
- });
2
+ import { CheckoutPricingContext, CheckoutPricingType, } from "../../../projection/pricing/pricing";
43
3
  const mockCheckoutPricingProjection = {
44
4
  currency: Currency.EUR,
45
- final: 12127,
46
- original: 21195,
5
+ finalPrice: 12127,
6
+ originalPrice: 21195,
47
7
  modifiers: [
48
8
  {
49
9
  amount: 7068,
50
10
  percentage: 35,
51
- type: CheckoutPrincingType.DISCOUNT,
52
- context: CheckoutPrincingContext.PROMOCODE,
11
+ type: CheckoutPricingType.DISCOUNT,
12
+ context: CheckoutPricingContext.PROMOCODE,
53
13
  translationKey: "summary.discount",
54
14
  },
55
15
  {
56
16
  amount: 1000,
57
- type: CheckoutPrincingType.DISCOUNT,
58
- context: CheckoutPrincingContext.BALANCE,
17
+ type: CheckoutPricingType.DISCOUNT,
18
+ context: CheckoutPricingContext.BALANCE,
59
19
  translationKey: "summary.credit",
60
20
  },
61
21
  {
62
22
  amount: 1000,
63
- type: CheckoutPrincingType.DISCOUNT,
64
- context: CheckoutPrincingContext.PS_FEE,
23
+ type: CheckoutPricingType.DISCOUNT,
24
+ context: CheckoutPricingContext.PS_FEE,
65
25
  translationKey: "summary.fee",
66
26
  },
67
27
  ],
68
28
  };
69
- export { pricing, mockCheckoutPricingProjection };
29
+ export { mockCheckoutPricingProjection };
@@ -1,5 +1,5 @@
1
1
  import { UseQueryFunctionResult } from "@lookiero/messaging-react";
2
- import { PricingProjection } from "../../../../projection/pricing/pricing";
2
+ import { CheckoutPricingProjection } from "../../../../projection/pricing/pricing";
3
3
  interface QueryOptions {
4
4
  readonly refetchOnMount?: boolean | "always";
5
5
  }
@@ -8,7 +8,7 @@ interface UseViewPricingByCheckoutIdFunctionArgs {
8
8
  readonly queryOptions?: QueryOptions;
9
9
  }
10
10
  interface UseViewPricingByCheckoutIdFunction {
11
- (args: UseViewPricingByCheckoutIdFunctionArgs): UseQueryFunctionResult<PricingProjection>;
11
+ (args: UseViewPricingByCheckoutIdFunctionArgs): UseQueryFunctionResult<CheckoutPricingProjection>;
12
12
  }
13
13
  declare const useViewPricingByCheckoutId: UseViewPricingByCheckoutIdFunction;
14
14
  export { useViewPricingByCheckoutId };
@@ -2,14 +2,14 @@ import { Country } from "@lookiero/sty-psp-locale";
2
2
  import { Segment } from "@lookiero/sty-psp-segment";
3
3
  import { Tradename } from "@lookiero/sty-sp-tradename";
4
4
  import { CheckoutProjection } from "../../projection/checkout/checkout";
5
- import { PricingProjection } from "../../projection/pricing/pricing";
5
+ import { CheckoutPricingProjection } from "../../projection/pricing/pricing";
6
6
  import { CheckoutTrackingEvent } from "./tracking";
7
7
  interface TrackCheckoutFunction {
8
8
  (): CheckoutTrackingEvent;
9
9
  }
10
10
  interface UseTrackCheckoutFunctionArgs {
11
11
  readonly checkout: CheckoutProjection | undefined;
12
- readonly pricing: PricingProjection | undefined;
12
+ readonly pricing: CheckoutPricingProjection | undefined;
13
13
  readonly userId: string;
14
14
  readonly country: Country;
15
15
  readonly segment: Segment;
@@ -23,17 +23,17 @@ const useTrackCheckout = ({ checkout, pricing, segment, country, userId, tradena
23
23
  checkout: {
24
24
  actionField: {
25
25
  items: checkoutItemsKept.length || 0,
26
- currencyCode: pricing?.pendingToPay.currency,
26
+ currencyCode: pricing?.currency,
27
27
  // subscription,
28
28
  // coupon,
29
29
  // orderId: orderNumber,
30
- value: pricing?.pendingToPay.amount / 100,
30
+ value: pricing?.finalPrice / 100,
31
31
  },
32
32
  },
33
33
  },
34
34
  };
35
35
  return checkoutTrackingEvent;
36
- }, [checkout, country, pricing?.pendingToPay.amount, pricing?.pendingToPay.currency, segment, userId, tradename]);
36
+ }, [checkout, country, pricing?.finalPrice, pricing?.currency, segment, userId, tradename]);
37
37
  return trackCheckout;
38
38
  };
39
39
  export { useTrackCheckout };
@@ -1,8 +1,13 @@
1
1
  import { FC } from "react";
2
- import { PriceProjection } from "../../../../../projection/price/price";
2
+ import { Currency } from "@lookiero/sty-psp-locale";
3
3
  type PriceVariant = "default" | "detail" | "subtotal" | "total";
4
4
  interface PriceProps {
5
- readonly price: PriceProjection;
5
+ readonly amount: number;
6
+ readonly currency: Currency;
7
+ readonly discountedPrice?: {
8
+ readonly amount: number;
9
+ readonly percentage: number;
10
+ };
6
11
  readonly variant?: PriceVariant;
7
12
  readonly withPercentage?: boolean;
8
13
  }
@@ -10,19 +10,19 @@ const PRICE_VARIANT = {
10
10
  subtotal: { variant: "detail", level: 1 },
11
11
  total: { variant: "action", level: 2 },
12
12
  };
13
- const Price = ({ price, variant = "default", withPercentage = false }) => {
14
- const isDiscounted = price.discountedPrice && price.discountedPrice.percentage > 0;
13
+ const Price = ({ amount, currency, discountedPrice, variant = "default", withPercentage = false }) => {
14
+ const isDiscounted = discountedPrice && discountedPrice.percentage > 0;
15
15
  const productPrice = useI18nNumber({
16
16
  domain: DOMAIN,
17
- value: price.amount / 100,
17
+ value: amount / 100,
18
18
  style: "currency",
19
- currency: price.currency,
19
+ currency,
20
20
  });
21
21
  const productDiscountedPrice = useI18nNumber({
22
22
  domain: DOMAIN,
23
- value: (price.discountedPrice?.amount || 0) / 100,
23
+ value: (discountedPrice?.amount || 0) / 100,
24
24
  style: "currency",
25
- currency: price.currency,
25
+ currency,
26
26
  });
27
27
  const priceValue = isDiscounted ? productDiscountedPrice : productPrice;
28
28
  const style = useMemo(() => priceStyle(), []);
@@ -30,6 +30,6 @@ const Price = ({ price, variant = "default", withPercentage = false }) => {
30
30
  React.createElement(Text, { ...PRICE_VARIANT[variant], testID: "price-text" }, priceValue),
31
31
  isDiscounted && (React.createElement(View, { style: style.discountedPriceInfo },
32
32
  React.createElement(Text, { ...PRICE_VARIANT[variant], style: style.discountedPriceText, testID: "discounted-price-text" }, productPrice),
33
- withPercentage ? (React.createElement(Text, { ...PRICE_VARIANT[variant], style: style.discountedPercentage, testID: "discounted-percentage-text" }, `-${price.discountedPrice.percentage}%`)) : null))));
33
+ withPercentage ? (React.createElement(Text, { ...PRICE_VARIANT[variant], style: style.discountedPercentage, testID: "discounted-percentage-text" }, `-${discountedPrice.percentage}%`)) : null))));
34
34
  };
35
35
  export { Price };
@@ -26,7 +26,7 @@ import { style as checkoutStyle } from "./Checkout.style";
26
26
  import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
27
27
  import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
28
28
  const Checkout = ({ layout: Layout, getAuthToken, useRedirect, onCheckoutFlowSuccess }) => {
29
- const { customer: { customerId, country, segment, migrated }, basePath, tradename, } = useStaticInfo();
29
+ const { customer: { customerId, country, segment }, basePath, tradename, } = useStaticInfo();
30
30
  const screenSize = useScreenSize();
31
31
  const isDektopScreen = screenSize === "L";
32
32
  const style = useMemo(() => checkoutStyle(), []);
@@ -98,7 +98,7 @@ const Checkout = ({ layout: Layout, getAuthToken, useRedirect, onCheckoutFlowSuc
98
98
  country !== Country.NL && (React.createElement(View, { style: style.paymentSelector },
99
99
  React.createElement(PaymentInstrument, { useRedirect: useRedirect }))))),
100
100
  React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, isDektopScreen && style.desktopResume] }, pricing ? (React.createElement(View, { style: [style.princingWrapper, !isDektopScreen && style.princingWrapperSmall] },
101
- React.createElement(Pricing, { migrated: migrated, pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, tradename: tradename }),
101
+ React.createElement(Pricing, { pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0 }),
102
102
  isDektopScreen && React.createElement(PaymentButton, null))) : null))),
103
103
  pricing && !isDektopScreen ? (React.createElement(Sticky, { style: style.sticky, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined },
104
104
  React.createElement(Body, null,
@@ -18,7 +18,7 @@ const ProductVariantDescription = ({ brand, name, price, size: sizeProjection, c
18
18
  React.createElement(View, { style: style.content },
19
19
  React.createElement(Text, { level: 1, style: style.brand, variant: "detail" }, brand),
20
20
  React.createElement(Text, { level: 1, variant: "detailBold" }, name)),
21
- React.createElement(Price, { price: price, withPercentage: true })),
21
+ React.createElement(Price, { amount: price.amount, currency: price.currency, discountedPrice: price.discountedPrice, withPercentage: true })),
22
22
  React.createElement(Text, { level: 1, variant: "detail" }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)));
23
23
  };
24
24
  export { ProductVariantDescription };
@@ -1,9 +1,10 @@
1
1
  import React, { useCallback, useMemo, useState } from "react";
2
2
  import { View } from "react-native";
3
- import { AspectRatioView, Bullets, Carousel, LazyImage, useScreenSize, } from "@lookiero/sty-psp-ui";
3
+ import { Bullets, Carousel, LazyImage, useScreenSize, } from "@lookiero/sty-psp-ui";
4
4
  import { MediaPerspective } from "../../../../../../projection/checkoutItem/checkoutItem";
5
5
  import { useMediaImage } from "../../../../hooks/useMediaImage";
6
6
  import { style as productVariantSliderStyle } from "./ProductVariantSlider.style";
7
+ import { AspectRatioView } from "./components/aspectRatioView/AspectRatioView";
7
8
  const ProductVariantSlider = ({ producVariantMedia, onChanged, availableHeight }) => {
8
9
  const cdnImageUrl = useMediaImage();
9
10
  const screenSize = useScreenSize();
@@ -0,0 +1,15 @@
1
+ import { FC, ReactNode } from "react";
2
+ import { StyleProp, ViewStyle } from "react-native";
3
+ declare enum AspectRatioViewResizeDirection {
4
+ VERTICAL = "VERTICAL",
5
+ HORIZONTAL = "HORIZONTAL"
6
+ }
7
+ interface AspectRatioViewProps {
8
+ readonly children: ReactNode;
9
+ readonly aspectRatio?: number;
10
+ readonly resizeDirection?: AspectRatioViewResizeDirection;
11
+ readonly multiplier?: number;
12
+ readonly style?: StyleProp<ViewStyle>;
13
+ }
14
+ declare const AspectRatioView: FC<AspectRatioViewProps>;
15
+ export { AspectRatioView, AspectRatioViewResizeDirection };
@@ -0,0 +1,16 @@
1
+ import React, { useCallback, useState } from "react";
2
+ import { View } from "react-native";
3
+ var AspectRatioViewResizeDirection;
4
+ (function (AspectRatioViewResizeDirection) {
5
+ AspectRatioViewResizeDirection["VERTICAL"] = "VERTICAL";
6
+ AspectRatioViewResizeDirection["HORIZONTAL"] = "HORIZONTAL";
7
+ })(AspectRatioViewResizeDirection || (AspectRatioViewResizeDirection = {}));
8
+ const AspectRatioView = ({ aspectRatio = 1, resizeDirection = AspectRatioViewResizeDirection.HORIZONTAL, multiplier = 1, style: customStyle = {}, children, }) => {
9
+ const [{ width, height }, setDimension] = useState({});
10
+ const handleOnLayout = useCallback(({ nativeEvent: { layout } }) => setDimension(resizeDirection === AspectRatioViewResizeDirection.HORIZONTAL
11
+ ? { width: layout.width * multiplier, height: layout.width * aspectRatio }
12
+ : { width: layout.height * aspectRatio, height: layout.height }), [aspectRatio, multiplier, resizeDirection]);
13
+ return (React.createElement(View, { onLayout: handleOnLayout },
14
+ React.createElement(View, { style: [{ width, height }, customStyle] }, children)));
15
+ };
16
+ export { AspectRatioView, AspectRatioViewResizeDirection };
@@ -1,7 +1,12 @@
1
1
  import { FC } from "react";
2
- import { PriceProjection } from "../../../../../../projection/price/price";
2
+ import { Currency } from "@lookiero/sty-psp-locale";
3
3
  interface PriceProps {
4
- readonly price: PriceProjection;
4
+ readonly amount: number;
5
+ readonly currency: Currency;
6
+ readonly discountedPrice?: {
7
+ readonly amount: number;
8
+ readonly percentage: number;
9
+ };
5
10
  readonly withPercentage?: boolean;
6
11
  }
7
12
  declare const Price: FC<PriceProps>;
@@ -4,19 +4,19 @@ import { useI18nNumber } from "@lookiero/i18n-react";
4
4
  import { Text } from "@lookiero/sty-psp-ui";
5
5
  import { DOMAIN } from "../../../../i18n/i18n";
6
6
  import { style as priceStyle } from "./Price.style";
7
- const Price = ({ price, withPercentage = false }) => {
8
- const isDiscounted = price.discountedPrice && price.discountedPrice.percentage > 0;
7
+ const Price = ({ amount, currency, discountedPrice, withPercentage = false }) => {
8
+ const isDiscounted = discountedPrice && discountedPrice.percentage > 0;
9
9
  const productPrice = useI18nNumber({
10
10
  domain: DOMAIN,
11
- value: price.amount / 100,
11
+ value: amount / 100,
12
12
  style: "currency",
13
- currency: price.currency,
13
+ currency,
14
14
  });
15
15
  const productDiscountedPrice = useI18nNumber({
16
16
  domain: DOMAIN,
17
- value: (price.discountedPrice?.amount || 0) / 100,
17
+ value: (discountedPrice?.amount || 0) / 100,
18
18
  style: "currency",
19
- currency: price.currency,
19
+ currency,
20
20
  });
21
21
  const priceValue = isDiscounted ? productDiscountedPrice : productPrice;
22
22
  const style = useMemo(() => priceStyle(), []);
@@ -24,6 +24,6 @@ const Price = ({ price, withPercentage = false }) => {
24
24
  isDiscounted && (React.createElement(Text, { level: 1, style: style.discountedPriceText, testID: "discounted-price-text", variant: "detail" }, productPrice)),
25
25
  React.createElement(View, { style: style.discountedPriceInfo },
26
26
  React.createElement(Text, { level: 1, testID: "price-text", variant: "detail" }, priceValue),
27
- isDiscounted && withPercentage ? (React.createElement(Text, { level: 1, style: style.discountedPercentage, testID: "discounted-percentage-text", variant: "detail" }, `-${price.discountedPrice.percentage}%`)) : null)));
27
+ isDiscounted && withPercentage ? (React.createElement(Text, { level: 1, style: style.discountedPercentage, testID: "discounted-percentage-text", variant: "detail" }, `-${discountedPrice.percentage}%`)) : null)));
28
28
  };
29
29
  export { Price };
@@ -30,6 +30,6 @@ const ProductVariantPreview = ({ item, country }) => {
30
30
  React.createElement(Text, { level: 2, variant: "detail" }, name),
31
31
  React.createElement(Text, { level: 2, style: style.text, variant: "detail" }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)),
32
32
  React.createElement(View, { style: style.price },
33
- React.createElement(Price, { price: price, withPercentage: true }))))));
33
+ React.createElement(Price, { amount: price.amount, currency: price.currency, discountedPrice: price.discountedPrice, withPercentage: true }))))));
34
34
  };
35
35
  export { ProductVariantPreview };
@@ -29,7 +29,7 @@ const ProductVariant = ({ media, brand, name, price, size: sizeProjection, color
29
29
  colorLabel),
30
30
  status === CheckoutItemStatus.REPLACED && (React.createElement(View, { style: style.sizeChange },
31
31
  React.createElement(Text, { level: 2, variant: "detail" }, sizeChangeText)))),
32
- React.createElement(Price, { price: price, variant: "detail" }))),
32
+ React.createElement(Price, { amount: price.amount, currency: price.currency, discountedPrice: price.discountedPrice, variant: "detail" }))),
33
33
  onPress && React.createElement(Icon, { name: "arrow_right" })));
34
34
  };
35
35
  export { ProductVariant };
@@ -21,7 +21,7 @@ import { Routes } from "../../routing/routes";
21
21
  import { style as summaryStyle } from "./Summary.style";
22
22
  import { CollapsiblePricing } from "./components/collapsiblePricing/CollapsiblePricing";
23
23
  const Summary = ({ layout: Layout, children }) => {
24
- const { customer: { customerId, country, segment, migrated }, basePath, tradename, } = useStaticInfo();
24
+ const { customer: { customerId, country, segment }, basePath, tradename, } = useStaticInfo();
25
25
  const screenSize = useScreenSize();
26
26
  const isDesktopScreen = screenSize === "L";
27
27
  const style = useMemo(() => summaryStyle(), []);
@@ -97,9 +97,9 @@ const Summary = ({ layout: Layout, children }) => {
97
97
  children)),
98
98
  pricing && isDesktopScreen ? (React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, isDesktopScreen ? style.desktopResume : style.mobileResume] },
99
99
  React.createElement(View, { style: style.princingWrapper },
100
- React.createElement(CollapsiblePricing, { collapsed: false, collapsible: false, migrated: migrated, pricing: pricing, submitButtonText: submitButtonText, totalCheckoutItemsKept: totalCheckoutItemsKept, tradename: tradename, onSubmit: handleOnSubmit })))) : null)),
100
+ React.createElement(CollapsiblePricing, { collapsed: false, collapsible: false, pricing: pricing, submitButtonText: submitButtonText, totalCheckoutItemsKept: totalCheckoutItemsKept, onSubmit: handleOnSubmit })))) : null)),
101
101
  pricing && !isDesktopScreen ? (React.createElement(Sticky, { style: style.sticky, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined },
102
102
  React.createElement(Body, null,
103
- React.createElement(CollapsiblePricing, { collapsed: pricingCollapsed, migrated: migrated, pricing: pricing, submitButtonText: submitButtonText, totalCheckoutItemsKept: totalCheckoutItemsKept, tradename: tradename, onPress: handleOnPressPricing, onSubmit: handleOnSubmit })))) : null));
103
+ React.createElement(CollapsiblePricing, { collapsed: pricingCollapsed, pricing: pricing, submitButtonText: submitButtonText, totalCheckoutItemsKept: totalCheckoutItemsKept, onPress: handleOnPressPricing, onSubmit: handleOnSubmit })))) : null));
104
104
  };
105
105
  export { Summary };
@@ -1,10 +1,7 @@
1
1
  import { FC } from "react";
2
- import { Tradename } from "@lookiero/sty-sp-tradename";
3
- import { PricingProjection } from "../../../../../../projection/pricing/pricing";
2
+ import { CheckoutPricingProjection } from "../../../../../../projection/pricing/pricing";
4
3
  interface CollapsiblePricingProps {
5
- readonly tradename: Tradename;
6
- readonly migrated: boolean;
7
- readonly pricing: PricingProjection;
4
+ readonly pricing: CheckoutPricingProjection;
8
5
  readonly totalCheckoutItemsKept: number;
9
6
  readonly collapsible?: boolean;
10
7
  readonly collapsed?: boolean;
@@ -7,8 +7,8 @@ import { Price } from "../../../../components/atoms/price/Price";
7
7
  import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
8
8
  import { Pricing } from "../pricing/Pricing";
9
9
  import { style as collapsiblePricingStyle } from "./CollapsiblePricing.style";
10
- const CollapsiblePricing = ({ migrated, tradename, pricing, totalCheckoutItemsKept, collapsible = true, collapsed = false, submitButtonText, onPress = () => void 0, onSubmit, }) => {
11
- const { pendingToPay } = pricing;
10
+ const CollapsiblePricing = ({ pricing, totalCheckoutItemsKept, collapsible = true, collapsed = false, submitButtonText, onPress = () => void 0, onSubmit, }) => {
11
+ const { finalPrice, currency } = pricing;
12
12
  const totalText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TOTAL });
13
13
  const totalCheckoutItemsKeptText = useI18nMessage({
14
14
  domain: DOMAIN,
@@ -30,10 +30,10 @@ const CollapsiblePricing = ({ migrated, tradename, pricing, totalCheckoutItemsKe
30
30
  totalText,
31
31
  " ",
32
32
  totalCheckoutItemsKeptText),
33
- React.createElement(Price, { price: pendingToPay, variant: "detail" })),
33
+ React.createElement(Price, { amount: finalPrice, currency: currency, variant: "detail" })),
34
34
  React.createElement(View, { style: style.collapsedContent },
35
35
  React.createElement(Button, { size: "small", testID: "submit-checkout-collpased-button", onPress: onSubmit }, submitButtonText)))) : (React.createElement(Animated.View, { key: "not-collapsed", style: notCollapsedAnimatedStyle },
36
- React.createElement(Pricing, { migrated: migrated, pricing: pricing, totalCheckoutItemsKept: totalCheckoutItemsKept, tradename: tradename }),
36
+ React.createElement(Pricing, { pricing: pricing, totalCheckoutItemsKept: totalCheckoutItemsKept }),
37
37
  React.createElement(Button, { testID: "submit-checkout-button", onPress: onSubmit }, submitButtonText)))));
38
38
  };
39
39
  export { CollapsiblePricing };
@@ -1,11 +1,8 @@
1
1
  import { FC } from "react";
2
- import { Tradename } from "@lookiero/sty-sp-tradename";
3
- import { PricingProjection } from "../../../../../../projection/pricing/pricing";
2
+ import { CheckoutPricingProjection } from "../../../../../../projection/pricing/pricing";
4
3
  interface PricingProps {
5
- readonly pricing: PricingProjection;
4
+ readonly pricing: CheckoutPricingProjection;
6
5
  readonly totalCheckoutItemsKept: number;
7
- readonly tradename: Tradename;
8
- readonly migrated: boolean;
9
6
  }
10
7
  declare const Pricing: FC<PricingProps>;
11
8
  export { Pricing };
@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
2
2
  import { View } from "react-native";
3
3
  import { useI18nMessage } from "@lookiero/i18n-react";
4
4
  import { Text } from "@lookiero/sty-psp-ui";
5
- import { Tradename } from "@lookiero/sty-sp-tradename";
5
+ import { CheckoutPricingType } from "../../../../../../projection/pricing/pricing";
6
6
  import { Price } from "../../../../components/atoms/price/Price";
7
7
  import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
8
8
  import { style as pricingStyle } from "./Pricing.style";
@@ -12,8 +12,18 @@ const Row = ({ action = false, text, level = 3, children }) => {
12
12
  React.createElement(Text, { level: level, variant: action ? "action" : "body" }, text),
13
13
  children));
14
14
  };
15
- const Pricing = ({ pricing, totalCheckoutItemsKept, tradename, migrated }) => {
16
- const { pendingToPay, subtotal, balanceDiscount, discount, discountPercentage = 0, service } = pricing;
15
+ const ModifierRow = ({ translationKey, amount, percentage, currency, type }) => {
16
+ const modifierText = useI18nMessage({
17
+ domain: DOMAIN,
18
+ id: translationKey,
19
+ values: percentage ? { discount: percentage.toString() } : undefined,
20
+ });
21
+ const displayAmount = type === CheckoutPricingType.DISCOUNT ? -amount : amount;
22
+ return (React.createElement(Row, { text: modifierText },
23
+ React.createElement(Price, { amount: displayAmount, currency: currency, variant: "subtotal" })));
24
+ };
25
+ const Pricing = ({ pricing, totalCheckoutItemsKept }) => {
26
+ const { originalPrice, finalPrice, modifiers, currency } = pricing;
17
27
  const style = useMemo(() => pricingStyle(), []);
18
28
  const totalText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TOTAL });
19
29
  const totalCheckoutItemsKeptText = useI18nMessage({
@@ -22,24 +32,12 @@ const Pricing = ({ pricing, totalCheckoutItemsKept, tradename, migrated }) => {
22
32
  values: { items: totalCheckoutItemsKept.toString() },
23
33
  });
24
34
  const subtotalText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_SUBTOTAL });
25
- const freeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_FREE });
26
- const discountText = useI18nMessage({
27
- domain: DOMAIN,
28
- id: I18nMessages.SUMMARY_DISCOUNT,
29
- values: { discount: discountPercentage?.toString() },
30
- });
31
- const creditText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_CREDIT });
32
- const feeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_FEE });
33
35
  return (React.createElement(View, null,
34
36
  React.createElement(Row, { text: `${subtotalText} ${totalCheckoutItemsKeptText}` },
35
- React.createElement(Price, { price: subtotal, variant: "subtotal" })),
36
- discount && discount.amount !== 0 && (React.createElement(Row, { text: discountText },
37
- React.createElement(Price, { price: discount, variant: "subtotal" }))),
38
- balanceDiscount && balanceDiscount.amount !== 0 && (React.createElement(Row, { text: creditText },
39
- React.createElement(Price, { price: balanceDiscount, variant: "subtotal" }))),
40
- (tradename === Tradename.LOOKIERO || (tradename === Tradename.OUTFITTERY && !migrated)) && (React.createElement(Row, { text: feeText }, service.paidWithPromocode ? (React.createElement(Text, { level: 3 }, freeText)) : (React.createElement(Price, { price: service.finalPrice, variant: "subtotal" })))),
37
+ React.createElement(Price, { amount: originalPrice, currency: currency, variant: "subtotal" })),
38
+ modifiers.map((modifier, index) => (React.createElement(ModifierRow, { key: `modifier-${index}`, amount: modifier.amount, currency: currency, percentage: modifier.percentage, translationKey: modifier.translationKey, type: modifier.type }))),
41
39
  React.createElement(View, { style: style.divider }),
42
40
  React.createElement(Row, { level: 2, text: totalText, action: true },
43
- React.createElement(Price, { price: pendingToPay, variant: "total" }))));
41
+ React.createElement(Price, { amount: finalPrice, currency: currency, variant: "total" }))));
44
42
  };
45
43
  export { Pricing };
@@ -6,6 +6,5 @@ interface Customer {
6
6
  readonly segment: Segment;
7
7
  readonly name: string;
8
8
  readonly email: string;
9
- readonly migrated: boolean;
10
9
  }
11
10
  export type { Customer };