[CM-1016] feat: Commerce Widget Name + Soft Release (#2349)

examples/_deprecated/checkout-widget/basic-react/README.md

@@ -1,4 +1,4 @@
-This is a sample code to get started with the Checkout widget using React + Vite.
+This is a sample code to get started with the Commerce Widget using React + Vite.
 
 Run locally by using the `npm i && npm run dev` command.
 

examples/checkout/sdk-load-widgets-with-nextjs/README.md

@@ -1,9 +1,9 @@
 # Checkout SDK Widgets Example App
 
-This example app shows how to use the Checkout Widget, loaded from the Checkout SDK. It will cover scenarios including mounting, executing flows, and handling events.
+This example app shows how to use the Commerce Widget, loaded from the Checkout SDK. It will cover scenarios including mounting, executing flows, and handling events.
 
 **Example App implementation progress:**
-- [x] Mounting Checkout Widget
+- [x] Mounting Commerce Widget
 - [ ] Executing different flows
 - [ ] Events
 
@@ -29,7 +29,7 @@ yarn dev
 
 ## E2E Testing
 
-There are tests covering the auto updating of the Checkout Widget.
+There are tests covering the auto updating of the Commerce Widget.
 
 Build the app:
 

examples/checkout/sdk-load-widgets-with-nextjs/src/app/page.tsx

@@ -14,7 +14,7 @@ export default function Home() {
       className="mb-1"
       size="medium"
       rc={<NextLink href="/widgets" />}>
-      Mount Checkout Widgets
+      Mount Commerce Widgets
     </Button>
   </>);
 }

examples/checkout/sdk-load-widgets-with-nextjs/src/app/widgets/page.tsx

@@ -1,21 +1,21 @@
 "use client";
 import { Box } from '@biom3/react';
 import { checkout } from '@imtbl/sdk';
-import { CheckoutFlowType, ConnectionSuccess, Widget, WidgetType } from '@imtbl/sdk/checkout';
+import { CommerceFlowType, ConnectionSuccess, Widget, WidgetType } from '@imtbl/sdk/checkout';
 import { useEffect, useState } from 'react';
 
 const checkoutSDK = new checkout.Checkout();
 
 function Widgets() {
 
-  const [widget, setWidget] = useState<Widget<WidgetType.CHECKOUT>>();
+  const [widget, setWidget] = useState<Widget<WidgetType.IMMUTABLE_COMMERCE>>();
 
   useEffect(() => {
 
     const loadWidgets = async () => {
       const widgetsFactory = await checkoutSDK.widgets({ config: {} });
 
-      const widget = widgetsFactory.create(WidgetType.CHECKOUT, {})
+      const widget = widgetsFactory.create(WidgetType.IMMUTABLE_COMMERCE, {})
       setWidget(widget);
     }
 
@@ -26,16 +26,16 @@ function Widgets() {
   useEffect(() => {
     if (!widget) return;
     widget.mount("widget-root", {
-      flow: CheckoutFlowType.WALLET,
+      flow: CommerceFlowType.WALLET,
     });
 
     widget.addListener(
-      checkout.CheckoutEventType.SUCCESS,
-      (payload: checkout.CheckoutSuccessEvent) => {
+      checkout.CommerceEventType.SUCCESS,
+      (payload: checkout.CommerceSuccessEvent) => {
         const { type, data } = payload;
 
         // capture provider after user connects their wallet
-        if (type === checkout.CheckoutSuccessEventType.CONNECT_SUCCESS) {
+        if (type === checkout.CommerceSuccessEventType.CONNECT_SUCCESS) {
           const { walletProviderName } = data as ConnectionSuccess;
           console.log('connected to ', walletProviderName);
           // setProvider(data.provider);
@@ -48,26 +48,26 @@ function Widgets() {
 
     // detect when user fails to connect
     widget.addListener(
-      checkout.CheckoutEventType.FAILURE,
-      (payload: checkout.CheckoutFailureEvent) => {
+      checkout.CommerceEventType.FAILURE,
+      (payload: checkout.CommerceFailureEvent) => {
         const { type, data } = payload;
 
-        if (type === checkout.CheckoutFailureEventType.CONNECT_FAILED) {
+        if (type === checkout.CommerceFailureEventType.CONNECT_FAILED) {
           console.log('failed to connect', data.reason);
         }
       }
     );
 
     // remove widget from view when closed
-    widget.addListener(checkout.CheckoutEventType.CLOSE, () => {
+    widget.addListener(checkout.CommerceEventType.CLOSE, () => {
       widget.unmount();
     });
 
     // clean up event listeners
     return () => {
-      widget.removeListener(checkout.CheckoutEventType.SUCCESS);
-      widget.removeListener(checkout.CheckoutEventType.DISCONNECTED);
-      widget.removeListener(checkout.CheckoutEventType.CLOSE);
+      widget.removeListener(checkout.CommerceEventType.SUCCESS);
+      widget.removeListener(checkout.CommerceEventType.DISCONNECTED);
+      widget.removeListener(checkout.CommerceEventType.CLOSE);
     };
 
 

examples/checkout/sdk-load-widgets-with-nextjs/tests/version.spec.ts → examples/checkout/sdk-load-widgets-with-nextjs/tests/widgets.spec.ts

@@ -11,7 +11,7 @@ const INTERCEPT_CHECKOUT_VERSION_CONFIG = process.env.INTERCEPT_CHECKOUT_VERSION
 test.beforeEach(async ({ page }) => {
 
   if (!USE_REMOTE_WIDGETS) {
-    await interceptWidgets(page);
+    await interceptWidgets(page, '*');
   }
 
   if (INTERCEPT_CHECKOUT_VERSION_CONFIG) {

packages/checkout/README.md

@@ -202,9 +202,9 @@ In a production release, this script is loaded from a CDN. We are currently usin
       │
       ├── sdk-sample-app - Sample app where the Checkout SDK is consumed
       │
-      ├── widgets-lib - Checkout widgets
+      ├── widgets-lib - Commerce Widgets
       │
-      ├── widgets-sample-app - Sample app where the Checkout Widgets are consumed
+      ├── widgets-sample-app - Sample app where the Commerce Widgets are consumed
       │
       └── README.md
 ```

packages/checkout/sdk/src/sdk.ts

@@ -261,7 +261,7 @@ export class Checkout {
     } catch (err: any) {
       // eslint-disable-next-line no-console
       console.warn(
-        `Failed to resolve checkout widgets module, falling back to UMD bundle. Error: ${err.message}`,
+        `Failed to resolve Commerce Widgets module, falling back to UMD bundle. Error: ${err.message}`,
       );
     }
 

packages/checkout/sdk/src/types/widgets.ts

@@ -2,9 +2,9 @@ import { WidgetConfiguration } from '../widgets/definitions/configurations/widge
 import { SemanticVersion } from '../widgets/definitions/types';
 
 /**
- * Represents the configuration options for instantiating the Checkout Widgets factory.
+ * Represents the configuration options for instantiating the Commerce Widgets factory.
  * @property {WidgetConfiguration} config - global configuration options for the widgets.
- * @property {SemanticVersion | undefined} version - version of the Checkout widgets bundle(default latest version will be used).
+ * @property {SemanticVersion | undefined} version - version of the Commerce Widgets bundle(default latest version will be used).
  */
 export type WidgetsInit = {
   config: WidgetConfiguration;

packages/checkout/sdk/src/widgets/definitions/configurations/checkout.ts → packages/checkout/sdk/src/widgets/definitions/configurations/commerce.ts

@@ -9,7 +9,7 @@ import { AddFundsWidgetConfiguration } from './addFunds';
 
 import { WidgetConfiguration } from './widget';
 
-export type CheckoutWidgetConfiguration = {
+export type CommerceWidgetConfiguration = {
   CONNECT?: Omit<ConnectWidgetConfiguration, keyof WidgetConfiguration>;
   WALLET?: Omit<WalletWidgetConfiguration, keyof WidgetConfiguration>;
   SWAP?: Omit<SwapWidgetConfiguration, keyof WidgetConfiguration>;

packages/checkout/sdk/src/widgets/definitions/configurations/index.ts

@@ -7,4 +7,4 @@ export * from './sale';
 export * from './theme';
 export * from './widget';
 export * from './addFunds';
-export * from './checkout';
+export * from './commerce';

packages/checkout/sdk/src/widgets/definitions/configurations/widget.ts

@@ -1,25 +1,25 @@
 import { WidgetTheme } from './theme';
 
 /**
- * Widget Configuration represents the shared configuration options for the Checkout Widgets.
+ * Widget Configuration represents the shared configuration options for the Commerce Widgets.
  * @property {WidgetTheme | undefined} theme
  * @property {WidgetLanguage | undefined} language
  * @property {WalletConnectConfig | undefined} walletConnect
  */
 export type WidgetConfiguration = {
-  /** The theme of the Checkout Widget (default: "DARK") */
+  /** The theme of the Commerce Widget (default: "DARK") */
   theme?: WidgetTheme;
   language?: WidgetLanguage;
   walletConnect?: WalletConnectConfig;
 };
 
 /**
- * Widget Language represents the language options for the Checkout Widgets.
+ * Widget Language represents the language options for the Commerce Widgets.
  */
 export type WidgetLanguage = 'en' | 'ja' | 'ko' | 'zh';
 
 /**
- * WalletConnect Config represents the configuration required to enable WalletConnect for the Checkout Widgets.
+ * WalletConnect Config represents the configuration required to enable WalletConnect for the Commerce Widgets.
  */
 export type WalletConnectConfig = {
   /** WalletConnect projectId */