@lookiero/checkout 12.23.0 → 12.24.1

package/dist/fake-dependencies/@lookiero/payments-front/index.d.ts

@@ -16,7 +16,9 @@ interface UsePaymentStatusManagerResult {
 }
 declare const usePaymentStatusManager: (section: Section) => UsePaymentStatusManagerResult;
 declare enum Section {
-    BOX_CHECKOUT = "box-checkout"
+    BOX_CHECKOUT = "box-checkout",
+    DIRECT_BUY_CHECKOUT = "direct-buy-checkout"
 }
+declare const PayButton: FC;
 export type { PaymentFlowRef };
-export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, usePaymentStatusManager, };
+export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, usePaymentStatusManager, PayButton, };

package/dist/fake-dependencies/@lookiero/payments-front/index.js

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { forwardRef, useImperativeHandle, } from "react";
+import React, { forwardRef, useImperativeHandle, } from "react";
+import { Button } from "@lookiero/aurora";
 let startLegacyBoxCheckoutListener;
 const setPaymentsBridge = () => void 0;
 const PaymentsQueryProvider = ({ children }) => children;
@@ -24,5 +25,7 @@ const usePaymentStatusManager = () => paymentStatusManagerResult;
 var Section;
 (function (Section) {
     Section["BOX_CHECKOUT"] = "box-checkout";
+    Section["DIRECT_BUY_CHECKOUT"] = "direct-buy-checkout";
 })(Section || (Section = {}));
-export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, usePaymentStatusManager, };
+const PayButton = ({ ...props }) => React.createElement(Button, { ...props }, "Pay");
+export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, usePaymentStatusManager, PayButton, };

package/dist/src/ExpoRoot.js

@@ -18,7 +18,7 @@ import { root } from "./infrastructure/ui/Root";
 import { DOMAIN } from "./infrastructure/ui/i18n/i18n";
 import { Router } from "./infrastructure/ui/routing/router/Router";
 import { VERSION } from "./version";
-const tradename = Tradename.LOOKIERO;
+const tradename = Tradename.OUTFITTERY;
 const theme = themeByTradename({ tradename });
 const locale = Locale.es_ES;
 const subscription = "b";
@@ -28,7 +28,7 @@ const order = {
     coupon: "MYLOOKIERO",
 };
 const customer = {
-    customerId: "6bf2156d-aa5f-432a-88c9-578e9b6992fa",
+    customerId: "f943ae75-bffb-4b14-b418-e8c79da41dde",
     country: Country.ES,
     segment: Segment.WOMEN,
     email: "email@example.com",
@@ -47,7 +47,7 @@ const apiUrl = Platform.OS !== "web"
             ? "/local-to-dev"
             : "http://localhost:3004/local-to-dev"
         : "/checkout/api";
-const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzMTA4NTY4LCJleHAiOjE3NjAyNjEzNDIsImRpc3BsYXlOYW1lIjoiTWlrZWwiLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwic3Vic2NyaXB0aW9uU3RhcnRpbmdEYXRlIjoiMjAyNS0wOS0xMSIsImltcGVyc29uYXRlZCI6ZmFsc2UsInV1aWQiOiJhYjIzN2FiMy1mOWY2LTRiNWItOTNjMi1lNjg3YzJmOTlkMmMiLCJ0cmFkZW5hbWUiOiJMT09LSUVSTyIsImlhdCI6MTc1NzY2OTM0Mn0.mw9E6PLIc0KeXe7AdDcxxJrZZuGATxVoht5jDOlDXrk";
+const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzNDQzMjA4LCJleHAiOjE3NjQzNDQwNjUsImRpc3BsYXlOYW1lIjoiQWxleGFuZGVyIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMTAtMjciLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiZjk0M2FlNzUtYmZmYi00YjE0LWI0MTgtZThjNzlkYTQxZGRlIiwidHJhZGVuYW1lIjoiT1VURklUVEVSWSIsImlhdCI6MTc2MTY2NTY2NX0.ACQlI_HmEytLQCWNLXPStOwNdrOKjU9IHW4ezrHoquc";
 const getAuthToken = () => Promise.resolve(authToken);
 const externalTranslationsUrl = Platform.OS !== "web"
     ? "https://backend-for-user.dev.envs.lookiero.tech/api/v2/translations"
@@ -86,9 +86,10 @@ setPaymentsBridge({
     appVersion: VERSION,
     graphqlUri: "/graphql",
     useFeatureFlags: () => ({}),
-    locale: () => Promise.resolve("es-ES"),
+    locale: () => "es-ES",
     scrollView: ScrollView,
     hostUrl: "",
+    tradename,
 });
 const kameleoonConfig = {
     siteCode: "aplm4v3ckn",

package/dist/src/infrastructure/ui/i18n/i18n.d.ts

@@ -45,7 +45,6 @@ declare enum I18nMessages {
     SUMMARY_FEE = "summary.fee",
     PRODUCT_VARIANT_SIZE_CHANGE = "product_variant.size_change",
     CHECKOUT_TITLE = "checkout.title",
-    CHECKOUT_PAY_BUTTON = "checkout.pay_button",
     CHECKOUT_TOAST_PAYMENT_ERROR = "checkout.toast_payment_error",
     CHECKOUT_TOAST_PAYMENT_SUCCESS = "checkout.toast_payment_success",
     CHECKOUT_SUCCESS_MODAL_TITLE = "checkout.success_modal_title",

package/dist/src/infrastructure/ui/i18n/i18n.js

@@ -47,7 +47,6 @@ var I18nMessages;
     I18nMessages["SUMMARY_FEE"] = "summary.fee";
     I18nMessages["PRODUCT_VARIANT_SIZE_CHANGE"] = "product_variant.size_change";
     I18nMessages["CHECKOUT_TITLE"] = "checkout.title";
-    I18nMessages["CHECKOUT_PAY_BUTTON"] = "checkout.pay_button";
     I18nMessages["CHECKOUT_TOAST_PAYMENT_ERROR"] = "checkout.toast_payment_error";
     I18nMessages["CHECKOUT_TOAST_PAYMENT_SUCCESS"] = "checkout.toast_payment_success";
     I18nMessages["CHECKOUT_SUCCESS_MODAL_TITLE"] = "checkout.success_modal_title";

package/dist/src/infrastructure/ui/views/checkout/Checkout.js

@@ -1,9 +1,10 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
+import { Box, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
+import { PayButton, Section } from "@lookiero/payments-front";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Sticky, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
@@ -30,7 +31,6 @@ const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedire
     const isDektopScreen = screenSize === "L";
     const style = useMemo(() => checkoutStyle(), []);
     const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_TITLE });
-    const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_PAY_BUTTON });
     const [pricingHeight, setPricingHeight] = useState(0);
     const handleOnPricingLayout = useCallback(({ height }) => setPricingHeight(height), []);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
@@ -74,6 +74,7 @@ const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedire
         trackPressBack();
         navigate(`${basePath}/${Routes.SUMMARY}`);
     }, [basePath, navigate, trackPressBack]);
+    const PaymentButton = () => useMemo(() => (React.createElement(PayButton, { busy: checkoutFlowStatus === "loading", section: Section.BOX_CHECKOUT, testID: "confirm-checkout-button", small: true, onPress: handleOnSubmit })), []);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
     const dependenciesLoaded = (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) &&
         dependenciesLoadedStatuses.includes(pricingStatus);
@@ -100,10 +101,10 @@ const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedire
                             React.createElement(PaymentInstrument, { useRedirect: useRedirect }))))),
                 React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, isDektopScreen && style.desktopResume] }, pricing ? (React.createElement(View, { style: [style.princingWrapper, !isDektopScreen && style.princingWrapperSmall] },
                     React.createElement(Pricing, { pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0 }),
-                    isDektopScreen ? (React.createElement(Button, { busy: checkoutFlowStatus === "loading", testID: "confirm-checkout-button", onPress: handleOnSubmit }, submitButtonText)) : null)) : null))),
+                    isDektopScreen && React.createElement(PaymentButton, null))) : null))),
         pricing && !isDektopScreen ? (React.createElement(Sticky, { style: style.sticky, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined },
             React.createElement(Body, null,
-                React.createElement(Button, { busy: checkoutFlowStatus === "loading", testID: "confirm-checkout-button", small: true, onPress: handleOnSubmit }, submitButtonText)))) : null,
+                React.createElement(PaymentButton, null)))) : null,
         paymentFlowComponent));
 };
 export { Checkout };

package/dist/src/version.d.ts

@@ -1 +1,2 @@
-export declare const VERSION = "12.23.0";
+export declare const VERSION = "12.24.1";
+export declare const RELEASE = "checkout@12.24.1";

package/dist/src/version.js

@@ -1 +1,2 @@
-export const VERSION = "12.23.0";
+export const VERSION = "12.24.1";
+export const RELEASE = "checkout@12.24.1";

package/fake-dependencies/@lookiero/payments-front/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import {
+import React, {
   FC,
   forwardRef,
   ForwardRefExoticComponent,
@@ -7,6 +7,7 @@ import {
   RefAttributes,
   useImperativeHandle,
 } from "react";
+import { Button } from "@lookiero/aurora";
 import { PaymentPayload } from "@lookiero/payments-front";
 
 let startLegacyBoxCheckoutListener: ({ success }: { success: boolean }) => void;
@@ -54,10 +55,12 @@ const usePaymentStatusManager: (section: Section) => UsePaymentStatusManagerResu
 
 enum Section {
   BOX_CHECKOUT = "box-checkout",
+  DIRECT_BUY_CHECKOUT = "direct-buy-checkout",
 }
 
-export type { PaymentFlowRef };
+const PayButton: FC = ({ ...props }) => <Button {...props}>Pay</Button>;
 
+export type { PaymentFlowRef };
 export {
   PaymentsQueryProvider,
   PaymentInstrumentSelect,
@@ -65,4 +68,5 @@ export {
   Section,
   setPaymentsBridge,
   usePaymentStatusManager,
+  PayButton,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "12.23.0",
+  "version": "12.24.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -33,7 +33,7 @@
     "@lookiero/sty-psp-storage": "^0.2",
     "@lookiero/sty-psp-tracking": "^2.2",
     "@lookiero/sty-psp-ui-settings": "^1.2",
-    "@lookiero/sty-psp-ui": "^3.1",
+    "@lookiero/sty-psp-ui": "^3.2",
     "@lookiero/sty-psp-units": "^0.1",
     "@lookiero/sty-psp-uuid": "^0.2",
     "@lookiero/sty-sp-tradename": "^1.0",
@@ -46,7 +46,7 @@
     "@config-plugins/detox": "^6.0.0",
     "@lookiero/eslint-config-sty-psp": "*",
     "@lookiero/event": "^0.3",
-    "@lookiero/payments-front": "^7.0.0",
+    "@lookiero/payments-front": "^9.2.0",
     "@lookiero/sty-psp-jest-config": "*",
     "@lookiero/sty-psp-prettier-config": "*",
     "@lookiero/sty-psp-scripts": "*",
@@ -76,7 +76,7 @@
     "@lookiero/event": "^0.3",
     "@lookiero/i18n": ">=3",
     "@lookiero/i18n-react": ">=3",
-    "@lookiero/payments-front": ">=7",
+    "@lookiero/payments-front": ">=9",
     "apollo-boost": "0.4.4",
     "expo": ">=52",
     "expo-font": ">=12",

package/src/ExpoRoot.tsx

@@ -7,7 +7,7 @@ import { Aurora, Text } from "@lookiero/aurora";
 import { EventProvider } from "@lookiero/event";
 import { EndpointFunction } from "@lookiero/i18n";
 import { i18n } from "@lookiero/i18n-react";
-import { PaymentsQueryProvider, setPaymentsBridge } from "@lookiero/payments-front";
+import { FeatureFlags, PaymentsQueryProvider, setPaymentsBridge } from "@lookiero/payments-front";
 import { fetchTranslations, Project, translationExternalEndpoint } from "@lookiero/sty-psp-i18n";
 import { Country, Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment } from "@lookiero/sty-psp-logging";
@@ -25,7 +25,7 @@ import { OrderProjection } from "./projection/order/order";
 import { SubscriptionProjection } from "./projection/subscription/subscription";
 import { VERSION } from "./version";
 
-const tradename = Tradename.LOOKIERO;
+const tradename = Tradename.OUTFITTERY;
 const theme = themeByTradename({ tradename });
 const locale: Locale = Locale.es_ES;
 
@@ -37,7 +37,7 @@ const order: OrderProjection = {
 };
 
 const customer: Customer = {
-  customerId: "6bf2156d-aa5f-432a-88c9-578e9b6992fa",
+  customerId: "f943ae75-bffb-4b14-b418-e8c79da41dde",
   country: Country.ES,
   segment: Segment.WOMEN,
   email: "email@example.com",
@@ -60,7 +60,7 @@ const apiUrl =
         : "http://localhost:3004/local-to-dev"
       : "/checkout/api";
 const authToken =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzMTA4NTY4LCJleHAiOjE3NjAyNjEzNDIsImRpc3BsYXlOYW1lIjoiTWlrZWwiLCJjb3VudHJ5X2NvZGUiOiJFUyIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwic3Vic2NyaXB0aW9uU3RhcnRpbmdEYXRlIjoiMjAyNS0wOS0xMSIsImltcGVyc29uYXRlZCI6ZmFsc2UsInV1aWQiOiJhYjIzN2FiMy1mOWY2LTRiNWItOTNjMi1lNjg3YzJmOTlkMmMiLCJ0cmFkZW5hbWUiOiJMT09LSUVSTyIsImlhdCI6MTc1NzY2OTM0Mn0.mw9E6PLIc0KeXe7AdDcxxJrZZuGATxVoht5jDOlDXrk";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEzNDQzMjA4LCJleHAiOjE3NjQzNDQwNjUsImRpc3BsYXlOYW1lIjoiQWxleGFuZGVyIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMTAtMjciLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiZjk0M2FlNzUtYmZmYi00YjE0LWI0MTgtZThjNzlkYTQxZGRlIiwidHJhZGVuYW1lIjoiT1VURklUVEVSWSIsImlhdCI6MTc2MTY2NTY2NX0.ACQlI_HmEytLQCWNLXPStOwNdrOKjU9IHW4ezrHoquc";
 const getAuthToken = () => Promise.resolve(authToken);
 
 const externalTranslationsUrl =
@@ -104,10 +104,11 @@ setPaymentsBridge({
   },
   appVersion: VERSION,
   graphqlUri: "/graphql",
-  useFeatureFlags: () => ({}),
-  locale: () => Promise.resolve("es-ES"),
+  useFeatureFlags: () => ({}) as Record<FeatureFlags, boolean>,
+  locale: () => "es-ES",
   scrollView: ScrollView,
   hostUrl: "",
+  tradename,
 });
 
 const kameleoonConfig: KameleoonEnvironment = {

package/src/infrastructure/ui/i18n/i18n.ts

@@ -48,7 +48,6 @@ enum I18nMessages {
   SUMMARY_FEE = "summary.fee",
   PRODUCT_VARIANT_SIZE_CHANGE = "product_variant.size_change",
   CHECKOUT_TITLE = "checkout.title",
-  CHECKOUT_PAY_BUTTON = "checkout.pay_button",
   CHECKOUT_TOAST_PAYMENT_ERROR = "checkout.toast_payment_error",
   CHECKOUT_TOAST_PAYMENT_SUCCESS = "checkout.toast_payment_success",
   CHECKOUT_SUCCESS_MODAL_TITLE = "checkout.success_modal_title",

package/src/infrastructure/ui/views/checkout/Checkout.test.tsx

@@ -120,8 +120,7 @@ describe("Checkout view", () => {
 
     expect(getByTestId(paymentFlowTestId)).toBeTruthy();
 
-    expect(getByText(I18nMessages.CHECKOUT_PAY_BUTTON)).toBeTruthy();
-    fireEvent.press(getByText(I18nMessages.CHECKOUT_PAY_BUTTON));
+    fireEvent.press(getByTestId("confirm-checkout-button"));
     expect(mockTrackPressContinue).toHaveBeenCalled();
     expect(mockCheckoutFlow).toHaveBeenCalled();
 

package/src/infrastructure/ui/views/checkout/Checkout.tsx

@@ -1,9 +1,10 @@
 import React, { FC, useCallback, useMemo, useState } from "react";
 import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
+import { Box, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
+import { PayButton, Section } from "@lookiero/payments-front";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Layout as UiLayout, Sticky, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
@@ -55,7 +56,6 @@ const Checkout: FC<CheckoutProps> = ({
   const style = useMemo(() => checkoutStyle(), []);
 
   const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_TITLE });
-  const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_PAY_BUTTON });
   const [pricingHeight, setPricingHeight] = useState(0);
   const handleOnPricingLayout = useCallback(({ height }: LayoutRectangle) => setPricingHeight(height), []);
 
@@ -117,6 +117,20 @@ const Checkout: FC<CheckoutProps> = ({
     navigate(`${basePath}/${Routes.SUMMARY}`);
   }, [basePath, navigate, trackPressBack]);
 
+  const PaymentButton = () =>
+    useMemo(
+      () => (
+        <PayButton
+          busy={checkoutFlowStatus === "loading"}
+          section={Section.BOX_CHECKOUT}
+          testID="confirm-checkout-button"
+          small
+          onPress={handleOnSubmit}
+        />
+      ),
+      [],
+    );
+
   const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
   const dependenciesLoaded =
     (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) &&
@@ -186,15 +200,7 @@ const Checkout: FC<CheckoutProps> = ({
               <View style={[style.princingWrapper, !isDektopScreen && style.princingWrapperSmall]}>
                 <Pricing pricing={pricing} totalCheckoutItemsKept={checkoutItemsKept?.length || 0} />
 
-                {isDektopScreen ? (
-                  <Button
-                    busy={checkoutFlowStatus === "loading"}
-                    testID="confirm-checkout-button"
-                    onPress={handleOnSubmit}
-                  >
-                    {submitButtonText}
-                  </Button>
-                ) : null}
+                {isDektopScreen && <PaymentButton />}
               </View>
             ) : null}
           </Box>
@@ -204,14 +210,7 @@ const Checkout: FC<CheckoutProps> = ({
       {pricing && !isDektopScreen ? (
         <Sticky style={style.sticky} onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}>
           <Body>
-            <Button
-              busy={checkoutFlowStatus === "loading"}
-              testID="confirm-checkout-button"
-              small
-              onPress={handleOnSubmit}
-            >
-              {submitButtonText}
-            </Button>
+            <PaymentButton />
           </Body>
         </Sticky>
       ) : null}