bitsnap-react 1.5.0 → 1.6.1

package/README.md

@@ -57,6 +57,479 @@ It uses modern React patterns and libraries like:
 - Customizable host URL
 - Supports test/production environments
 
+## Checkout appearance
+
+`BitsnapCheckout` accepts an optional `appearance` prop. Omitting it - or passing
+`{}` - keeps the current presentation exactly as it is, so existing integrations
+do not have to change.
+
+### Import the stylesheet
+
+```tsx
+import "bitsnap-react/dist/index.css";
+```
+
+The stylesheet ships ready to use. Do not run it through a PostCSS prefixer or
+compile the library's Tailwind source again: the rules are already scoped.
+
+### Brand colors, font and radius
+
+```tsx
+import { BitsnapCheckout } from "bitsnap-react";
+
+function MyComponent() {
+  return (
+    <BitsnapCheckout
+      projectID="your-project-id"
+      appearance={{
+        tokens: {
+          fontFamily: '"Inter", sans-serif',
+          background: "#ffffff",
+          foreground: "#202020",
+          buttonBackground: "#635bff",
+          buttonForeground: "#ffffff",
+          radius: "12px",
+        },
+      }}
+    />
+  );
+}
+```
+
+Fonts are not loaded by the library - load the font file in your application, the
+checkout only applies the family you pass.
+
+### Light theme
+
+```tsx
+<BitsnapCheckout projectID="your-project-id" appearance={{ theme: "light" }} />
+```
+
+`theme` accepts `"dark"` (the default presentation) and `"light"`. There is no
+automatic system theme selection.
+
+### Individual elements
+
+Every part of the checkout is addressable through a stable slot. Slots accept a
+`className` (merged after the built-in classes) and a `style` (merged after the
+built-in styles):
+
+```tsx
+<BitsnapCheckout
+  projectID="your-project-id"
+  appearance={{
+    elements: {
+      title: { style: { fontFamily: '"Georgia", serif', fontSize: "28px" } },
+      checkoutButton: { className: "store-checkout-button" },
+      countryOption: { className: "px-4" },
+    },
+  }}
+/>
+```
+
+| Slot                 | Element                                     |
+| -------------------- | ------------------------------------------- |
+| `root`               | Theme boundary of the drawer                |
+| `overlay`            | Backdrop behind the drawer                   |
+| `panel`              | Drawer panel                                |
+| `header`             | Drawer header row                           |
+| `title`              | "Cart" heading                              |
+| `closeButton`        | Close button                                |
+| `productList`        | Scrollable product list                     |
+| `product`            | Single product row                          |
+| `productImage`       | Product image                               |
+| `productName`        | Product name                                |
+| `productPrice`       | Product price                               |
+| `quantityControl`    | Quantity stepper                            |
+| `quantityInput`      | Quantity value input                        |
+| `quantityButton`     | Quantity `-`/`+` buttons                    |
+| `removeButton`       | "Remove" button                             |
+| `summary`            | Total block                                 |
+| `totalLabel`         | "Total" label                               |
+| `totalValue`         | Total amount                                |
+| `deliveryText`       | Delivery note                               |
+| `countryLabel`       | "Choose country" label                      |
+| `countryTrigger`     | Country select trigger                      |
+| `countryDropdown`    | Portalled country list                      |
+| `countrySearch`      | Country search field                        |
+| `countryOption`      | Single country option                       |
+| `paymentButtons`     | Apple Pay / Google Pay wrappers              |
+| `checkoutButton`     | "Next step" button                          |
+| `emptyState`         | Empty cart message                          |
+| `error`              | Checkout error message                      |
+| `skeleton`           | Loading placeholder                         |
+
+The same names are rendered as `data-bitsnap-checkout-slot` attributes, and the
+drawer/dropdown boundaries carry `data-bitsnap-checkout`, so plain CSS works too:
+
+```css
+/* brand hover and focus states that the library cannot express */
+.store-checkout-button:hover {
+  filter: brightness(1.1);
+}
+
+[data-bitsnap-checkout-slot="countryOption"]:hover {
+  background: #eef2ff;
+}
+```
+
+Custom classes follow the normal CSS cascade; `className` is merged with `cn`, so
+conflicting Tailwind utilities from the library are resolved in your favor.
+
+### Tokens
+
+| Token                     | Applies to                                              |
+| ------------------------- | ------------------------------------------------------- |
+| `fontFamily`              | The whole checkout                                      |
+| `fontSize`                | The whole checkout                                      |
+| `background`              | Panel, country trigger                                  |
+| `surface`                 | Country dropdown, search bar, loading skeletons         |
+| `foreground`              | Titles, prices, total                                   |
+| `mutedForeground`         | Empty cart, delivery note, country label, search field  |
+| `border`                  | Country trigger, dropdown, product separators            |
+| `buttonBackground`        | "Next step" button                                      |
+| `buttonForeground`        | "Next step" button                                      |
+| `buttonHoverBackground`   | "Next step" button on hover                             |
+| `hoverSurface`            | Close button, country options                           |
+| `focusRing`               | Focus rings of the shared controls                      |
+| `error`                   | Error message, unavailable product outline              |
+| `overlay`                 | Drawer backdrop                                         |
+| `radius`                  | Radius of the rounded elements                          |
+
+### What stays untouched
+
+- The trigger button (`className`, `children`, `numberOfProductsInCartOptions`) and
+  every callback keep their current meaning.
+- The appearance lives in the checkout component only. It is not a global setting
+  and does not reuse the panel's `setTheme`.
+- Apple Pay and Google Pay keep their native artwork and fonts; only the space
+  around them is themed.
+- Layout, responsive widths and checkout actions are unchanged. Override widths
+  from your own CSS.
+- The country list is rendered in a portal. It receives the theme (colors, font,
+  focus ring and stacking) as soon as you pass an `appearance`; without one it
+  renders exactly as before.
+
+## Returns
+
+`BitsnapReturns` is the customer return flow: email, verification code, orders,
+line and quantity selection, confirmation, result, plus a list of earlier returns
+with their status. The views are themeable from the start, with the same
+`appearance` shape as the checkout. It needs the same stylesheet
+(`bitsnap-react/dist/index.css`).
+
+```tsx
+import { BitsnapReturns } from "bitsnap-react";
+import "bitsnap-react/dist/index.css";
+
+function ReturnsPage() {
+  return <BitsnapReturns projectID="your-project-id" />;
+}
+```
+
+It is an inline page section, not an overlay, and it is safe to render on the
+server.
+
+**Upgrading from 1.6.0.** 1.6.0 code keeps working without changes, imported
+from `bitsnap-react` or `bitsnap-react/returns`. Both paths now export this
+implementation.
+- **`BitsnapReturns` props:** it still accepts the `Environment` enum, `theme.brandColor` (prefer `appearance.tokens`) and the old text keys (`title`, `email`, `sendCode`, `code`, `verify`, `orders`, `submit`, `note`, `loading`, `history`).
+- **Provider:** `BitsnapReturnsProvider` is an alias of `ReturnsProvider`.
+- **Hooks:** they accept both the 1.6.0 calls (`useReturnOrders(pageSize, pageToken)`, `useMyReturns(pageSize, pageToken)`) and the new object form. Their results include the 1.6.0 fields (`data`, `mutateAsync`, `startSession`, `verifySession`, `starting`, `verifying`) next to the new ones.
+- **Visual change:** the widget now uses the new themed views.
+- **Wording:** without `texts`, the wording follows the library locale (`setLocale`). 1.6.0 was always English.
+
+| Prop                | Meaning                                                                    |
+| ------------------- | -------------------------------------------------------------------------- |
+| `projectID`         | Bitsnap project ID                                                          |
+| `host`              | API host. Falls back to `setCustomHost`, then `https://bitsnap.pl`         |
+| `environment`       | `"production"` (default) or `"test"`                                        |
+| `appearance`        | `{ theme, tokens, elements }`, see below                                    |
+| `texts`             | Partial text overrides, see [Texts](#texts)                                 |
+| `locale`            | Locale of texts, dates and money. Defaults to `getLocale()`                 |
+| `panelAccessToken`  | Customer panel token; skips email and code, see [Panel](#returns-in-the-customer-panel) |
+| `className`         | Class of the themed root element                                            |
+
+The session token lives in React state and `sessionStorage` (one key per project),
+never in `localStorage`, and is never logged. An expired session returns the flow
+to the email step.
+
+### Shared brand
+
+One object can style the checkout and the returns views:
+
+```tsx
+import { BitsnapCheckout, BitsnapReturns } from "bitsnap-react";
+
+const brand = {
+  theme: "light",
+  tokens: {
+    fontFamily: '"Inter", sans-serif',
+    buttonBackground: "#635bff",
+    buttonForeground: "#ffffff",
+    radius: "12px",
+  },
+} as const;
+
+<BitsnapCheckout projectID="your-project-id" appearance={brand} />
+<BitsnapReturns
+  projectID="your-project-id"
+  appearance={{
+    ...brand,
+    elements: {
+      title: { style: { fontFamily: '"Georgia", serif' } },
+      submitButton: { className: "store-primary-button" },
+    },
+  }}
+/>
+```
+
+`theme` is `"light"` or `"dark"`. The default for returns is `"light"`; the
+checkout keeps its `"dark"` default. `elements` take `{ className, style }`,
+merged after the built-in classes and styles, exactly like the checkout slots.
+
+### Return tokens
+
+The returns views use the checkout tokens, plus five more. `overlay` is
+checkout-only and ignored by returns.
+
+| Token                     | Applies to                                                 | Returns only |
+| ------------------------- | ---------------------------------------------------------- | ------------ |
+| `fontFamily`, `fontSize`  | All returns views                                          |              |
+| `background`              | Page background                                            |              |
+| `surface`                 | Cards, summaries, loading skeletons                         |              |
+| `foreground`              | Titles, names, amounts                                     |              |
+| `mutedForeground`         | Descriptions, dates, hints                                  |              |
+| `border`                  | Cards, inputs, separators                                   |              |
+| `buttonBackground`        | Primary buttons                                            |              |
+| `buttonForeground`        | Primary buttons                                            |              |
+| `buttonHoverBackground`   | Primary buttons on hover                                    |              |
+| `hoverSurface`            | Secondary buttons, selectable cards                         |              |
+| `focusRing`               | Focus rings                                                |              |
+| `error`                   | Error messages                                             |              |
+| `radius`                  | Rounded elements                                           |              |
+| `success`                 | Result screen, completed and refunded statuses              | yes          |
+| `warning`                 | Statuses that need attention                                | yes          |
+| `badgeBackground`         | Status badges                                              | yes          |
+| `badgeForeground`         | Status badges                                              | yes          |
+| `inputBackground`         | Text inputs and the note field                              | yes          |
+
+### Return slots
+
+Slots are exported as `RETURNS_SLOT_NAMES` and rendered as
+`data-bitsnap-returns-slot` attributes.
+
+| Group                     | Slots                                                                                                                      |
+| ------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| Frame                     | `root`, `header`, `title`, `description`, `backButton`, `stepIndicator`, `error`, `emptyState`, `skeleton`                  |
+| Auth                      | `emailForm`, `emailInput`, `codeForm`, `codeInput`, `resendButton`, `logoutButton`                                         |
+| Orders                    | `orderList`, `orderCard`, `orderReference`, `orderDate`, `orderTotal`, `pagination`                                         |
+| Selection                 | `lineList`, `line`, `lineName`, `linePrice`, `lineQuantityControl`, `quantityButton`, `quantityInput`, `lineIneligibleReason`, `noteInput` |
+| Confirmation and result   | `summary`, `submitButton`, `secondaryButton`, `successState`, `returnReference`, `returnInstructions`                       |
+| My returns                | `returnList`, `returnCard`, `statusBadge`, `history`, `historyEntry`                                                       |
+
+### Texts
+
+Both `BitsnapCheckout` and `BitsnapReturns` accept a `texts` prop: a partial
+object that overrides the default strings whatever the locale. Without it the
+strings are unchanged, and `setLocale`/`getLocale` keep working. For different
+copy per language, pass a different object.
+
+```tsx
+<BitsnapCheckout
+  projectID="your-project-id"
+  texts={{ cart: "Your basket", nextStep: "Pay now" }}
+/>
+
+<BitsnapReturns
+  projectID="your-project-id"
+  locale="en"
+  texts={{
+    emailStepTitle: "Return a product",
+    successDescription: "We'll email you once it arrives.",
+    statusAwaitingReceipt: "On its way to us",
+  }}
+/>
+```
+
+Checkout keys (`CheckoutTexts`): `cart`, `emptyCart`, `total`, `delivery`,
+`chooseCountry`, `nextStep`, `unavailableProducts`.
+
+Returns keys (`ReturnsTexts`) cover each step (`emailStepTitle`,
+`codeStepDescription`, `ordersEmpty`, `confirmationSubmit`, `successTitle`,
+`myReturnsTitle`, ...), the request statuses (`statusSubmitted`,
+`statusApproved`, `statusAwaitingReceipt`, `statusReceived`, `statusRefunded`,
+`statusFallback`, ...) and the error messages (`errorGeneric`,
+`errorInvalidCode`, `errorSessionExpired`, ...). Strings with placeholders such
+as `{reference}` or `{count}` keep them in overrides. See `ReturnsTexts` and
+`CheckoutTexts` in the type declarations for the full list and the placeholders.
+
+### Custom layout
+
+Compose your own page from the step components under `ReturnsProvider`. The
+provider holds the session, appearance, texts and the transport, and renders the
+themed root. Each step takes small navigation callbacks and the IDs it needs, and
+throws a clear error when rendered outside the provider.
+
+```tsx
+import {
+  ReturnsConfirmation,
+  ReturnsEmailStep,
+  ReturnsCodeStep,
+  ReturnsOrderDetail,
+  ReturnsOrderList,
+  ReturnsProvider,
+  ReturnsResult,
+  useReturnSession,
+  type SelectedReturnLine,
+} from "bitsnap-react";
+
+function Flow() {
+  const { isAuthenticated } = useReturnSession();
+  const [step, setStep] = useState<"email" | "code" | "orders" | "order" | "confirm" | "done">("email");
+  const [orderId, setOrderId] = useState("");
+  const [items, setItems] = useState<SelectedReturnLine[]>([]);
+  const [note, setNote] = useState("");
+  const [returnId, setReturnId] = useState("");
+
+  if (!isAuthenticated) {
+    return step === "code" ? (
+      <ReturnsCodeStep onBack={() => setStep("email")} />
+    ) : (
+      <ReturnsEmailStep onSubmitted={() => setStep("code")} />
+    );
+  }
+  if (step === "order") {
+    return (
+      <ReturnsOrderDetail
+        orderId={orderId}
+        initialItems={items}
+        initialNote={note}
+        onBack={() => setStep("orders")}
+        onContinue={(selection) => {
+          setItems(selection.items);
+          setNote(selection.note);
+          setStep("confirm");
+        }}
+      />
+    );
+  }
+  if (step === "confirm") {
+    return (
+      <ReturnsConfirmation
+        orderId={orderId}
+        items={items}
+        note={note}
+        onBack={() => setStep("order")}
+        onSubmitted={(id) => {
+          setReturnId(id);
+          setStep("done");
+        }}
+      />
+    );
+  }
+  if (step === "done") {
+    return <ReturnsResult returnId={returnId} onContinue={() => setStep("orders")} />;
+  }
+  return (
+    <ReturnsOrderList
+      onSelectOrder={(id) => {
+        setOrderId(id);
+        setStep("order");
+      }}
+    />
+  );
+}
+
+<ReturnsProvider projectID="your-project-id" appearance={brand}>
+  <Flow />
+</ReturnsProvider>;
+```
+
+Available steps: `ReturnsEmailStep`, `ReturnsCodeStep`, `ReturnsOrderList`
+(`onSelectOrder`, `onOpenMyReturns`, `showLogout`), `ReturnsOrderDetail`,
+`ReturnsConfirmation`, `ReturnsResult`, `ReturnsMyReturnsList` and
+`ReturnsMyReturnDetail`. Each accepts its own `className`. A session left in
+`sessionStorage` is picked up on the next visit, so `useReturnSession().status`
+is `"hydrating"` until the provider has read it on the client.
+
+### Headless hooks
+
+To build the markup yourself, use the hooks under `ReturnsProvider`: they return
+data, loading and error state, and actions, and no markup.
+
+| Hook                         | Returns                                                                 |
+| ---------------------------- | ----------------------------------------------------------------------- |
+| `useReturnSession()`         | `status`, `isAuthenticated`, `start(email)`, `verify(code)`, `resend()`, `logout()`, `error` |
+| `useReturnOrders(options?)`  | Paged returnable `orders`, `total`, `next()`, `previous()`, `refetch()` |
+| `useReturnableOrder(id)`     | `order` with per-line eligibility, `returnHistory`                      |
+| `useCreateReturn()`          | `submit({ orderId, items, note })`; retries reuse one idempotency key    |
+| `useMyReturns(options?)`     | Paged earlier returns                                                   |
+| `useMyReturn(id)`            | One return with its status and history                                  |
+
+```tsx
+function Orders() {
+  const { orders, isLoading, errorKey } = useReturnOrders();
+  if (isLoading) return null;
+  return <ul>{orders.map((order) => <li key={order.canonicalOrderId}>{order.displayReference}</li>)}</ul>;
+}
+```
+
+A request that fails with `SESSION_EXPIRED` drops the session, so
+`useReturnSession().status` becomes `"anonymous"`.
+
+### CSS only
+
+Everything is also addressable without props. The root carries
+`data-bitsnap-returns` and the theme class (`light` or `dark`), and every slot
+carries `data-bitsnap-returns-slot`. The library rules sit in `@layer components`,
+so ordinary stylesheets win:
+
+```css
+/* the theme is applied as inline custom properties, so overrides need !important */
+[data-bitsnap-returns] {
+  --bitsnap-returns-button-background: #635bff !important;
+  --bitsnap-returns-radius: 12px !important;
+}
+
+[data-bitsnap-returns-slot="orderCard"]:hover {
+  border-color: #635bff;
+}
+
+[data-bitsnap-returns-slot="line"][data-ineligible] {
+  opacity: 0.5;
+}
+```
+
+Token variables are named `--bitsnap-returns-<token in kebab case>`, for example
+`--bitsnap-returns-muted-foreground`.
+
+### Returns in the customer panel
+
+The `Panel` has a Returns screen (`/panel?state=returns`, with `orderId` and
+`returnId` in the URL for the selected order and return). It is built from the
+step components above and reuses the panel login: the panel access token is
+exchanged for a returns session, so the customer sees their orders with no
+second code, and there is no email, code or logout step. When the panel session
+has expired, the customer is sent to the panel login.
+
+```tsx
+<Panel
+  returnsAppearance={{ theme: "light", tokens: { buttonBackground: "#635bff" } }}
+  returnsTexts={{ ordersTitle: "Choose an order to return" }}
+/>
+```
+
+| Prop                | Meaning                                                                         |
+| ------------------- | ------------------------------------------------------------------------------- |
+| `returnsAppearance` | `ReturnsAppearance` of the screen                                                |
+| `returnsTexts`      | `Partial<ReturnsTexts>` of the screen                                            |
+
+Without `returnsAppearance`, `buttonBackground` and `focusRing` come from the
+panel's `theme.colors.brand` (set with `setTheme`) and `buttonForeground` is
+chosen for contrast. Other panel screens and `setTheme` are unchanged. The
+navigation label follows `setLocale` ("Zwroty" / "Returns").
+
 # Examples
 
 1. `BitsnapCheckout` Component:
@@ -450,6 +923,7 @@ The panel provides the following screens:
 | Profile       | `/panel?state=profile`       | User profile and settings          |
 | Notifications | `/panel?state=notifications` | Notification preferences           |
 | Plans         | `/panel?state=plans`         | Subscription management            |
+| Returns       | `/panel?state=returns`       | Return products, track returns     |
 
 ## Features Detail
 

package/dist/chunk-O4ICBP4G.mjs

@@ -0,0 +1,2 @@
+import{enumDesc as ye,fileDesc as O}from"@bufbuild/protobuf/codegenv2";var k=O("Chtjb21tb24vdjEvZW52aXJvbm1lbnQucHJvdG8SCWNvbW1vbi52MSonCgtFbnZpcm9ubWVudBIOCgpQUk9EVUNUSU9OEAASCAoEVEVTVBABQk5aTGdpdGh1Yi5jb20vZW1tZW1zL3N1cGVyLWNhcnQvYXBwcy9zcnYtd29ya2VyL3V0aWxzL21vZGVscy9jb21tb24vdjE7Y29tbW9udjFiBnByb3RvMw"),T=(t=>(t[t.PRODUCTION=0]="PRODUCTION",t[t.TEST=1]="TEST",t))(T||{});import{Code as P,ConnectError as _,createClient as $}from"@connectrpc/connect";import{createConnectTransport as ee}from"@connectrpc/connect-web";import{fileDesc as Q,messageDesc as Ve,serviceDesc as U}from"@bufbuild/protobuf/codegenv2";import{file_google_protobuf_timestamp as D}from"@bufbuild/protobuf/wkt";var z=Q("ChdwdWJsaWMvdjEvcmV0dXJucy5wcm90bxIJcHVibGljLnYxImsKGVN0YXJ0UmV0dXJuU2Vzc2lvblJlcXVlc3QSEgoKcHJvamVjdF9pZBgBIAEoCRINCgVlbWFpbBgCIAEoCRIrCgtlbnZpcm9ubWVudBgDIAEoDjIWLmNvbW1vbi52MS5FbnZpcm9ubWVudCJhChpTdGFydFJldHVyblNlc3Npb25SZXNwb25zZRIUCgxjaGFsbGVuZ2VfaWQYASABKAkSHAoUcmVzZW5kX2FmdGVyX3NlY29uZHMYAiABKAUSDwoHbWVzc2FnZRgDIAEoCSKBAQoaVmVyaWZ5UmV0dXJuU2Vzc2lvblJlcXVlc3QSEgoKcHJvamVjdF9pZBgBIAEoCRIUCgxjaGFsbGVuZ2VfaWQYAiABKAkSDAoEY29kZRgDIAEoCRIrCgtlbnZpcm9ubWVudBgEIAEoDjIWLmNvbW1vbi52MS5FbnZpcm9ubWVudCJkChtWZXJpZnlSZXR1cm5TZXNzaW9uUmVzcG9uc2USFQoNc2Vzc2lvbl90b2tlbhgBIAEoCRIuCgpleHBpcmVzX2F0GAIgASgLMhouZ29vZ2xlLnByb3RvYnVmLlRpbWVzdGFtcCIzCgpSZXR1cm5QYWdlEhEKCXBhZ2Vfc2l6ZRgBIAEoBRISCgpwYWdlX3Rva2VuGAIgASgJItQBChJSZXR1cm5PcmRlclN1bW1hcnkSGgoSY2Fub25pY2FsX29yZGVyX2lkGAEgASgJEhkKEWRpc3BsYXlfcmVmZXJlbmNlGAIgASgJEg8KB2dhdGV3YXkYAyABKAkSMAoMcHVyY2hhc2VkX2F0GAQgASgLMhouZ29vZ2xlLnByb3RvYnVmLlRpbWVzdGFtcBITCgt0b3RhbF9taW5vchgFIAEoAxIQCghjdXJyZW5jeRgGIAEoCRIdChVyZXR1cm5hYmxlX2xpbmVfY291bnQYByABKAUiawoXTGlzdFJldHVybk9yZGVyc1JlcXVlc3QSEgoKcHJvamVjdF9pZBgBIAEoCRIVCg1zZXNzaW9uX3Rva2VuGAIgASgJEhEKCXBhZ2Vfc2l6ZRgDIAEoBRISCgpwYWdlX3Rva2VuGAQgASgJInEKGExpc3RSZXR1cm5PcmRlcnNSZXNwb25zZRItCgZvcmRlcnMYASADKAsyHS5wdWJsaWMudjEuUmV0dXJuT3JkZXJTdW1tYXJ5EhcKD25leHRfcGFnZV90b2tlbhgCIAEoCRINCgV0b3RhbBgDIAEoBSLEAwoPUmV0dXJuT3JkZXJMaW5lEg8KB2xpbmVfaWQYASABKAkSEgoKcHJvZHVjdF9pZBgCIAEoCRISCgp2YXJpYW50X2lkGAMgASgJEgwKBG5hbWUYBCABKAkSGAoQZnVsZmlsbG1lbnRfdHlwZRgFIAEoCRIaChJwdXJjaGFzZWRfcXVhbnRpdHkYBiABKAUSGQoRcmVzZXJ2ZWRfcXVhbnRpdHkYByABKAUSGQoRcmV0dXJuZWRfcXVhbnRpdHkYCCABKAUSGgoSYXZhaWxhYmxlX3F1YW50aXR5GAkgASgFEhoKEnJlZ3VsYXJfdW5pdF9taW5vchgKIAEoAxIXCg9wYWlkX3VuaXRfbWlub3IYCyABKAMSEAoIY3VycmVuY3kYDCABKAkSEAoIZWxpZ2libGUYDSABKAgSGAoQZXhjbHVzaW9uX3JlYXNvbhgOIAEoCRIdChVwYWlkX2xpbmVfdG90YWxfbWlub3IYDyABKAMSHwoXY291cG9uX2FsbG9jYXRpb25fbWlub3IYECABKAMSFQoNYWNjZXNzX3NvdXJjZRgRIAEoCRIYChBhY2Nlc3NfcmVmZXJlbmNlGBIgASgJIt8BChFSZXR1cm5PcmRlckRldGFpbBIaChJjYW5vbmljYWxfb3JkZXJfaWQYASABKAkSGQoRZGlzcGxheV9yZWZlcmVuY2UYAiABKAkSDwoHZ2F0ZXdheRgDIAEoCRIwCgxwdXJjaGFzZWRfYXQYBCABKAsyGi5nb29nbGUucHJvdG9idWYuVGltZXN0YW1wEhMKC3RvdGFsX21pbm9yGAUgASgDEhAKCGN1cnJlbmN5GAYgASgJEikKBWxpbmVzGAcgAygLMhoucHVibGljLnYxLlJldHVybk9yZGVyTGluZSI7ChZSZXR1cm5SZXF1ZXN0TGluZUlucHV0Eg8KB2xpbmVfaWQYASABKAkSEAoIcXVhbnRpdHkYAiABKAUicwoSUmV0dXJuSGlzdG9yeUVudHJ5EgoKAmlkGAEgASgJEhEKCXJlZmVyZW5jZRgCIAEoCRIOCgZzdGF0dXMYAyABKAkSLgoKY3JlYXRlZF9hdBgEIAEoCzIaLmdvb2dsZS5wcm90b2J1Zi5UaW1lc3RhbXAiuQEKFVJldHVyblJlcXVlc3RMaW5lVmlldxIPCgdsaW5lX2lkGAEgASgJEgwKBG5hbWUYAiABKAkSGAoQZnVsZmlsbG1lbnRfdHlwZRgDIAEoCRIaChJyZXF1ZXN0ZWRfcXVhbnRpdHkYBCABKAUSGQoRYXBwcm92ZWRfcXVhbnRpdHkYBSABKAUSGQoRcmVjZWl2ZWRfcXVhbnRpdHkYBiABKAUSFQoNYWNjZXNzX3N0YXR1cxgHIAEoCSL6AgoRUmV0dXJuUmVxdWVzdFZpZXcSCgoCaWQYASABKAkSEQoJcmVmZXJlbmNlGAIgASgJEhoKEmNhbm9uaWNhbF9vcmRlcl9pZBgDIAEoCRIOCgZzdGF0dXMYBCABKAkSFQoNcmVmdW5kX3N0YXR1cxgFIAEoCRIbChNyZWZ1bmRfYW1vdW50X21pbm9yGAYgASgDEhAKCGN1cnJlbmN5GAcgASgJEhUKDWN1c3RvbWVyX25vdGUYCCABKAkSDwoHdmVyc2lvbhgJIAEoAxIuCgpjcmVhdGVkX2F0GAogASgLMhouZ29vZ2xlLnByb3RvYnVmLlRpbWVzdGFtcBIvCgVsaW5lcxgLIAMoCzIgLnB1YmxpYy52MS5SZXR1cm5SZXF1ZXN0TGluZVZpZXcSLgoHaGlzdG9yeRgMIAMoCzIdLnB1YmxpYy52MS5SZXR1cm5IaXN0b3J5RW50cnkSGwoTcmV0dXJuX2luc3RydWN0aW9ucxgNIAEoCSJiChlHZXRSZXR1cm5hYmxlT3JkZXJSZXF1ZXN0EhIKCnByb2plY3RfaWQYASABKAkSFQoNc2Vzc2lvbl90b2tlbhgCIAEoCRIaChJjYW5vbmljYWxfb3JkZXJfaWQYAyABKAkigAEKGkdldFJldHVybmFibGVPcmRlclJlc3BvbnNlEisKBW9yZGVyGAEgASgLMhwucHVibGljLnYxLlJldHVybk9yZGVyRGV0YWlsEjUKDnJldHVybl9oaXN0b3J5GAIgAygLMh0ucHVibGljLnYxLlJldHVybkhpc3RvcnlFbnRyeSK8AQoaQ3JlYXRlUmV0dXJuUmVxdWVzdFJlcXVlc3QSEgoKcHJvamVjdF9pZBgBIAEoCRIVCg1zZXNzaW9uX3Rva2VuGAIgASgJEhoKEmNhbm9uaWNhbF9vcmRlcl9pZBgDIAEoCRIwCgVpdGVtcxgEIAMoCzIhLnB1YmxpYy52MS5SZXR1cm5SZXF1ZXN0TGluZUlucHV0EgwKBG5vdGUYBSABKAkSFwoPaWRlbXBvdGVuY3lfa2V5GAYgASgJIkwKG0NyZWF0ZVJldHVyblJlcXVlc3RSZXNwb25zZRItCgdyZXF1ZXN0GAEgASgLMhwucHVibGljLnYxLlJldHVyblJlcXVlc3RWaWV3ImgKFExpc3RNeVJldHVybnNSZXF1ZXN0EhIKCnByb2plY3RfaWQYASABKAkSFQoNc2Vzc2lvbl90b2tlbhgCIAEoCRIRCglwYWdlX3NpemUYAyABKAUSEgoKcGFnZV90b2tlbhgEIAEoCSJuChVMaXN0TXlSZXR1cm5zUmVzcG9uc2USLQoHcmV0dXJucxgBIAMoCzIcLnB1YmxpYy52MS5SZXR1cm5SZXF1ZXN0VmlldxIXCg9uZXh0X3BhZ2VfdG9rZW4YAiABKAkSDQoFdG90YWwYAyABKAUiUgoSR2V0TXlSZXR1cm5SZXF1ZXN0EhIKCnByb2plY3RfaWQYASABKAkSFQoNc2Vzc2lvbl90b2tlbhgCIAEoCRIRCglyZXR1cm5faWQYAyABKAkiRAoTR2V0TXlSZXR1cm5SZXNwb25zZRItCgdyZXF1ZXN0GAEgASgLMhwucHVibGljLnYxLlJldHVyblJlcXVlc3RWaWV3MqEFCg5SZXR1cm5zU2VydmljZRJhChJTdGFydFJldHVyblNlc3Npb24SJC5wdWJsaWMudjEuU3RhcnRSZXR1cm5TZXNzaW9uUmVxdWVzdBolLnB1YmxpYy52MS5TdGFydFJldHVyblNlc3Npb25SZXNwb25zZRJkChNWZXJpZnlSZXR1cm5TZXNzaW9uEiUucHVibGljLnYxLlZlcmlmeVJldHVyblNlc3Npb25SZXF1ZXN0GiYucHVibGljLnYxLlZlcmlmeVJldHVyblNlc3Npb25SZXNwb25zZRJbChBMaXN0UmV0dXJuT3JkZXJzEiIucHVibGljLnYxLkxpc3RSZXR1cm5PcmRlcnNSZXF1ZXN0GiMucHVibGljLnYxLkxpc3RSZXR1cm5PcmRlcnNSZXNwb25zZRJhChJHZXRSZXR1cm5hYmxlT3JkZXISJC5wdWJsaWMudjEuR2V0UmV0dXJuYWJsZU9yZGVyUmVxdWVzdBolLnB1YmxpYy52MS5HZXRSZXR1cm5hYmxlT3JkZXJSZXNwb25zZRJkChNDcmVhdGVSZXR1cm5SZXF1ZXN0EiUucHVibGljLnYxLkNyZWF0ZVJldHVyblJlcXVlc3RSZXF1ZXN0GiYucHVibGljLnYxLkNyZWF0ZVJldHVyblJlcXVlc3RSZXNwb25zZRJSCg1MaXN0TXlSZXR1cm5zEh8ucHVibGljLnYxLkxpc3RNeVJldHVybnNSZXF1ZXN0GiAucHVibGljLnYxLkxpc3RNeVJldHVybnNSZXNwb25zZRJMCgtHZXRNeVJldHVybhIdLnB1YmxpYy52MS5HZXRNeVJldHVyblJlcXVlc3QaHi5wdWJsaWMudjEuR2V0TXlSZXR1cm5SZXNwb25zZWIGcHJvdG8z",[k,D]);var L=U(z,0);import{QueryClient as te,QueryClientProvider as ne,useMutation as C,useQuery as N,useQueryClient as se}from"@tanstack/react-query";import re,{createContext as oe,useContext as ie,useMemo as F,useRef as K,useState as l}from"react";import{Fragment as ge,jsx as r,jsxs as o}from"react/jsx-runtime";var q=oe(null);function ue({projectID:e,host:n="https://bitsnap.pl",environment:t=0,children:i}){let u=`${n.replace(/\/$/,"")}|${e}|${t}`,[a,c]=l(),d=a?.scope===u?a.token:void 0,R=a?.scope===u?a.expiresAt:void 0,[h]=l(()=>new te({defaultOptions:{queries:{staleTime:0,refetchOnWindowFocus:!0}}})),g=F(()=>$(L,ee({baseUrl:`${n.replace(/\/$/,"")}/api/rpc`,useBinaryFormat:!0})),[n]),S=F(()=>({projectID:e,host:n.replace(/\/$/,""),environment:t,client:g,sessionToken:d,setSession:(m,Z)=>c(m?{token:m,expiresAt:Z,scope:u}:void 0),expiresAt:R}),[e,n,t,g,d,R,u]);return r(ne,{client:h,children:r(q.Provider,{value:S,children:i})})}function y(){let e=ie(q);if(!e)throw new Error("Wrap returns hooks in BitsnapReturnsProvider.");return e}function V(e,n){throw e instanceof _&&e.code===P.Unauthenticated&&n(),e}function ae(){let e=y(),n=C({mutationFn:u=>e.client.startReturnSession({projectId:e.projectID,email:u,environment:e.environment})}),t=C({mutationFn:async({challengeId:u,code:a})=>{let c=await e.client.verifyReturnSession({projectId:e.projectID,challengeId:u,code:a,environment:e.environment}),d=c.expiresAt?Number(c.expiresAt.seconds)*1e3+c.expiresAt.nanos/1e6:void 0;return e.setSession(c.sessionToken,d),c}}),i=()=>{e.setSession(void 0),t.reset(),n.reset()};return{startSession:n.mutateAsync,verifySession:t.mutateAsync,logout:i,isAuthenticated:!!(e.sessionToken&&(!e.expiresAt||Date.now()<e.expiresAt)),starting:n.isPending,verifying:t.isPending,error:n.error??t.error}}function ce(e=20,n=""){let t=y(),i=t.sessionToken;return N({queryKey:["bitsnap-returns",t.host,t.projectID,t.environment,e,n,"orders"],enabled:!!(i&&(!t.expiresAt||Date.now()<t.expiresAt)),queryFn:()=>t.client.listReturnOrders({projectId:t.projectID,sessionToken:i,pageSize:e,pageToken:n}).catch(u=>V(u,()=>t.setSession(void 0)))})}function le(e){let n=y(),t=n.sessionToken;return N({queryKey:["bitsnap-returns",n.host,n.projectID,n.environment,e,"order"],enabled:!!(t&&e&&(!n.expiresAt||Date.now()<n.expiresAt)),queryFn:()=>n.client.getReturnableOrder({projectId:n.projectID,sessionToken:t,canonicalOrderId:e}).catch(i=>V(i,()=>n.setSession(void 0)))})}function de(){let e=y(),n=e.sessionToken,t=se();return C({mutationFn:i=>{if(!n||e.expiresAt&&Date.now()>=e.expiresAt)throw e.setSession(void 0),new Error("Verify your email to continue.");return e.client.createReturnRequest({projectId:e.projectID,sessionToken:n,canonicalOrderId:i.canonicalOrderID,items:i.items,note:i.note??"",idempotencyKey:i.idempotencyKey??globalThis.crypto.randomUUID()}).catch(u=>V(u,()=>e.setSession(void 0)))},onSuccess:async()=>t.invalidateQueries({queryKey:["bitsnap-returns",e.host,e.projectID,e.environment]})})}function pe(e=20,n=""){let t=y(),i=t.sessionToken;return N({queryKey:["bitsnap-returns",t.host,t.projectID,t.environment,e,n,"mine"],enabled:!!(i&&(!t.expiresAt||Date.now()<t.expiresAt)),queryFn:()=>t.client.listMyReturns({projectId:t.projectID,sessionToken:i,pageSize:e,pageToken:n}).catch(u=>V(u,()=>t.setSession(void 0)))})}var Re={title:"Request a return",email:"Email address",sendCode:"Send code",code:"Email code",verify:"Verify",orders:"Your orders",submit:"Submit return",note:"Note (optional)",loading:"Loading\u2026",history:"My return requests"};function Ce(e){return r(ue,{projectID:e.projectID,host:e.host,environment:e.environment,children:r(me,{...e})})}function me(e){let n={...Re,...e.texts},t=ae(),[i,u]=l(""),a=ce(20,i),c=pe(),d=de(),[R,h]=l(""),[g,S]=l(""),[m,Z]=l(""),[J,X]=l(),[x,f]=l(),[G,Y]=l({}),[M,H]=l(""),[p,E]=l(),I=K(!1),W=K(void 0),A=le(J?.canonicalOrderId);re.useEffect(()=>{A.data?.order&&f(A.data.order)},[A.data]);let B=t.error??a.error??A.error??d.error,j={"--bitsnap-returns-brand":e.theme?.brandColor??"#111827"};return o("section",{className:`bitsnap-returns ${e.className??""}`,style:j,"aria-live":"polite",children:[r("h2",{className:"mb-4 text-xl font-semibold",children:n.title}),!t.isAuthenticated&&o("div",{className:"space-y-3",children:[o("label",{className:"block text-sm",children:[n.email,r("input",{type:"email",autoComplete:"email",value:R,onChange:s=>h(s.target.value),className:"mt-1 block w-full rounded border p-2"})]}),g?o(ge,{children:[o("label",{className:"block text-sm",children:[n.code,r("input",{inputMode:"numeric",autoComplete:"one-time-code",value:m,onChange:s=>Z(s.target.value),className:"mt-1 block w-full rounded border p-2"})]}),r("button",{type:"button",disabled:t.verifying||!m,onClick:()=>t.verifySession({challengeId:g,code:m}),className:"rounded bg-[var(--bitsnap-returns-brand)] px-4 py-2 text-white disabled:opacity-50",children:t.verifying?n.loading:n.verify}),r("button",{type:"button",disabled:t.starting,onClick:async()=>{let s=await t.startSession(R);S(s.challengeId)},className:"ml-3 underline",children:"Resend code"})]}):r("button",{type:"button",disabled:t.starting||!R,onClick:async()=>{let s=await t.startSession(R);S(s.challengeId)},className:"rounded bg-[var(--bitsnap-returns-brand)] px-4 py-2 text-white disabled:opacity-50",children:t.starting?n.loading:n.sendCode})]}),a.isLoading&&r("p",{children:n.loading}),a.data!=null&&!J&&!p&&o("div",{className:"space-y-3",children:[r("h3",{className:"font-medium",children:n.orders}),a.data.orders.length===0&&r("p",{children:"No eligible orders found."}),a.data.orders.map(s=>o("button",{type:"button",onClick:()=>X(s),className:"block w-full rounded border p-3 text-left hover:border-[var(--bitsnap-returns-brand)]",children:[r("span",{className:"font-medium",children:s.displayReference}),o("span",{className:"ml-2 text-sm text-gray-600",children:[s.currency," ",w(s.totalMinor)]})]},s.canonicalOrderId)),a.data.nextPageToken&&r("button",{type:"button",onClick:()=>u(a.data?.nextPageToken??""),className:"underline",children:"Next orders"})]}),x&&!p&&o("div",{className:"space-y-3",children:[o("button",{type:"button",onClick:()=>{X(void 0),f(void 0)},className:"text-sm underline",children:["\u2190 ",n.orders]}),x.lines.map(s=>o("label",{className:"flex items-center justify-between gap-3 rounded border p-3",children:[o("span",{children:[s.name,o("small",{className:"block text-gray-600",children:[s.availableQuantity," available \xB7 ",s.currency," ",w(s.paidUnitMinor)]})]}),r("input",{type:"number",min:0,max:s.availableQuantity,disabled:!s.eligible,value:G[s.lineId]??0,onChange:b=>Y(v=>({...v,[s.lineId]:Math.max(0,Math.min(s.availableQuantity,Number(b.target.value)))})),className:"w-20 rounded border p-2"}),!s.eligible&&r("small",{children:s.exclusionReason})]},s.lineId)),o("label",{className:"block text-sm",children:[n.note,r("textarea",{value:M,onChange:s=>H(s.target.value),className:"mt-1 block w-full rounded border p-2"})]}),r("button",{type:"button",disabled:d.isPending||!Object.values(G).some(s=>s>0),onClick:async()=>{if(!I.current){I.current=!0,W.current??=globalThis.crypto.randomUUID();try{let s=await d.mutateAsync({canonicalOrderID:x.canonicalOrderId,items:Object.entries(G).filter(([,b])=>b>0).map(([b,v])=>({lineId:b,quantity:v})),note:M,idempotencyKey:W.current});s&&"request"in s&&s.request&&E(s.request)}finally{I.current=!1}}},className:"rounded bg-[var(--bitsnap-returns-brand)] px-4 py-2 text-white disabled:opacity-50",children:d.isPending?n.loading:n.submit})]}),p&&o("div",{className:"rounded border p-4",children:[r("h3",{className:"font-semibold",children:"Return submitted"}),o("p",{children:["Reference: ",r("strong",{children:p.reference})]}),o("p",{children:["Status: ",p.status]}),p.returnInstructions&&r("p",{className:"mt-2",children:p.returnInstructions}),r("button",{type:"button",onClick:()=>{E(void 0),X(void 0),f(void 0),Y({}),c.refetch()},className:"mt-3 underline",children:n.history})]}),c.data?.returns&&c.data.returns.length>0&&!p&&o("div",{className:"mt-6",children:[r("h3",{className:"mb-2 font-medium",children:n.history}),c.data.returns.map(s=>o("div",{className:"border-t py-2",children:[r("strong",{children:s.reference}),r("span",{className:"ml-2",children:s.status})]},s.id))]}),B&&r("p",{role:"alert",className:"mt-3 text-sm text-red-700",children:B.message})]})}function w(e){return(Number(e)/100).toFixed(2)}export{T as a,L as b,ue as c,ae as d,ce as e,le as f,de as g,pe as h,Ce as i};
+//# sourceMappingURL=chunk-O4ICBP4G.mjs.map