@wix/headless-stores 0.0.1

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@wix/headless-stores",
+  "version": "0.0.1",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest"
+  },
+  "exports": {
+    "./react": "./dist/react/index.js",
+    "./services": "./dist/services/index.js"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^20.9.0",
+    "@vitest/ui": "^3.1.4",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.7.3",
+    "vitest": "^3.1.4"
+  },
+  "dependencies": {
+    "@wix/ecom": "^1.0.1169",
+    "@wix/redirects": "^1.0.79",
+    "@wix/services-definitions": "^0.1.2",
+    "@wix/services-manager-react": "^0.1.9"
+  }
+}

package/src/react/BuyNow.test.tsx

@@ -0,0 +1,139 @@
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
+import { BuyNow } from './BuyNow';
+
+vi.mock('@wix/ecom', () => ({
+  checkout: {
+    createCheckout: vi.fn(),
+    ChannelType: { WEB: 'WEB' },
+  },
+}));
+
+vi.mock('@wix/redirects', () => ({
+  redirects: {
+    createRedirectSession: vi.fn(),
+  },
+}));
+
+const originalLocation = window.location;
+let ecomCheckoutMock: any;
+let redirectsMock: any;
+
+beforeEach(async () => {
+  const ecom = await import('@wix/ecom');
+  ecomCheckoutMock = ecom.checkout;
+  const redirectsModule = await import('@wix/redirects');
+  redirectsMock = redirectsModule.redirects;
+
+  vi.clearAllMocks();
+
+  delete (window as any).location;
+  (window as any).location = { ...originalLocation, href: '' };
+
+  ecomCheckoutMock.createCheckout.mockResolvedValue({ _id: 'test-checkout-id' });
+  redirectsMock.createRedirectSession.mockResolvedValue({
+    redirectSession: { fullUrl: 'http://mocked-redirect-url.com' },
+  });
+});
+
+afterEach(() => {
+  (window as any).location = originalLocation; // Use type assertion for restoration
+});
+
+describe('BuyNow Component from @wix/headless-stores/react', () => {
+  const testProductId = 'test-product-123';
+  const testVariant = { color: 'blue' };
+
+  const renderComponent = (props = {}) => {
+    let capturedRedirectToCheckout: () => Promise<void> = async () => {};
+    const renderOutput = render(
+      <BuyNow
+        productId={testProductId}
+        variant={testVariant}
+        {...props}
+      >
+        {({ isLoading, redirectToCheckout }) => {
+          capturedRedirectToCheckout = redirectToCheckout as () => Promise<void>;
+          if (isLoading) return <div>Loading...</div>;
+          return <button onClick={redirectToCheckout}>Buy Product Now</button>;
+        }}
+      </BuyNow>
+    );
+    return { ...renderOutput, redirectToCheckoutDirectly: capturedRedirectToCheckout };
+  };
+
+  test('should render the button with children render prop', () => {
+    renderComponent();
+    expect(screen.getByRole('button', { name: /Buy Product Now/i })).toBeInTheDocument();
+  });
+
+  test('should show loading state and call checkout and redirect services on click', async () => {
+    renderComponent();
+    const button = screen.getByRole('button', { name: /Buy Product Now/i });
+    fireEvent.click(button);
+
+    expect(screen.getByText(/Loading.../i)).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(ecomCheckoutMock.createCheckout).toHaveBeenCalledTimes(1);
+    });
+    expect(ecomCheckoutMock.createCheckout).toHaveBeenCalledWith({
+      lineItems: [{
+        catalogReference: {
+          catalogItemId: testProductId,
+          appId: '215238eb-22a5-4c36-9e7b-e7c08025e04e',
+          options: {
+            options: testVariant,
+          }
+        },
+        quantity: 1
+      }],
+      channelType: 'WEB',
+    });
+
+    await waitFor(() => {
+      expect(redirectsMock.createRedirectSession).toHaveBeenCalledTimes(1);
+    });
+    expect(redirectsMock.createRedirectSession).toHaveBeenCalledWith({
+      ecomCheckout: { checkoutId: 'test-checkout-id' },
+      callbacks: {
+        postFlowUrl: expect.any(String),
+      },
+    });
+
+    await waitFor(() => {
+      expect(window.location.href).toBe('http://mocked-redirect-url.com');
+    });
+
+    expect(screen.getByRole('button', { name: /Buy Product Now/i })).toBeInTheDocument();
+  });
+
+  test('should handle checkout creation failure and reject', async () => {
+    ecomCheckoutMock.createCheckout.mockResolvedValueOnce({ _id: null });
+
+    const { redirectToCheckoutDirectly } = renderComponent();
+
+    await act(async () => {
+      await expect(redirectToCheckoutDirectly()).rejects.toThrow('Failed to create checkout');
+    });
+
+    expect(screen.getByRole('button', { name: /Buy Product Now/i })).toBeInTheDocument();
+    expect(ecomCheckoutMock.createCheckout).toHaveBeenCalledTimes(1);
+    expect(redirectsMock.createRedirectSession).not.toHaveBeenCalled();
+  });
+
+   test('should set isLoading to false and reject if redirects.createRedirectSession throws', async () => {
+    redirectsMock.createRedirectSession.mockRejectedValueOnce(new Error('Redirect failed'));
+
+    const { redirectToCheckoutDirectly } = renderComponent();
+
+    await act(async () => {
+      await expect(redirectToCheckoutDirectly()).rejects.toThrow('Redirect failed');
+    });
+
+    expect(screen.getByRole('button', { name: /Buy Product Now/i })).toBeInTheDocument();
+    expect(redirectsMock.createRedirectSession).toHaveBeenCalledTimes(1);
+    expect(window.location.href).not.toBe('http://mocked-redirect-url.com');
+  });
+});

package/src/react/BuyNow.tsx

@@ -0,0 +1,76 @@
+import { useService } from "@wix/services-manager-react";
+import { BuyNowServiceDefinition } from "../services/buy-now-service";
+
+/**
+ * Props passed to the render function of the BuyNow component
+ */
+export type BuyNowRenderProps = {
+  /** Whether the buy now operation is currently loading */
+  isLoading: boolean;
+  /** The name of the product being purchased */
+  productName: string;
+  /** Function to redirect the user to the checkout page */
+  redirectToCheckout: () => void;
+  /** The error message if the buy now operation fails */
+  error: string | null;
+  /** The price of the product being purchased */
+  price: string;
+  /** The currency of the product being purchased */
+  currency: string;
+};
+
+/**
+ * Props for the BuyNow component
+ */
+export type BuyNowProps = {
+  /** Render function that receives buy now state and actions */
+  children: (props: BuyNowRenderProps) => React.ReactNode;
+};
+
+/**
+ * A headless component that provides buy now functionality using the render props pattern.
+ *
+ * This component manages the state and actions for a "buy now" flow, allowing consumers
+ * to render their own UI while accessing the underlying buy now functionality.
+ *
+ * @param props - The component props
+ * @returns The rendered children with buy now state and actions
+ *
+ * @example
+ * ```tsx
+ * <BuyNow>
+ *   {({ isLoading, productName, redirectToCheckout, error, price, currency }) => (
+ *     <div>
+ *       <h2>{productName}</h2>
+ *       <p>{price} {currency}</p>
+ *       {error && <div className="error">{error}</div>}
+ *       <button
+ *         onClick={redirectToCheckout}
+ *         disabled={isLoading}
+ *       >
+ *         {isLoading ? 'Processing...' : 'Buy Now'}
+ *       </button>
+ *     </div>
+ *   )}
+ * </BuyNow>
+ * ```
+ */
+export function BuyNow(props: BuyNowProps) {
+  const {
+    redirectToCheckout,
+    loadingSignal,
+    productName,
+    errorSignal,
+    price,
+    currency,
+  } = useService(BuyNowServiceDefinition);
+
+  return props.children({
+    isLoading: loadingSignal.get(),
+    error: errorSignal.get(),
+    productName: productName,
+    redirectToCheckout,
+    price,
+    currency,
+  });
+}

package/src/react/index.tsx

@@ -0,0 +1 @@
+export { BuyNow } from "./BuyNow";

package/src/services/buy-now-service.ts

@@ -0,0 +1,100 @@
+import {
+  defineService,
+  implementService,
+  ServiceFactoryConfig,
+  Signal,
+} from "@wix/services-definitions";
+import { SignalsServiceDefinition } from "@wix/services-definitions/core-services/signals";
+import { productsV3 } from "@wix/stores";
+import { getCheckoutUrlForProduct } from "../utils";
+
+export const BuyNowServiceDefinition = defineService<{
+  redirectToCheckout: () => Promise<void>;
+  loadingSignal: Signal<boolean>;
+  errorSignal: Signal<string | null>;
+}>("BuyNow");
+
+export const BuyNowServiceImplementation = implementService.withConfig<{
+  productId: string;
+  variantId?: string;
+  productName: string;
+  price: string;
+  currency: string;
+}>()(BuyNowServiceDefinition, ({ getService, config }) => {
+  const signalsService = getService(SignalsServiceDefinition);
+  const loadingSignal = signalsService.signal(false) as Signal<boolean>;
+  const errorSignal = signalsService.signal<string | null>(null) as Signal<
+    string | null
+  >;
+
+  return {
+    redirectToCheckout: async () => {
+      loadingSignal.set(true);
+      try {
+        const checkoutUrl = await getCheckoutUrlForProduct(
+          config.productId,
+          config.variantId
+        );
+        window.location.href = checkoutUrl;
+      } catch (error) {
+        errorSignal.set(error as string);
+        loadingSignal.set(false);
+      }
+    },
+    loadingSignal,
+    errorSignal,
+    productName: config.productName,
+    price: config.price,
+    currency: config.currency,
+  };
+});
+
+export const loadBuyNowServiceInitialData = async (
+  productSlug: string,
+  variantId?: string
+) => {
+  const res = await productsV3.getProductBySlug(productSlug, {
+    fields: ["CURRENCY"],
+  });
+  const product = res.product!;
+
+  const selectedVariantId =
+    variantId ?? product.variantsInfo?.variants?.[0]?._id;
+
+  const price =
+    product.variantsInfo?.variants?.find((v) => v._id === selectedVariantId)
+      ?.price?.actualPrice?.amount ??
+    product.actualPriceRange?.minValue?.amount;
+
+  return {
+    [BuyNowServiceDefinition]: {
+      productId: product._id!,
+      productName: product.name!,
+      price: price!,
+      currency: product.currency!,
+      ...(typeof selectedVariantId !== "undefined"
+        ? {
+            variantId: selectedVariantId!,
+          }
+        : {}),
+    },
+  };
+};
+
+export const buyNowServiceBinding = <
+  T extends {
+    [key: string]: Awaited<
+      ReturnType<typeof loadBuyNowServiceInitialData>
+    >[typeof BuyNowServiceDefinition];
+  }
+>(
+  servicesConfigs: T
+) => {
+  return [
+    BuyNowServiceDefinition,
+    BuyNowServiceImplementation,
+    servicesConfigs[BuyNowServiceDefinition] as ServiceFactoryConfig<
+      typeof BuyNowServiceImplementation
+    >,
+  ] as const;
+};

package/src/services/index.ts

@@ -0,0 +1,4 @@
+export {
+  buyNowServiceBinding,
+  loadBuyNowServiceInitialData,
+} from "./buy-now-service";

package/src/utils/index.ts

@@ -0,0 +1,38 @@
+import { checkout } from "@wix/ecom";
+import { redirects } from "@wix/redirects";
+
+const CATLOG_APP_ID_V3 = "215238eb-22a5-4c36-9e7b-e7c08025e04e";
+
+export async function getCheckoutUrlForProduct(
+  productId: string,
+  variantId?: string
+) {
+  const checkoutResult = await checkout.createCheckout({
+    lineItems: [
+      {
+        catalogReference: {
+          catalogItemId: productId,
+          appId: CATLOG_APP_ID_V3,
+          options: {
+            variantId,
+          },
+        },
+        quantity: 1,
+      },
+    ],
+    channelType: checkout.ChannelType.WEB,
+  });
+
+  if (!checkoutResult._id) {
+    throw new Error("Failed to create checkout");
+  }
+
+  const { redirectSession } = await redirects.createRedirectSession({
+    ecomCheckout: { checkoutId: checkoutResult._id },
+    callbacks: {
+      postFlowUrl: window.location.href,
+    },
+  });
+
+  return redirectSession?.fullUrl!;
+}

package/src/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "module": "ESNext" /* Specify what module code is generated. */,
+    "moduleResolution": "bundler" /* Specify how TypeScript looks up a file from a given module specifier. */,
+    "resolveJsonModule": true /* Enable importing .json files. */,
+    "rootDir": "./src" /* Specify the root folder within your source files. */,
+    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+    "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
+    "noImplicitThis": true /* Enable error reporting when 'this' is given the type 'any'. */,
+    "useUnknownInCatchVariables": true /* Default catch clause variables as 'unknown' instead of 'any'. */,
+    "noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
+    "noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
+    "noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
+    "noPropertyAccessFromIndexSignature": true /* Enforces using indexed accessors for keys declared using an indexed type. */,
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
+    "declaration": true,
+    "strict": true,
+    "noEmitOnError": false,
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "src/vitest.setup.ts"
+  ]
+}

package/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/vitest.setup.ts'], // Adjusted path to be relative to this config file
+  },
+});