Skip to content
EvolveEvolveEvolve

feature-return

@evolve-storefront/feature-return · v1.0.0 · Storybook ↗

Returns as requests the seller approves (RMA): see your company's return requests and their status, open one, and request a return from an order. The default form picks delivered lines and quantities, a reason per line, a serial number per unit for a device, photos where the reason needs them, and pickup or an own shipment, and shows any restocking fee before the request goes out. The package ships the data hooks and ready-made components; your app composes them into its own pages.

Get started

  1. Install the package with the peer dependencies it needs. It comes from the Evolve registry, which needs a one-time sign-in.

    pnpm add @evolve-storefront/feature-return @labdigital/graphql-fetcher @tanstack/react-query graphql next next-intl react
    Requirements6
    @labdigital/graphql-fetcher>=3
    @tanstack/react-query>=5
    graphql>=16
    next>=16.2.11 <17
    next-intl>=4
    react>=19

  2. Import its styles in the stylesheet where you load Tailwind. Without them the components render unstyled.

    @import "@evolve-storefront/feature-return/styles.css";

  3. Wrap your app in ReturnProvider. Setup lists its props.

  4. Add its translations to your message files with evolve messages.

Then render it on a page:

"use client";


import { useCancelReturn, useReturn } from "@evolve-storefront/feature-return/hooks";
import { ReturnDetail, ReturnDetailSkeleton } from "@evolve-storefront/feature-return/return-detail";
import { ReturnProvider } from "@evolve-storefront/feature-return/provider";


type Props = { id: string; businessUnitId: string; capabilities: string[] };


export function ReturnPage({ id, ...company }: Props) {
  return (
    <ReturnProvider mode="business" isAuthenticated {...company}>
      <ReturnView id={id} />
    </ReturnProvider>
  );
}


function ReturnView({ id }: { id: string }) {
  const { data: returnEntry, isPending } = useReturn(id);
  const withdraw = useCancelReturn();
  // The query waits for the session, so it stays pending rather than settling empty.
  if (isPending) return <ReturnDetailSkeleton />;
  return returnEntry ? (
    <ReturnDetail
      return={returnEntry}
      onWithdraw={() => withdraw.mutate({ id })}
      isWithdrawing={withdraw.isPending}
    />
  ) : null;
}

Components

What you place on your pages. Each one has a preview, its props, and how to change its layout.

ReturnDetailA single return request: its lines, how the goods go back, and how it was settled.
ReturnListPure presentation of the returns list.
ReturnableOrdersThe shopper's delivered orders that can still be returned, each with its deadline, plus a pager.
ReturnRequestFormThe default return request form, on the evolve-feature-form pattern.
ReturnItemsPickerThe lines of an order to return, controlled.

Hooks

10 hooks to read and change the data yourself, for when you build your own UI. The example above only needs useReturn and useCancelReturn. All hooks

More in this package

  • Setup and server: what the package needs in your project.
  • Advanced: contexts, graphql documents, data and cache helpers, schemas, other functions and constants, types.