@medusajs/loyalty-plugin 0.0.3 → 0.0.4

package/.medusa/server/src/admin/index.js

@@ -640,6 +640,147 @@ const OrderGiftCardsWidget = () => {
 adminSdk.defineWidgetConfig({
   zone: "order.details.side.after"
 });
+const TwoColumnLayout = ({
+  firstCol,
+  secondCol
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-x-4 gap-y-3 xl:flex-row xl:items-start", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col gap-y-3", children: firstCol }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full max-w-[100%] flex-col gap-y-3 xl:mt-0 xl:max-w-[440px]", children: secondCol })
+  ] });
+};
+const PRODUCTS_QUERY_KEY = "products";
+const productsQueryKeys = queryKeysFactory(PRODUCTS_QUERY_KEY);
+const VARIANTS_QUERY_KEY = "product_variants";
+const variantsQueryKeys = queryKeysFactory(VARIANTS_QUERY_KEY);
+const useProducts = (query, options) => {
+  const { data, ...rest } = reactQuery.useQuery({
+    queryFn: () => sdk.admin.product.list(query),
+    queryKey: productsQueryKeys.list(query),
+    ...options
+  });
+  return { ...data, ...rest };
+};
+const useProduct = (id, query, options) => {
+  const { data, ...rest } = reactQuery.useQuery({
+    queryFn: () => sdk.admin.product.retrieve(id, query),
+    queryKey: productsQueryKeys.detail(id, query),
+    ...options
+  });
+  return { ...data, ...rest };
+};
+const useCreateProduct = (options) => {
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: (payload) => sdk.admin.product.create(payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: productsQueryKeys.lists() });
+    },
+    ...options
+  });
+};
+const useDeleteProduct = (id, options) => {
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: () => sdk.admin.product.delete(id),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: productsQueryKeys.lists() });
+      queryClient.invalidateQueries({ queryKey: productsQueryKeys.detail(id) });
+    },
+    ...options
+  });
+};
+const useProductVariants = (productId, query, options) => {
+  const { data, ...rest } = reactQuery.useQuery({
+    queryFn: () => sdk.admin.product.listVariants(productId, query),
+    queryKey: variantsQueryKeys.list({ productId, ...query }),
+    ...options
+  });
+  return { ...data, ...rest };
+};
+const useDeleteVariantLazy = (productId, options) => {
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: ({ variantId }) => sdk.admin.product.deleteVariant(productId, variantId),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: variantsQueryKeys.lists() });
+      queryClient.invalidateQueries({
+        queryKey: variantsQueryKeys.detail(variables.variantId)
+      });
+      queryClient.invalidateQueries({
+        queryKey: productsQueryKeys.detail(productId)
+      });
+    },
+    ...options
+  });
+};
+const useUpdateProduct = (id, options) => {
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: (payload) => sdk.admin.product.update(id, payload),
+    onSuccess: async (data, variables, context) => {
+      await queryClient.invalidateQueries({
+        queryKey: productsQueryKeys.lists()
+      });
+      await queryClient.invalidateQueries({
+        queryKey: productsQueryKeys.details()
+      });
+      await queryClient.invalidateQueries({
+        queryKey: variantsQueryKeys.lists()
+      });
+      await queryClient.invalidateQueries({
+        queryKey: variantsQueryKeys.details()
+      });
+    },
+    ...options
+  });
+};
+const useUpdateProductVariantsBatch = (productId, options) => {
+  const queryClient = reactQuery.useQueryClient();
+  return reactQuery.useMutation({
+    mutationFn: (payload) => sdk.admin.product.batchVariants(productId, {
+      update: payload
+    }),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: variantsQueryKeys.lists() });
+      queryClient.invalidateQueries({ queryKey: variantsQueryKeys.details() });
+      queryClient.invalidateQueries({
+        queryKey: productsQueryKeys.detail(productId)
+      });
+    },
+    ...options
+  });
+};
+const GiftCardProductsSection = () => {
+  const { products: giftCardProducts } = useProducts({
+    is_giftcard: true
+  });
+  if (!(giftCardProducts == null ? void 0 : giftCardProducts.length)) {
+    return;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Header$5, { title: "Gift Card Products" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactRouterDom.Link,
+        {
+          to: `/gift-card-products/create`,
+          className: "text-ui-fg-muted text-sm px-6",
+          children: "Create gift card product"
+        }
+      )
+    ] }),
+    giftCardProducts.map((giftCardProduct) => /* @__PURE__ */ jsxRuntime.jsx(
+      SidebarLink,
+      {
+        to: `/gift-card-products/${giftCardProduct.id}`,
+        labelKey: giftCardProduct.title,
+        descriptionKey: giftCardProduct.title,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Tag, {})
+      }
+    ))
+  ] });
+};
 function useQueryParams(keys, prefix) {
   const [params] = reactRouterDom.useSearchParams();
   const result = {};
@@ -890,108 +1031,282 @@ const DataTableAction = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { ...buttonProps, onClick: props.onClick, children: label });
 };
-const PRODUCTS_QUERY_KEY = "products";
-const productsQueryKeys = queryKeysFactory(PRODUCTS_QUERY_KEY);
-const VARIANTS_QUERY_KEY = "product_variants";
-const variantsQueryKeys = queryKeysFactory(VARIANTS_QUERY_KEY);
-const useProducts = (query, options) => {
-  const { data, ...rest } = reactQuery.useQuery({
-    queryFn: () => sdk.admin.product.list(query),
-    queryKey: productsQueryKeys.list(query),
-    ...options
-  });
-  return { ...data, ...rest };
-};
-const useProduct = (id, query, options) => {
-  const { data, ...rest } = reactQuery.useQuery({
-    queryFn: () => sdk.admin.product.retrieve(id, query),
-    queryKey: productsQueryKeys.detail(id, query),
-    ...options
-  });
-  return { ...data, ...rest };
-};
-const useCreateProduct = (options) => {
-  const queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation({
-    mutationFn: (payload) => sdk.admin.product.create(payload),
-    onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({ queryKey: productsQueryKeys.lists() });
-    },
-    ...options
-  });
-};
-const useDeleteProduct = (id, options) => {
-  const queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation({
-    mutationFn: () => sdk.admin.product.delete(id),
-    onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({ queryKey: productsQueryKeys.lists() });
-      queryClient.invalidateQueries({ queryKey: productsQueryKeys.detail(id) });
-    },
-    ...options
+function getRelativeDate(date) {
+  const now = /* @__PURE__ */ new Date();
+  return dateFns.formatDistance(dateFns.sub(new Date(date), { minutes: 0 }), now, {
+    addSuffix: true,
+    includeSeconds: false
   });
+}
+function formatDate(date, withTime = true) {
+  if (!date) {
+    return "-";
+  }
+  if (withTime) {
+    return dateFns.format(new Date(date), "dd MMM, yyyy, HH:mm:ss");
+  }
+  return dateFns.format(new Date(date), "dd MMM, yyyy");
+}
+const columnHelper$a = ui.createDataTableColumnHelper();
+const useGiftCardTableColumns = () => {
+  return React.useMemo(() => {
+    return [
+      columnHelper$a.accessor("line_item.product.title", {
+        header: "Product",
+        cell: ({ row }) => {
+          var _a, _b;
+          return ((_b = (_a = row.original.line_item) == null ? void 0 : _a.product) == null ? void 0 : _b.title) || "Custom Gift Card";
+        }
+      }),
+      columnHelper$a.accessor("customer.first_name", {
+        header: "Owner",
+        cell: ({ row }) => {
+          if (!row.original.customer) {
+            return "N/A";
+          }
+          const fullName = [
+            row.original.customer.first_name,
+            row.original.customer.last_name
+          ];
+          if (fullName.join("").length > 0) {
+            return fullName.join(" ");
+          }
+          return row.original.customer.email;
+        }
+      }),
+      columnHelper$a.accessor("created_at", {
+        header: "Date issued",
+        cell: ({ row }) => getRelativeDate(row.original.created_at)
+      }),
+      columnHelper$a.accessor("status", {
+        header: "Status",
+        cell: ({ row }) => {
+          const status = getGiftCardStatus(row.original);
+          const color = getGiftCardStatusColor(status);
+          return /* @__PURE__ */ jsxRuntime.jsx(ui.StatusBadge, { color, children: status });
+        }
+      }),
+      columnHelper$a.accessor("value", {
+        header: "Value",
+        cell: ({ row }) => {
+          return formatAmount(row.original.value, row.original.currency_code);
+        }
+      })
+    ];
+  }, []);
 };
-const useProductVariants = (productId, query, options) => {
-  const { data, ...rest } = reactQuery.useQuery({
-    queryFn: () => sdk.admin.product.listVariants(productId, query),
-    queryKey: variantsQueryKeys.list({ productId, ...query }),
-    ...options
+const LOCALE = locale.enUS;
+const getFullDate = ({
+  date,
+  includeTime = false
+}) => {
+  const ensuredDate = new Date(date);
+  if (isNaN(ensuredDate.getTime())) {
+    return "";
+  }
+  const timeFormat = includeTime ? "p" : "";
+  return dateFns.format(ensuredDate, `PP ${timeFormat}`, {
+    locale: LOCALE
   });
-  return { ...data, ...rest };
 };
-const useDeleteVariantLazy = (productId, options) => {
-  const queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation({
-    mutationFn: ({ variantId }) => sdk.admin.product.deleteVariant(productId, variantId),
-    onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({ queryKey: variantsQueryKeys.lists() });
-      queryClient.invalidateQueries({
-        queryKey: variantsQueryKeys.detail(variables.variantId)
-      });
-      queryClient.invalidateQueries({
-        queryKey: productsQueryKeys.detail(productId)
-      });
-    },
-    ...options
-  });
+const filterHelper$4 = ui.createDataTableFilterHelper();
+const useDateFilterOptions$1 = () => {
+  const today = React.useMemo(() => {
+    const date = /* @__PURE__ */ new Date();
+    date.setHours(0, 0, 0, 0);
+    return date;
+  }, []);
+  return React.useMemo(() => {
+    return [
+      {
+        label: "Today",
+        value: {
+          $gte: today.toISOString()
+        }
+      },
+      {
+        label: "Last 7 days",
+        value: {
+          $gte: dateFns.subDays(today, 7).toISOString()
+          // 7 days ago
+        }
+      },
+      {
+        label: "Last 30 days",
+        value: {
+          $gte: dateFns.subDays(today, 30).toISOString()
+          // 30 days ago
+        }
+      },
+      {
+        label: "Last 90 days",
+        value: {
+          $gte: dateFns.subDays(today, 90).toISOString()
+          // 90 days ago
+        }
+      },
+      {
+        label: "Last 12 months",
+        value: {
+          $gte: dateFns.subMonths(today, 12).toISOString()
+          // 12 months ago
+        }
+      }
+    ];
+  }, [today]);
 };
-const useUpdateProduct = (id, options) => {
-  const queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation({
-    mutationFn: (payload) => sdk.admin.product.update(id, payload),
-    onSuccess: async (data, variables, context) => {
-      await queryClient.invalidateQueries({
-        queryKey: productsQueryKeys.lists()
-      });
-      await queryClient.invalidateQueries({
-        queryKey: productsQueryKeys.details()
-      });
-      await queryClient.invalidateQueries({
-        queryKey: variantsQueryKeys.lists()
-      });
-      await queryClient.invalidateQueries({
-        queryKey: variantsQueryKeys.details()
-      });
-    },
+const useDataTableDateFilters$1 = (disableRangeOption) => {
+  const dateFilterOptions = useDateFilterOptions$1();
+  const rangeOptions = React.useMemo(() => {
+    return {
+      rangeOptionStartLabel: "Starting",
+      rangeOptionEndLabel: "Ending",
+      rangeOptionLabel: "Custom",
+      options: dateFilterOptions
+    };
+  }, [disableRangeOption, dateFilterOptions]);
+  return React.useMemo(() => {
+    return [
+      filterHelper$4.accessor("created_at", {
+        type: "date",
+        label: "Created at",
+        format: "date",
+        formatDateValue: (date) => getFullDate({ date }),
+        options: dateFilterOptions,
+        ...rangeOptions
+      }),
+      filterHelper$4.accessor("updated_at", {
+        type: "date",
+        label: "Updated at",
+        format: "date",
+        formatDateValue: (date) => getFullDate({ date }),
+        options: dateFilterOptions,
+        ...rangeOptions
+      })
+    ];
+  }, [dateFilterOptions, getFullDate, rangeOptions]);
+};
+const CUSTOMERS_QUERY_KEY = "customers";
+const customersQueryKeys = queryKeysFactory(CUSTOMERS_QUERY_KEY);
+const useCustomers = (query, options) => {
+  const { data, ...rest } = reactQuery.useQuery({
+    queryFn: () => sdk.admin.customer.list(query),
+    queryKey: customersQueryKeys.list(query),
     ...options
   });
+  return { ...data, ...rest };
 };
-const useUpdateProductVariantsBatch = (productId, options) => {
-  const queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation({
-    mutationFn: (payload) => sdk.admin.product.batchVariants(productId, {
-      update: payload
-    }),
-    onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({ queryKey: variantsQueryKeys.lists() });
-      queryClient.invalidateQueries({ queryKey: variantsQueryKeys.details() });
-      queryClient.invalidateQueries({
-        queryKey: productsQueryKeys.detail(productId)
-      });
-    },
-    ...options
+const filterHelper$3 = ui.createDataTableFilterHelper();
+const useCustomerFilterOptions = () => {
+  const { customers } = useCustomers({ limit: 1e3 });
+  return React.useMemo(() => {
+    return customers == null ? void 0 : customers.map((customer) => {
+      return {
+        label: customer.email,
+        value: customer.id
+      };
+    });
+  }, [customers]);
+};
+const useCustomerFilters = () => {
+  const customerFilterOptions = useCustomerFilterOptions();
+  return React.useMemo(() => {
+    return [
+      filterHelper$3.accessor("customer_id", {
+        type: "select",
+        label: "Owner",
+        options: customerFilterOptions ?? []
+      })
+    ];
+  }, [customerFilterOptions]);
+};
+const useGiftCardFilters = () => {
+  const dateFilterOptions = useDataTableDateFilters$1();
+  const customerFilterOptions = useCustomerFilters();
+  return React.useMemo(() => {
+    return [...dateFilterOptions, ...customerFilterOptions];
+  }, [dateFilterOptions, customerFilterOptions]);
+};
+const useGiftCardTableQuery = ({
+  prefix,
+  pageSize = 20
+}) => {
+  const queryObject = useQueryParams(
+    ["offset", "customer_id", "created_at", "updated_at"],
+    prefix
+  );
+  const { offset, created_at, updated_at, customer_id, ...rest } = queryObject;
+  const searchParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    created_at: created_at ? JSON.parse(created_at) : void 0,
+    updated_at: updated_at ? JSON.parse(updated_at) : void 0,
+    customer_id: customer_id ? JSON.parse(customer_id) : void 0,
+    ...rest
+  };
+  return searchParams;
+};
+const PAGE_SIZE$6 = 10;
+function GiftCardsTable() {
+  const queryParams = useGiftCardTableQuery({
+    pageSize: PAGE_SIZE$6
+  });
+  const {
+    gift_cards: giftCards,
+    isPending,
+    count: count2
+  } = useGiftCards({
+    ...queryParams,
+    order: queryParams.order ?? "-created_at",
+    fields: "+line_item.product.title"
   });
+  const columns = useGiftCardTableColumns();
+  const filters = useGiftCardFilters();
+  return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+      DataTable,
+      {
+        data: giftCards,
+        getRowId: (row) => row.id,
+        columns,
+        filters,
+        isLoading: isPending,
+        pageSize: PAGE_SIZE$6,
+        rowCount: count2,
+        enableSearch: false,
+        heading: "Gift Cards",
+        rowHref: (row) => `${row.id}`,
+        emptyState: {
+          empty: {
+            heading: "No gift cards found",
+            description: "Create a new gift card to get started."
+          },
+          filtered: {
+            heading: "No results found",
+            description: "No gift cards match your filter criteria."
+          }
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
+  ] });
+}
+const GiftCardsPage = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TwoColumnLayout,
+      {
+        firstCol: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(GiftCardsTable, {}) }),
+        secondCol: /* @__PURE__ */ jsxRuntime.jsx(GiftCardProductsSection, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Toaster, {})
+  ] });
 };
+const config$2 = adminSdk.defineRouteConfig({
+  label: "Gift Cards",
+  icon: icons.Gift
+});
 /**
    * table-core
    *
@@ -3767,24 +4082,24 @@ const VariantCell = ({ variants }) => {
 const VariantHeader = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Denominations" }) });
 };
-const columnHelper$a = createColumnHelper();
+const columnHelper$9 = createColumnHelper();
 const useGiftCardProductsTableColumns = () => {
   return React.useMemo(
     () => [
-      columnHelper$a.display({
+      columnHelper$9.display({
         id: "product",
         header: () => /* @__PURE__ */ jsxRuntime.jsx(ProductHeader, {}),
         cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(ProductCell, { product: row.original })
       }),
-      columnHelper$a.accessor("sales_channels", {
+      columnHelper$9.accessor("sales_channels", {
         header: () => /* @__PURE__ */ jsxRuntime.jsx(SalesChannelHeader, {}),
         cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(SalesChannelsCell, { salesChannels: row.original.sales_channels })
       }),
-      columnHelper$a.accessor("variants", {
+      columnHelper$9.accessor("variants", {
         header: () => /* @__PURE__ */ jsxRuntime.jsx(VariantHeader, {}),
         cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(VariantCell, { variants: row.original.variants })
       }),
-      columnHelper$a.accessor("status", {
+      columnHelper$9.accessor("status", {
         header: () => /* @__PURE__ */ jsxRuntime.jsx(ProductStatusHeader, {}),
         cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(ProductStatusCell, { status: row.original.status })
       })
@@ -3792,102 +4107,11 @@ const useGiftCardProductsTableColumns = () => {
     []
   );
 };
-const LOCALE = locale.enUS;
-const getFullDate = ({
-  date,
-  includeTime = false
-}) => {
-  const ensuredDate = new Date(date);
-  if (isNaN(ensuredDate.getTime())) {
-    return "";
-  }
-  const timeFormat = includeTime ? "p" : "";
-  return dateFns.format(ensuredDate, `PP ${timeFormat}`, {
-    locale: LOCALE
-  });
-};
-const filterHelper$4 = ui.createDataTableFilterHelper();
-const useDateFilterOptions$1 = () => {
-  const today = React.useMemo(() => {
-    const date = /* @__PURE__ */ new Date();
-    date.setHours(0, 0, 0, 0);
-    return date;
-  }, []);
-  return React.useMemo(() => {
-    return [
-      {
-        label: "Today",
-        value: {
-          $gte: today.toISOString()
-        }
-      },
-      {
-        label: "Last 7 days",
-        value: {
-          $gte: dateFns.subDays(today, 7).toISOString()
-          // 7 days ago
-        }
-      },
-      {
-        label: "Last 30 days",
-        value: {
-          $gte: dateFns.subDays(today, 30).toISOString()
-          // 30 days ago
-        }
-      },
-      {
-        label: "Last 90 days",
-        value: {
-          $gte: dateFns.subDays(today, 90).toISOString()
-          // 90 days ago
-        }
-      },
-      {
-        label: "Last 12 months",
-        value: {
-          $gte: dateFns.subMonths(today, 12).toISOString()
-          // 12 months ago
-        }
-      }
-    ];
-  }, [today]);
-};
-const useDataTableDateFilters$1 = (disableRangeOption) => {
-  const dateFilterOptions = useDateFilterOptions$1();
-  const rangeOptions = React.useMemo(() => {
-    return {
-      rangeOptionStartLabel: "Starting",
-      rangeOptionEndLabel: "Ending",
-      rangeOptionLabel: "Custom",
-      options: dateFilterOptions
-    };
-  }, [disableRangeOption, dateFilterOptions]);
-  return React.useMemo(() => {
-    return [
-      filterHelper$4.accessor("created_at", {
-        type: "date",
-        label: "Created at",
-        format: "date",
-        formatDateValue: (date) => getFullDate({ date }),
-        options: dateFilterOptions,
-        ...rangeOptions
-      }),
-      filterHelper$4.accessor("updated_at", {
-        type: "date",
-        label: "Updated at",
-        format: "date",
-        formatDateValue: (date) => getFullDate({ date }),
-        options: dateFilterOptions,
-        ...rangeOptions
-      })
-    ];
-  }, [dateFilterOptions, getFullDate, rangeOptions]);
-};
-const useGiftCardProductsFilters = () => {
-  const dateFilterOptions = useDataTableDateFilters$1();
-  return React.useMemo(() => {
-    return [...dateFilterOptions];
-  }, [dateFilterOptions]);
+const useGiftCardProductsFilters = () => {
+  const dateFilterOptions = useDataTableDateFilters$1();
+  return React.useMemo(() => {
+    return [...dateFilterOptions];
+  }, [dateFilterOptions]);
 };
 const useGiftCardProductsTableQuery = ({
   prefix,
@@ -3908,10 +4132,10 @@ const useGiftCardProductsTableQuery = ({
   };
   return searchParams;
 };
-const PAGE_SIZE$6 = 10;
+const PAGE_SIZE$5 = 10;
 function GiftCardProductsTable() {
   const queryParams = useGiftCardProductsTableQuery({
-    pageSize: PAGE_SIZE$6
+    pageSize: PAGE_SIZE$5
   });
   const {
     products: giftCardProducts,
@@ -3933,7 +4157,7 @@ function GiftCardProductsTable() {
         columns,
         filters,
         isLoading: isPending,
-        pageSize: PAGE_SIZE$6,
+        pageSize: PAGE_SIZE$5,
         rowCount: count2,
         enableSearch: false,
         heading: "Gift Card Products",
@@ -3963,7 +4187,7 @@ const GiftCardProductsPage = () => {
     /* @__PURE__ */ jsxRuntime.jsx(ui.Toaster, {})
   ] });
 };
-const config$2 = adminSdk.defineRouteConfig({
+const config$1 = adminSdk.defineRouteConfig({
   label: "Gift Cards",
   nested: "/products"
 });
@@ -17829,7 +18053,7 @@ const GiftCardProductCreateDenominationsForm = ({
     }
   ) });
 };
-const columnHelper$9 = createDataGridHelper();
+const columnHelper$8 = createDataGridHelper();
 const useColumns$3 = ({
   denominations = [],
   currencies: currencies2 = [],
@@ -17838,7 +18062,7 @@ const useColumns$3 = ({
 }) => {
   return React.useMemo(
     () => [
-      columnHelper$9.column({
+      columnHelper$8.column({
         id: "denominations",
         header: () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: "Denomination" }) }),
         cell: (context) => {
@@ -17846,7 +18070,7 @@ const useColumns$3 = ({
         },
         disableHiding: true
       }),
-      columnHelper$9.column({
+      columnHelper$8.column({
         id: "sku",
         name: "SKU",
         header: "SKU",
@@ -23484,12 +23708,12 @@ const useDate = () => {
     getRelativeDate: getRelativeDate2
   };
 };
-const columnHelper$8 = ui.createDataTableColumnHelper();
+const columnHelper$7 = ui.createDataTableColumnHelper();
 const useDataTableDateColumns = () => {
   const { getFullDate: getFullDate2 } = useDate();
   return React.useMemo(() => {
     return [
-      columnHelper$8.accessor("created_at", {
+      columnHelper$7.accessor("created_at", {
         header: "Created at",
         cell: ({ row }) => {
           return /* @__PURE__ */ jsxRuntime.jsx(
@@ -23507,7 +23731,7 @@ const useDataTableDateColumns = () => {
         sortAscLabel: "Asc",
         sortDescLabel: "Desc"
       }),
-      columnHelper$8.accessor("updated_at", {
+      columnHelper$7.accessor("updated_at", {
         header: "Updated at",
         cell: ({ row }) => {
           return /* @__PURE__ */ jsxRuntime.jsx(
@@ -23528,19 +23752,19 @@ const useDataTableDateColumns = () => {
     ];
   }, [getFullDate2]);
 };
-const columnHelper$7 = ui.createDataTableColumnHelper();
+const columnHelper$6 = ui.createDataTableColumnHelper();
 const useSalesChannelTableColumns = () => {
   const dateColumns = useDataTableDateColumns();
   return React.useMemo(
     () => [
-      columnHelper$7.accessor("name", {
+      columnHelper$6.accessor("name", {
         header: () => "Name",
         enableSorting: true,
         sortLabel: "Name",
         sortAscLabel: "Asc",
         sortDescLabel: "Desc"
       }),
-      columnHelper$7.accessor("description", {
+      columnHelper$6.accessor("description", {
         header: () => "Description",
         cell: ({ getValue }) => {
           return /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: getValue(), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: getValue() }) }) });
@@ -23552,7 +23776,7 @@ const useSalesChannelTableColumns = () => {
         maxSize: 250,
         minSize: 100
       }),
-      columnHelper$7.accessor("is_disabled", {
+      columnHelper$6.accessor("is_disabled", {
         header: () => "Status",
         enableSorting: true,
         sortLabel: "Status",
@@ -23583,7 +23807,7 @@ const useSalesChannelTableEmptyState = () => {
     return content;
   }, []);
 };
-const filterHelper$3 = ui.createDataTableFilterHelper();
+const filterHelper$2 = ui.createDataTableFilterHelper();
 const useDateFilterOptions = () => {
   const today = React.useMemo(() => {
     const date = /* @__PURE__ */ new Date();
@@ -23642,7 +23866,7 @@ const useDataTableDateFilters = (disableRangeOption) => {
   }, [disableRangeOption, dateFilterOptions]);
   return React.useMemo(() => {
     return [
-      filterHelper$3.accessor("created_at", {
+      filterHelper$2.accessor("created_at", {
         type: "date",
         label: "Created At",
         format: "date",
@@ -23650,7 +23874,7 @@ const useDataTableDateFilters = (disableRangeOption) => {
         options: dateFilterOptions,
         ...rangeOptions
       }),
-      filterHelper$3.accessor("updated_at", {
+      filterHelper$2.accessor("updated_at", {
         type: "date",
         label: "Updated At",
         format: "date",
@@ -23661,12 +23885,12 @@ const useDataTableDateFilters = (disableRangeOption) => {
     ];
   }, [dateFilterOptions, getFullDate2, rangeOptions]);
 };
-const filterHelper$2 = ui.createDataTableFilterHelper();
+const filterHelper$1 = ui.createDataTableFilterHelper();
 const useSalesChannelTableFilters = () => {
   const dateFilters = useDataTableDateFilters();
   return React.useMemo(
     () => [
-      filterHelper$2.accessor("is_disabled", {
+      filterHelper$1.accessor("is_disabled", {
         label: "Status",
         type: "radio",
         options: [
@@ -23807,7 +24031,7 @@ const PRODUCT_CREATE_FORM_DEFAULTS = {
   weight: "",
   width: ""
 };
-const PAGE_SIZE$5 = 50;
+const PAGE_SIZE$4 = 50;
 const GiftCardProductSalesChannelStackedModal = ({
   form
 }) => {
@@ -23818,7 +24042,7 @@ const GiftCardProductSalesChannelStackedModal = ({
   );
   const [state, setState] = React.useState([]);
   const searchParams = useSalesChannelTableQuery({
-    pageSize: PAGE_SIZE$5,
+    pageSize: PAGE_SIZE$4,
     prefix: SC_STACKED_MODAL_ID
   });
   const { sales_channels, count: count2, isLoading, isError, error } = useSalesChannels(
@@ -23887,7 +24111,7 @@ const GiftCardProductSalesChannelStackedModal = ({
         filters,
         emptyState,
         rowCount: count2,
-        pageSize: PAGE_SIZE$5,
+        pageSize: PAGE_SIZE$4,
         getRowId: (row) => row.id,
         rowSelection: {
           state: rowSelection,
@@ -23904,10 +24128,10 @@ const GiftCardProductSalesChannelStackedModal = ({
     ] }) })
   ] });
 };
-const columnHelper$6 = ui.createDataTableColumnHelper();
+const columnHelper$5 = ui.createDataTableColumnHelper();
 const useColumns$2 = () => {
   const base = useSalesChannelTableColumns();
-  return React.useMemo(() => [columnHelper$6.select(), ...base], [base]);
+  return React.useMemo(() => [columnHelper$5.select(), ...base], [base]);
 };
 const GiftCardProductCreateOrganizeForm = ({
   form
@@ -24256,39 +24480,23 @@ const GiftCardProductCreate = () => {
     )
   ] });
 };
-function getRelativeDate(date) {
-  const now = /* @__PURE__ */ new Date();
-  return dateFns.formatDistance(dateFns.sub(new Date(date), { minutes: 0 }), now, {
-    addSuffix: true,
-    includeSeconds: false
-  });
-}
-function formatDate(date, withTime = true) {
-  if (!date) {
-    return "-";
-  }
-  if (withTime) {
-    return dateFns.format(new Date(date), "dd MMM, yyyy, HH:mm:ss");
-  }
-  return dateFns.format(new Date(date), "dd MMM, yyyy");
-}
-const columnHelper$5 = ui.createDataTableColumnHelper();
+const columnHelper$4 = ui.createDataTableColumnHelper();
 const useStoreCreditAccountTableColumns = () => {
   return React.useMemo(() => {
     return [
-      columnHelper$5.accessor("currency_code", {
+      columnHelper$4.accessor("currency_code", {
         header: "Currency",
         cell: ({ row }) => {
           return /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", children: row.original.currency_code.toUpperCase() });
         }
       }),
-      columnHelper$5.accessor("customer.email", {
+      columnHelper$4.accessor("customer.email", {
         header: "Customer",
         cell: ({ row }) => {
           return row.original.customer.email;
         }
       }),
-      columnHelper$5.accessor("balance", {
+      columnHelper$4.accessor("balance", {
         header: "Balance",
         cell: ({ row }) => {
           return formatAmount(
@@ -24297,7 +24505,7 @@ const useStoreCreditAccountTableColumns = () => {
           );
         }
       }),
-      columnHelper$5.accessor("credits", {
+      columnHelper$4.accessor("credits", {
         header: "Credits",
         cell: ({ row }) => {
           return formatAmount(
@@ -24306,7 +24514,7 @@ const useStoreCreditAccountTableColumns = () => {
           );
         }
       }),
-      columnHelper$5.accessor("debits", {
+      columnHelper$4.accessor("debits", {
         header: "Debits",
         cell: ({ row }) => {
           return formatAmount(
@@ -24315,47 +24523,13 @@ const useStoreCreditAccountTableColumns = () => {
           );
         }
       }),
-      columnHelper$5.accessor("created_at", {
+      columnHelper$4.accessor("created_at", {
         header: "Created at",
         cell: ({ row }) => getRelativeDate(row.original.created_at)
       })
     ];
   }, []);
 };
-const CUSTOMERS_QUERY_KEY = "customers";
-const customersQueryKeys = queryKeysFactory(CUSTOMERS_QUERY_KEY);
-const useCustomers = (query, options) => {
-  const { data, ...rest } = reactQuery.useQuery({
-    queryFn: () => sdk.admin.customer.list(query),
-    queryKey: customersQueryKeys.list(query),
-    ...options
-  });
-  return { ...data, ...rest };
-};
-const filterHelper$1 = ui.createDataTableFilterHelper();
-const useCustomerFilterOptions = () => {
-  const { customers } = useCustomers({ limit: 1e3 });
-  return React.useMemo(() => {
-    return customers == null ? void 0 : customers.map((customer) => {
-      return {
-        label: customer.email,
-        value: customer.id
-      };
-    });
-  }, [customers]);
-};
-const useCustomerFilters = () => {
-  const customerFilterOptions = useCustomerFilterOptions();
-  return React.useMemo(() => {
-    return [
-      filterHelper$1.accessor("customer_id", {
-        type: "select",
-        label: "Owner",
-        options: customerFilterOptions ?? []
-      })
-    ];
-  }, [customerFilterOptions]);
-};
 const useStoreCreditAccountFilters = () => {
   const dateFilterOptions = useDataTableDateFilters$1();
   const customerFilterOptions = useCustomerFilters();
@@ -24390,10 +24564,10 @@ const useStoreCreditAccountsTableQuery = ({
   };
   return searchParams;
 };
-const PAGE_SIZE$4 = 10;
+const PAGE_SIZE$3 = 10;
 function StoreCreditAccountsTable() {
   const queryParams = useStoreCreditAccountsTableQuery({
-    pageSize: PAGE_SIZE$4
+    pageSize: PAGE_SIZE$3
   });
   const {
     store_credit_accounts: storeCreditAccounts,
@@ -24414,7 +24588,7 @@ function StoreCreditAccountsTable() {
         columns,
         filters,
         isLoading: isPending,
-        pageSize: PAGE_SIZE$4,
+        pageSize: PAGE_SIZE$3,
         rowCount: count2,
         enableSearch: false,
         heading: "Store Credit Accounts",
@@ -24440,630 +24614,46 @@ const StoreCreditAccountsPage = () => {
     /* @__PURE__ */ jsxRuntime.jsx(ui.Toaster, {})
   ] });
 };
-const config$1 = adminSdk.defineRouteConfig({
+const config = adminSdk.defineRouteConfig({
   label: "Store Credits",
   icon: icons.CreditCard
 });
-const TwoColumnLayout = ({
-  firstCol,
-  secondCol
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-x-4 gap-y-3 xl:flex-row xl:items-start", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col gap-y-3", children: firstCol }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full max-w-[100%] flex-col gap-y-3 xl:mt-0 xl:max-w-[440px]", children: secondCol })
-  ] });
+function _objectWithoutPropertiesLoose(r2, e2) {
+  if (null == r2) return {};
+  var t2 = {};
+  for (var n2 in r2) if ({}.hasOwnProperty.call(r2, n2)) {
+    if (-1 !== e2.indexOf(n2)) continue;
+    t2[n2] = r2[n2];
+  }
+  return t2;
+}
+var initialState$5 = {};
+var Context$5 = /* @__PURE__ */ React.createContext(initialState$5);
+var reducer$5 = (state, action) => _extends({}, state, action);
+var useShowToolsStore = () => {
+  return React.useContext(Context$5);
 };
-const GiftCardProductsSection = () => {
-  const { products: giftCardProducts } = useProducts({
-    is_giftcard: true
-  });
-  if (!(giftCardProducts == null ? void 0 : giftCardProducts.length)) {
-    return;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Header$5, { title: "Gift Card Products" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactRouterDom.Link,
-        {
-          to: `/gift-card-products/create`,
-          className: "text-ui-fg-muted text-sm px-6",
-          children: "Create gift card product"
-        }
-      )
-    ] }),
-    giftCardProducts.map((giftCardProduct) => /* @__PURE__ */ jsxRuntime.jsx(
-      SidebarLink,
-      {
-        to: `/gift-card-products/${giftCardProduct.id}`,
-        labelKey: giftCardProduct.title,
-        descriptionKey: giftCardProduct.title,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Tag, {})
-      }
-    ))
-  ] });
-};
-const columnHelper$4 = ui.createDataTableColumnHelper();
-const useGiftCardTableColumns = () => {
-  return React.useMemo(() => {
-    return [
-      columnHelper$4.accessor("line_item.product.title", {
-        header: "Product",
-        cell: ({ row }) => {
-          var _a, _b;
-          return ((_b = (_a = row.original.line_item) == null ? void 0 : _a.product) == null ? void 0 : _b.title) || "Custom Gift Card";
-        }
-      }),
-      columnHelper$4.accessor("customer.first_name", {
-        header: "Owner",
-        cell: ({ row }) => {
-          if (!row.original.customer) {
-            return "N/A";
-          }
-          const fullName = [
-            row.original.customer.first_name,
-            row.original.customer.last_name
-          ];
-          if (fullName.join("").length > 0) {
-            return fullName.join(" ");
-          }
-          return row.original.customer.email;
-        }
-      }),
-      columnHelper$4.accessor("created_at", {
-        header: "Date issued",
-        cell: ({ row }) => getRelativeDate(row.original.created_at)
-      }),
-      columnHelper$4.accessor("status", {
-        header: "Status",
-        cell: ({ row }) => {
-          const status = getGiftCardStatus(row.original);
-          const color = getGiftCardStatusColor(status);
-          return /* @__PURE__ */ jsxRuntime.jsx(ui.StatusBadge, { color, children: status });
-        }
-      }),
-      columnHelper$4.accessor("value", {
-        header: "Value",
-        cell: ({ row }) => {
-          return formatAmount(row.original.value, row.original.currency_code);
-        }
-      })
-    ];
-  }, []);
-};
-const useGiftCardFilters = () => {
-  const dateFilterOptions = useDataTableDateFilters$1();
-  const customerFilterOptions = useCustomerFilters();
-  return React.useMemo(() => {
-    return [...dateFilterOptions, ...customerFilterOptions];
-  }, [dateFilterOptions, customerFilterOptions]);
-};
-const useGiftCardTableQuery = ({
-  prefix,
-  pageSize = 20
-}) => {
-  const queryObject = useQueryParams(
-    ["offset", "customer_id", "created_at", "updated_at"],
-    prefix
-  );
-  const { offset, created_at, updated_at, customer_id, ...rest } = queryObject;
-  const searchParams = {
-    limit: pageSize,
-    offset: offset ? Number(offset) : 0,
-    created_at: created_at ? JSON.parse(created_at) : void 0,
-    updated_at: updated_at ? JSON.parse(updated_at) : void 0,
-    customer_id: customer_id ? JSON.parse(customer_id) : void 0,
-    ...rest
-  };
-  return searchParams;
-};
-const PAGE_SIZE$3 = 10;
-function GiftCardsTable() {
-  const queryParams = useGiftCardTableQuery({
-    pageSize: PAGE_SIZE$3
-  });
-  const {
-    gift_cards: giftCards,
-    isPending,
-    count: count2
-  } = useGiftCards({
-    ...queryParams,
-    order: queryParams.order ?? "-created_at",
-    fields: "+line_item.product.title"
-  });
-  const columns = useGiftCardTableColumns();
-  const filters = useGiftCardFilters();
-  return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-      DataTable,
-      {
-        data: giftCards,
-        getRowId: (row) => row.id,
-        columns,
-        filters,
-        isLoading: isPending,
-        pageSize: PAGE_SIZE$3,
-        rowCount: count2,
-        enableSearch: false,
-        heading: "Gift Cards",
-        rowHref: (row) => `${row.id}`,
-        emptyState: {
-          empty: {
-            heading: "No gift cards found",
-            description: "Create a new gift card to get started."
-          },
-          filtered: {
-            heading: "No results found",
-            description: "No gift cards match your filter criteria."
-          }
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
-  ] });
-}
-const GiftCardsPage = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      TwoColumnLayout,
-      {
-        firstCol: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(GiftCardsTable, {}) }),
-        secondCol: /* @__PURE__ */ jsxRuntime.jsx(GiftCardProductsSection, {})
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Toaster, {})
-  ] });
-};
-const config = adminSdk.defineRouteConfig({
-  label: "Gift Cards",
-  icon: icons.Gift
-});
-const StoreCreditAccountBalanceSection = ({
-  storeCreditAccount
-}) => {
-  if (!storeCreditAccount || typeof storeCreditAccount.balance === "undefined") {
-    return;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "grid grid-cols-2 gap-x-2 px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-x-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-tag-green-icon h-8 w-1 rounded-full" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { weight: "plus", size: "small", className: "text-ui-fg-subtle", children: "Current Balance" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Text,
-        {
-          weight: "plus",
-          size: "xlarge",
-          className: "tabular-nums text-ui-fg-base",
-          children: formatAmount(
-            storeCreditAccount.balance,
-            storeCreditAccount.currency_code
-          )
-        }
-      )
-    ] })
-  ] }) });
-};
-var toggleSelection = function() {
-  var selection = document.getSelection();
-  if (!selection.rangeCount) {
-    return function() {
-    };
-  }
-  var active = document.activeElement;
-  var ranges = [];
-  for (var i2 = 0; i2 < selection.rangeCount; i2++) {
-    ranges.push(selection.getRangeAt(i2));
-  }
-  switch (active.tagName.toUpperCase()) {
-    case "INPUT":
-    case "TEXTAREA":
-      active.blur();
-      break;
-    default:
-      active = null;
-      break;
-  }
-  selection.removeAllRanges();
-  return function() {
-    selection.type === "Caret" && selection.removeAllRanges();
-    if (!selection.rangeCount) {
-      ranges.forEach(function(range) {
-        selection.addRange(range);
-      });
-    }
-    active && active.focus();
-  };
-};
-var deselectCurrent = toggleSelection;
-var clipboardToIE11Formatting = {
-  "text/plain": "Text",
-  "text/html": "Url",
-  "default": "Text"
-};
-var defaultMessage = "Copy to clipboard: #{key}, Enter";
-function format(message) {
-  var copyKey = (/mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl") + "+C";
-  return message.replace(/#{\s*key\s*}/g, copyKey);
-}
-function copy(text2, options) {
-  var debug2, message, reselectPrevious, range, selection, mark, success = false;
-  if (!options) {
-    options = {};
-  }
-  debug2 = options.debug || false;
-  try {
-    reselectPrevious = deselectCurrent();
-    range = document.createRange();
-    selection = document.getSelection();
-    mark = document.createElement("span");
-    mark.textContent = text2;
-    mark.ariaHidden = "true";
-    mark.style.all = "unset";
-    mark.style.position = "fixed";
-    mark.style.top = 0;
-    mark.style.clip = "rect(0, 0, 0, 0)";
-    mark.style.whiteSpace = "pre";
-    mark.style.webkitUserSelect = "text";
-    mark.style.MozUserSelect = "text";
-    mark.style.msUserSelect = "text";
-    mark.style.userSelect = "text";
-    mark.addEventListener("copy", function(e2) {
-      e2.stopPropagation();
-      if (options.format) {
-        e2.preventDefault();
-        if (typeof e2.clipboardData === "undefined") {
-          debug2 && console.warn("unable to use e.clipboardData");
-          debug2 && console.warn("trying IE specific stuff");
-          window.clipboardData.clearData();
-          var format2 = clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting["default"];
-          window.clipboardData.setData(format2, text2);
-        } else {
-          e2.clipboardData.clearData();
-          e2.clipboardData.setData(options.format, text2);
-        }
-      }
-      if (options.onCopy) {
-        e2.preventDefault();
-        options.onCopy(e2.clipboardData);
-      }
-    });
-    document.body.appendChild(mark);
-    range.selectNodeContents(mark);
-    selection.addRange(range);
-    var successful = document.execCommand("copy");
-    if (!successful) {
-      throw new Error("copy command was unsuccessful");
-    }
-    success = true;
-  } catch (err) {
-    debug2 && console.error("unable to copy using execCommand: ", err);
-    debug2 && console.warn("trying IE specific stuff");
-    try {
-      window.clipboardData.setData(options.format || "text", text2);
-      options.onCopy && options.onCopy(window.clipboardData);
-      success = true;
-    } catch (err2) {
-      debug2 && console.error("unable to copy using clipboardData: ", err2);
-      debug2 && console.error("falling back to prompt");
-      message = format("message" in options ? options.message : defaultMessage);
-      window.prompt(message, text2);
-    }
-  } finally {
-    if (selection) {
-      if (typeof selection.removeRange == "function") {
-        selection.removeRange(range);
-      } else {
-        selection.removeAllRanges();
-      }
-    }
-    if (mark) {
-      document.body.removeChild(mark);
-    }
-    reselectPrevious();
-  }
-  return success;
-}
-var copyToClipboard = copy;
-const copy$1 = /* @__PURE__ */ getDefaultExportFromCjs(copyToClipboard);
-function DisplayId({ id, className }) {
-  const [open, setOpen] = React.useState(false);
-  const onClick = () => {
-    copy$1(id);
-    ui.toast.success("Copied to clipboard");
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { maxWidth: 260, content: id, open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { onClick, className: ui.clx("cursor-pointer", className), children: [
-    "#",
-    id.slice(-7)
-  ] }) });
-}
-const StoreCreditAccountDetailsSection = ({
-  storeCreditAccount
-}) => {
-  if (!storeCreditAccount || typeof storeCreditAccount.balance === "undefined") {
-    return;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "grid grid-cols-2 gap-x-2 px-6 py-6", children: /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Text,
-    {
-      weight: "plus",
-      size: "xlarge",
-      className: "text-ui-fg-base flex gap-x-4",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CreditCardIcon, { className: "inline" }),
-          " "
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle", children: [
-            storeCreditAccount.currency_code.toUpperCase(),
-            " Account"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-ui-fg-base", children: /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Text,
-            {
-              weight: "regular",
-              size: "small",
-              className: "text-ui-fg-base flex gap-x-4",
-              children: /* @__PURE__ */ jsxRuntime.jsx(DisplayId, { id: storeCreditAccount.id })
-            }
-          ) })
-        ] })
-      ]
-    }
-  ) });
-};
-const transactionQueryKey = queryKeysFactory("transaction");
-const useStoreCreditAccountTransactions = (id, query, options) => {
-  const fetchStoreCreditAccountTransactions = (query2, headers) => sdk.client.fetch(
-    `/admin/store-credit-accounts/${id}/transactions`,
-    {
-      query: query2,
-      headers
-    }
-  );
-  const { data, ...rest } = reactQuery.useQuery({
-    queryFn: () => fetchStoreCreditAccountTransactions(query),
-    queryKey: transactionQueryKey.list(query),
-    ...options
-  });
-  return { ...data, ...rest };
-};
-const columnHelper$3 = ui.createDataTableColumnHelper();
-const useTransactionsTableColumns = () => {
-  return React.useMemo(() => {
-    return [
-      columnHelper$3.accessor("id", {
-        header: "ID",
-        cell: ({ row }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(DisplayId, { id: row.original.id });
-        }
-      }),
-      columnHelper$3.accessor("created_at", {
-        header: "Created At",
-        cell: ({ row }) => formatDate(row.original.created_at, false)
-      }),
-      columnHelper$3.accessor("reference", {
-        header: "Reference",
-        cell: ({ row }) => {
-          var _a;
-          const prettyReference = (_a = row.original.reference) == null ? void 0 : _a.split("_").join(" ").split("-").join(" ");
-          return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "capitalize", children: prettyReference });
-        }
-      }),
-      columnHelper$3.accessor("reference_id", {
-        header: "Reference ID",
-        cell: ({ row }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(DisplayId, { id: row.original.reference_id });
-        }
-      }),
-      columnHelper$3.accessor("amount", {
-        header: "Amount",
-        cell: ({ row }) => {
-          return row.original.account.currency_code && formatAmount(
-            row.original.amount,
-            row.original.account.currency_code
-          );
-        }
-      })
-    ];
-  }, []);
-};
-const transactionGroupQueryKey = queryKeysFactory("transaction-group");
-const useTransactionGroups = (query, options) => {
-  const fetchTransactionGroups = (query2, headers) => sdk.client.fetch(
-    `/admin/transaction-groups`,
-    {
-      query: query2,
-      headers
-    }
-  );
-  const { data, ...rest } = reactQuery.useQuery({
-    queryFn: () => fetchTransactionGroups(query),
-    queryKey: transactionGroupQueryKey.list(query),
-    ...options
-  });
-  return { ...data, ...rest };
-};
-const filterHelper = ui.createDataTableFilterHelper();
-const useTransactionGroupFilterOptions = () => {
-  const { transaction_groups } = useTransactionGroups({ limit: 1e3 });
-  return React.useMemo(() => {
-    return transaction_groups == null ? void 0 : transaction_groups.map((transactionGroup) => {
-      return {
-        label: transactionGroup.code,
-        value: transactionGroup.id
-      };
-    });
-  }, [transaction_groups]);
-};
-const useTransactionGroupFilters = () => {
-  const transactionGroupFilterOptions = useTransactionGroupFilterOptions();
-  return React.useMemo(() => {
-    return [
-      filterHelper.accessor("transaction_group_id", {
-        type: "select",
-        label: "Transaction Group",
-        options: transactionGroupFilterOptions ?? []
-      })
-    ];
-  }, [transactionGroupFilterOptions]);
-};
-const useTransactionsTableFilters = ({
-  transactionGroup
-}) => {
-  const dateFilterOptions = useDataTableDateFilters$1();
-  const transactionGroupFilters = useTransactionGroupFilters();
-  return React.useMemo(() => {
-    if (transactionGroup) {
-      return [...dateFilterOptions];
-    }
-    return [...dateFilterOptions, ...transactionGroupFilters];
-  }, [dateFilterOptions, transactionGroupFilters, transactionGroup]);
-};
-const useTransactionsTableQuery = ({
-  prefix,
-  pageSize = 20
-}) => {
-  const queryObject = useQueryParams(
-    [
-      "offset",
-      "limit",
-      "transaction_group_id",
-      "currency_code",
-      "created_at",
-      "updated_at"
-    ],
-    prefix
-  );
-  const {
-    offset,
-    limit,
-    created_at,
-    updated_at,
-    transaction_group_id,
-    ...rest
-  } = queryObject;
-  const searchParams = {
-    limit: limit ? Number(limit) : pageSize,
-    offset: offset ? Number(offset) : 0,
-    created_at: created_at ? JSON.parse(created_at) : void 0,
-    updated_at: updated_at ? JSON.parse(updated_at) : void 0,
-    transaction_group_id: transaction_group_id ? JSON.parse(transaction_group_id) : void 0,
-    ...rest
-  };
-  return searchParams;
-};
-const PAGE_SIZE$2 = 10;
-function TransactionsTable({
-  id,
-  transactionGroup
-}) {
-  const queryParams = useTransactionsTableQuery({
-    pageSize: PAGE_SIZE$2
-  });
-  const { transactions, isLoading, count: count2 } = useStoreCreditAccountTransactions(
-    id,
-    {
-      ...queryParams,
-      transaction_group_id: transactionGroup == null ? void 0 : transactionGroup.id,
-      order: queryParams.order ?? "-created_at",
-      fields: "*account,*transaction_group"
-    }
-  );
-  const columns = useTransactionsTableColumns();
-  const filters = useTransactionsTableFilters({ transactionGroup });
-  return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-      DataTable,
-      {
-        data: transactions ?? [],
-        getRowId: (row) => row.id,
-        columns,
-        filters,
-        isLoading,
-        pageSize: PAGE_SIZE$2,
-        rowCount: count2,
-        enableSearch: false,
-        heading: "Transactions",
-        emptyState: {
-          empty: {
-            heading: "No transactions found"
-          },
-          filtered: {
-            heading: "No results found",
-            description: "No transactions match your filter criteria."
-          }
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
-  ] });
-}
-const StoreCreditAccountPage = () => {
-  const { id } = reactRouterDom.useParams();
-  const { store_credit_account: storeCreditAccount } = useStoreCreditAccount(
-    id
-  );
-  if (!storeCreditAccount) {
-    return;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    TwoColumnLayout,
-    {
-      firstCol: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          StoreCreditAccountDetailsSection,
-          {
-            storeCreditAccount
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(TransactionsTable, { id: storeCreditAccount.id })
-      ] }),
-      secondCol: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        StoreCreditAccountBalanceSection,
-        {
-          storeCreditAccount
-        }
-      ) })
-    }
-  ) });
-};
-function _objectWithoutPropertiesLoose(r2, e2) {
-  if (null == r2) return {};
-  var t2 = {};
-  for (var n2 in r2) if ({}.hasOwnProperty.call(r2, n2)) {
-    if (-1 !== e2.indexOf(n2)) continue;
-    t2[n2] = r2[n2];
-  }
-  return t2;
-}
-var initialState$5 = {};
-var Context$5 = /* @__PURE__ */ React.createContext(initialState$5);
-var reducer$5 = (state, action) => _extends({}, state, action);
-var useShowToolsStore = () => {
-  return React.useContext(Context$5);
-};
-var DispatchShowTools = /* @__PURE__ */ React.createContext(() => {
-});
-DispatchShowTools.displayName = "JVR.DispatchShowTools";
-function useShowTools() {
-  return React.useReducer(reducer$5, initialState$5);
-}
-function useShowToolsDispatch() {
-  return React.useContext(DispatchShowTools);
-}
-var ShowTools = (_ref) => {
-  var {
-    initial,
-    dispatch,
-    children
-  } = _ref;
-  return /* @__PURE__ */ jsxRuntime.jsx(Context$5.Provider, {
-    value: initial,
-    children: /* @__PURE__ */ jsxRuntime.jsx(DispatchShowTools.Provider, {
-      value: dispatch,
-      children
-    })
+var DispatchShowTools = /* @__PURE__ */ React.createContext(() => {
+});
+DispatchShowTools.displayName = "JVR.DispatchShowTools";
+function useShowTools() {
+  return React.useReducer(reducer$5, initialState$5);
+}
+function useShowToolsDispatch() {
+  return React.useContext(DispatchShowTools);
+}
+var ShowTools = (_ref) => {
+  var {
+    initial,
+    dispatch,
+    children
+  } = _ref;
+  return /* @__PURE__ */ jsxRuntime.jsx(Context$5.Provider, {
+    value: initial,
+    children: /* @__PURE__ */ jsxRuntime.jsx(DispatchShowTools.Provider, {
+      value: dispatch,
+      children
+    })
   });
 };
 ShowTools.displayName = "JVR.ShowTools";
@@ -27413,6 +27003,22 @@ const Copied = ({ style, value }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...style, ...styl }, onClick: handler, children: /* @__PURE__ */ jsxRuntime.jsx(icons.SquareTwoStack, { className: "text-ui-contrast-fg-secondary" }) });
 };
+const transactionGroupQueryKey = queryKeysFactory("transaction-group");
+const useTransactionGroups = (query, options) => {
+  const fetchTransactionGroups = (query2, headers) => sdk.client.fetch(
+    `/admin/transaction-groups`,
+    {
+      query: query2,
+      headers
+    }
+  );
+  const { data, ...rest } = reactQuery.useQuery({
+    queryFn: () => fetchTransactionGroups(query),
+    queryKey: transactionGroupQueryKey.list(query),
+    ...options
+  });
+  return { ...data, ...rest };
+};
 const GiftCardBalanceSection = ({
   storeCreditAccount,
   giftCard
@@ -27637,81 +27243,385 @@ const GiftCardGeneralSection = ({ giftCard }) => {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      SectionRow,
+      SectionRow,
+      {
+        title: "Creation Date",
+        value: getRelativeDate(giftCard.created_at)
+      }
+    )
+  ] });
+};
+const GiftCardNoteSection = ({ giftCard }) => {
+  if (!giftCard) {
+    return;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Header$5, { title: "Note" }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: "note", className: "text-ui-fg-muted text-sm px-6", children: "Edit note" })
+    ] }),
+    giftCard.note && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 px-2 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shadow-elevation-card-rest bg-ui-bg-component transition-fg hover:bg-ui-bg-component-hover active:bg-ui-bg-component-pressed group-focus-visible:shadow-borders-interactive-with-active rounded-md px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Text,
+      {
+        size: "small",
+        leading: "compact",
+        className: "text-ui-fg-subtle",
+        children: giftCard.note ?? ""
+      }
+    ) }) }) }) })
+  ] });
+};
+const GiftCardOrderSection = ({ giftCard }) => {
+  if (!giftCard || giftCard.reference !== "order") {
+    return;
+  }
+  const { order, isLoading, isError, error } = useOrder(giftCard.reference_id);
+  if (isError) {
+    throw error;
+  }
+  if (isLoading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Header$5, { title: "Order" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SidebarLink,
       {
-        title: "Creation Date",
-        value: getRelativeDate(giftCard.created_at)
+        to: `/orders/${order.id}`,
+        labelKey: `#${order.display_id}`,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.ShoppingCart, {}),
+        descriptionKey: `Order #${order.display_id}`
       }
     )
   ] });
 };
-const GiftCardNoteSection = ({ giftCard }) => {
+const GiftCardOwnerSection = ({ giftCard }) => {
   if (!giftCard) {
     return;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Header$5, { title: "Note" }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: "note", className: "text-ui-fg-muted text-sm px-6", children: "Edit note" })
+      /* @__PURE__ */ jsxRuntime.jsx(Header$5, { title: "Owner" }),
+      giftCard.status !== GiftCardStatus.REDEEMED && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: `owner`, className: "text-ui-fg-muted text-sm px-6", children: "Transfer ownership" })
     ] }),
-    giftCard.note && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 px-2 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shadow-elevation-card-rest bg-ui-bg-component transition-fg hover:bg-ui-bg-component-hover active:bg-ui-bg-component-pressed group-focus-visible:shadow-borders-interactive-with-active rounded-md px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Text,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SidebarLink,
       {
-        size: "small",
-        leading: "compact",
-        className: "text-ui-fg-subtle",
-        children: giftCard.note ?? ""
+        to: `/customers/${giftCard.customer.id}`,
+        labelKey: `${[
+          giftCard.customer.first_name,
+          giftCard.customer.last_name
+        ].join(" ")}`,
+        descriptionKey: giftCard.customer.email,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.UserMini, {})
       }
-    ) }) }) }) })
+    )
   ] });
 };
-const GiftCardOrderSection = ({ giftCard }) => {
-  if (!giftCard || giftCard.reference !== "order") {
-    return;
-  }
-  const { order, isLoading, isError, error } = useOrder(giftCard.reference_id);
-  if (isError) {
-    throw error;
-  }
-  if (isLoading) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Header$5, { title: "Order" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      SidebarLink,
-      {
-        to: `/orders/${order.id}`,
-        labelKey: `#${order.display_id}`,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.ShoppingCart, {}),
-        descriptionKey: `Order #${order.display_id}`
-      }
-    )
-  ] });
+const transactionQueryKey = queryKeysFactory("transaction");
+const useStoreCreditAccountTransactions = (id, query, options) => {
+  const fetchStoreCreditAccountTransactions = (query2, headers) => sdk.client.fetch(
+    `/admin/store-credit-accounts/${id}/transactions`,
+    {
+      query: query2,
+      headers
+    }
+  );
+  const { data, ...rest } = reactQuery.useQuery({
+    queryFn: () => fetchStoreCreditAccountTransactions(query),
+    queryKey: transactionQueryKey.list(query),
+    ...options
+  });
+  return { ...data, ...rest };
+};
+var toggleSelection = function() {
+  var selection = document.getSelection();
+  if (!selection.rangeCount) {
+    return function() {
+    };
+  }
+  var active = document.activeElement;
+  var ranges = [];
+  for (var i2 = 0; i2 < selection.rangeCount; i2++) {
+    ranges.push(selection.getRangeAt(i2));
+  }
+  switch (active.tagName.toUpperCase()) {
+    case "INPUT":
+    case "TEXTAREA":
+      active.blur();
+      break;
+    default:
+      active = null;
+      break;
+  }
+  selection.removeAllRanges();
+  return function() {
+    selection.type === "Caret" && selection.removeAllRanges();
+    if (!selection.rangeCount) {
+      ranges.forEach(function(range) {
+        selection.addRange(range);
+      });
+    }
+    active && active.focus();
+  };
+};
+var deselectCurrent = toggleSelection;
+var clipboardToIE11Formatting = {
+  "text/plain": "Text",
+  "text/html": "Url",
+  "default": "Text"
+};
+var defaultMessage = "Copy to clipboard: #{key}, Enter";
+function format(message) {
+  var copyKey = (/mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl") + "+C";
+  return message.replace(/#{\s*key\s*}/g, copyKey);
+}
+function copy(text2, options) {
+  var debug2, message, reselectPrevious, range, selection, mark, success = false;
+  if (!options) {
+    options = {};
+  }
+  debug2 = options.debug || false;
+  try {
+    reselectPrevious = deselectCurrent();
+    range = document.createRange();
+    selection = document.getSelection();
+    mark = document.createElement("span");
+    mark.textContent = text2;
+    mark.ariaHidden = "true";
+    mark.style.all = "unset";
+    mark.style.position = "fixed";
+    mark.style.top = 0;
+    mark.style.clip = "rect(0, 0, 0, 0)";
+    mark.style.whiteSpace = "pre";
+    mark.style.webkitUserSelect = "text";
+    mark.style.MozUserSelect = "text";
+    mark.style.msUserSelect = "text";
+    mark.style.userSelect = "text";
+    mark.addEventListener("copy", function(e2) {
+      e2.stopPropagation();
+      if (options.format) {
+        e2.preventDefault();
+        if (typeof e2.clipboardData === "undefined") {
+          debug2 && console.warn("unable to use e.clipboardData");
+          debug2 && console.warn("trying IE specific stuff");
+          window.clipboardData.clearData();
+          var format2 = clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting["default"];
+          window.clipboardData.setData(format2, text2);
+        } else {
+          e2.clipboardData.clearData();
+          e2.clipboardData.setData(options.format, text2);
+        }
+      }
+      if (options.onCopy) {
+        e2.preventDefault();
+        options.onCopy(e2.clipboardData);
+      }
+    });
+    document.body.appendChild(mark);
+    range.selectNodeContents(mark);
+    selection.addRange(range);
+    var successful = document.execCommand("copy");
+    if (!successful) {
+      throw new Error("copy command was unsuccessful");
+    }
+    success = true;
+  } catch (err) {
+    debug2 && console.error("unable to copy using execCommand: ", err);
+    debug2 && console.warn("trying IE specific stuff");
+    try {
+      window.clipboardData.setData(options.format || "text", text2);
+      options.onCopy && options.onCopy(window.clipboardData);
+      success = true;
+    } catch (err2) {
+      debug2 && console.error("unable to copy using clipboardData: ", err2);
+      debug2 && console.error("falling back to prompt");
+      message = format("message" in options ? options.message : defaultMessage);
+      window.prompt(message, text2);
+    }
+  } finally {
+    if (selection) {
+      if (typeof selection.removeRange == "function") {
+        selection.removeRange(range);
+      } else {
+        selection.removeAllRanges();
+      }
+    }
+    if (mark) {
+      document.body.removeChild(mark);
+    }
+    reselectPrevious();
+  }
+  return success;
+}
+var copyToClipboard = copy;
+const copy$1 = /* @__PURE__ */ getDefaultExportFromCjs(copyToClipboard);
+function DisplayId({ id, className }) {
+  const [open, setOpen] = React.useState(false);
+  const onClick = () => {
+    copy$1(id);
+    ui.toast.success("Copied to clipboard");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { maxWidth: 260, content: id, open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { onClick, className: ui.clx("cursor-pointer", className), children: [
+    "#",
+    id.slice(-7)
+  ] }) });
+}
+const columnHelper$3 = ui.createDataTableColumnHelper();
+const useTransactionsTableColumns = () => {
+  return React.useMemo(() => {
+    return [
+      columnHelper$3.accessor("id", {
+        header: "ID",
+        cell: ({ row }) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(DisplayId, { id: row.original.id });
+        }
+      }),
+      columnHelper$3.accessor("created_at", {
+        header: "Created At",
+        cell: ({ row }) => formatDate(row.original.created_at, false)
+      }),
+      columnHelper$3.accessor("reference", {
+        header: "Reference",
+        cell: ({ row }) => {
+          var _a;
+          const prettyReference = (_a = row.original.reference) == null ? void 0 : _a.split("_").join(" ").split("-").join(" ");
+          return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "capitalize", children: prettyReference });
+        }
+      }),
+      columnHelper$3.accessor("reference_id", {
+        header: "Reference ID",
+        cell: ({ row }) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(DisplayId, { id: row.original.reference_id });
+        }
+      }),
+      columnHelper$3.accessor("amount", {
+        header: "Amount",
+        cell: ({ row }) => {
+          return row.original.account.currency_code && formatAmount(
+            row.original.amount,
+            row.original.account.currency_code
+          );
+        }
+      })
+    ];
+  }, []);
+};
+const filterHelper = ui.createDataTableFilterHelper();
+const useTransactionGroupFilterOptions = () => {
+  const { transaction_groups } = useTransactionGroups({ limit: 1e3 });
+  return React.useMemo(() => {
+    return transaction_groups == null ? void 0 : transaction_groups.map((transactionGroup) => {
+      return {
+        label: transactionGroup.code,
+        value: transactionGroup.id
+      };
+    });
+  }, [transaction_groups]);
+};
+const useTransactionGroupFilters = () => {
+  const transactionGroupFilterOptions = useTransactionGroupFilterOptions();
+  return React.useMemo(() => {
+    return [
+      filterHelper.accessor("transaction_group_id", {
+        type: "select",
+        label: "Transaction Group",
+        options: transactionGroupFilterOptions ?? []
+      })
+    ];
+  }, [transactionGroupFilterOptions]);
+};
+const useTransactionsTableFilters = ({
+  transactionGroup
+}) => {
+  const dateFilterOptions = useDataTableDateFilters$1();
+  const transactionGroupFilters = useTransactionGroupFilters();
+  return React.useMemo(() => {
+    if (transactionGroup) {
+      return [...dateFilterOptions];
+    }
+    return [...dateFilterOptions, ...transactionGroupFilters];
+  }, [dateFilterOptions, transactionGroupFilters, transactionGroup]);
+};
+const useTransactionsTableQuery = ({
+  prefix,
+  pageSize = 20
+}) => {
+  const queryObject = useQueryParams(
+    [
+      "offset",
+      "limit",
+      "transaction_group_id",
+      "currency_code",
+      "created_at",
+      "updated_at"
+    ],
+    prefix
+  );
+  const {
+    offset,
+    limit,
+    created_at,
+    updated_at,
+    transaction_group_id,
+    ...rest
+  } = queryObject;
+  const searchParams = {
+    limit: limit ? Number(limit) : pageSize,
+    offset: offset ? Number(offset) : 0,
+    created_at: created_at ? JSON.parse(created_at) : void 0,
+    updated_at: updated_at ? JSON.parse(updated_at) : void 0,
+    transaction_group_id: transaction_group_id ? JSON.parse(transaction_group_id) : void 0,
+    ...rest
+  };
+  return searchParams;
 };
-const GiftCardOwnerSection = ({ giftCard }) => {
-  if (!giftCard) {
-    return;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Header$5, { title: "Owner" }),
-      giftCard.status !== GiftCardStatus.REDEEMED && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: `owner`, className: "text-ui-fg-muted text-sm px-6", children: "Transfer ownership" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      SidebarLink,
+const PAGE_SIZE$2 = 10;
+function TransactionsTable({
+  id,
+  transactionGroup
+}) {
+  const queryParams = useTransactionsTableQuery({
+    pageSize: PAGE_SIZE$2
+  });
+  const { transactions, isLoading, count: count2 } = useStoreCreditAccountTransactions(
+    id,
+    {
+      ...queryParams,
+      transaction_group_id: transactionGroup == null ? void 0 : transactionGroup.id,
+      order: queryParams.order ?? "-created_at",
+      fields: "*account,*transaction_group"
+    }
+  );
+  const columns = useTransactionsTableColumns();
+  const filters = useTransactionsTableFilters({ transactionGroup });
+  return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+      DataTable,
       {
-        to: `/customers/${giftCard.customer.id}`,
-        labelKey: `${[
-          giftCard.customer.first_name,
-          giftCard.customer.last_name
-        ].join(" ")}`,
-        descriptionKey: giftCard.customer.email,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.UserMini, {})
+        data: transactions ?? [],
+        getRowId: (row) => row.id,
+        columns,
+        filters,
+        isLoading,
+        pageSize: PAGE_SIZE$2,
+        rowCount: count2,
+        enableSearch: false,
+        heading: "Transactions",
+        emptyState: {
+          empty: {
+            heading: "No transactions found"
+          },
+          filtered: {
+            heading: "No results found",
+            description: "No transactions match your filter criteria."
+          }
+        }
       }
-    )
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
   ] });
-};
+}
 const GiftCardTransactionsSection = ({
   storeCreditAccount,
   transactionGroup
@@ -27903,73 +27813,6 @@ const GiftCardExpirationForm = ({ giftCard }) => {
 const schema$2 = z.object({
   expires_at: z.date().nullish()
 });
-const Note$1 = () => {
-  const { id } = reactRouterDom.useParams();
-  const {
-    gift_card: giftCard,
-    isPending,
-    isError,
-    error
-  } = useGiftCard(id, {});
-  if (isError) {
-    throw error;
-  }
-  const isReady = !isPending && !!giftCard;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit note" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the note for the gift card" }) })
-    ] }),
-    isReady && /* @__PURE__ */ jsxRuntime.jsx(GiftCardNoteForm$1, { giftCard })
-  ] });
-};
-const GiftCardNoteForm$1 = ({ giftCard }) => {
-  const form = useForm({
-    defaultValues: {
-      note: giftCard.note ?? ""
-    },
-    resolver: t$1(schema$1)
-  });
-  const { mutateAsync, isPending } = useUpdateGiftCard(giftCard.id);
-  const { handleSuccess } = useRouteModal();
-  const onSubmit = form.handleSubmit(async (data) => {
-    await mutateAsync(
-      { note: data.note },
-      {
-        onSuccess: () => handleSuccess(),
-        onError: (error) => ui.toast.error(error.message)
-      }
-    );
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    KeyboundForm,
-    {
-      className: "flex flex-1 flex-col overflow-hidden",
-      onSubmit,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Form$2.Field,
-          {
-            control: form.control,
-            name: "note",
-            render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Note" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Textarea, { ...field }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-            ] })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
-        ] }) })
-      ]
-    }
-  ) });
-};
-const schema$1 = z.object({
-  note: z.string().optional()
-});
 const TransferIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
@@ -28317,7 +28160,7 @@ const TransferIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
     ]
   }
 );
-const Note = () => {
+const Note$1 = () => {
   const { id } = reactRouterDom.useParams();
   const {
     gift_card: giftCard,
@@ -28334,16 +28177,16 @@ const Note = () => {
       /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Gift Card" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Transfer the gift card to a new owner" }) })
     ] }),
-    isReady && /* @__PURE__ */ jsxRuntime.jsx(GiftCardNoteForm, { giftCard })
+    isReady && /* @__PURE__ */ jsxRuntime.jsx(GiftCardNoteForm$1, { giftCard })
   ] });
 };
-const GiftCardNoteForm = ({ giftCard }) => {
+const GiftCardNoteForm$1 = ({ giftCard }) => {
   const { customers } = useCustomers();
   const form = useForm({
     defaultValues: {
       customer_id: giftCard.customer.id
     },
-    resolver: t$1(schema)
+    resolver: t$1(schema$1)
   });
   const { mutateAsync, isPending } = useTransferGiftCard(giftCard.id);
   const { handleSuccess } = useRouteModal();
@@ -28408,8 +28251,75 @@ const GiftCardNoteForm = ({ giftCard }) => {
     }
   ) });
 };
+const schema$1 = z.object({
+  customer_id: z.string()
+});
+const Note = () => {
+  const { id } = reactRouterDom.useParams();
+  const {
+    gift_card: giftCard,
+    isPending,
+    isError,
+    error
+  } = useGiftCard(id, {});
+  if (isError) {
+    throw error;
+  }
+  const isReady = !isPending && !!giftCard;
+  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit note" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the note for the gift card" }) })
+    ] }),
+    isReady && /* @__PURE__ */ jsxRuntime.jsx(GiftCardNoteForm, { giftCard })
+  ] });
+};
+const GiftCardNoteForm = ({ giftCard }) => {
+  const form = useForm({
+    defaultValues: {
+      note: giftCard.note ?? ""
+    },
+    resolver: t$1(schema)
+  });
+  const { mutateAsync, isPending } = useUpdateGiftCard(giftCard.id);
+  const { handleSuccess } = useRouteModal();
+  const onSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      { note: data.note },
+      {
+        onSuccess: () => handleSuccess(),
+        onError: (error) => ui.toast.error(error.message)
+      }
+    );
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    KeyboundForm,
+    {
+      className: "flex flex-1 flex-col overflow-hidden",
+      onSubmit,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Form$2.Field,
+          {
+            control: form.control,
+            name: "note",
+            render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Note" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Textarea, { ...field }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
+        ] }) })
+      ]
+    }
+  ) });
+};
 const schema = z.object({
-  customer_id: z.string()
+  note: z.string().optional()
 });
 const productStatusColor = (status) => {
   switch (status) {
@@ -28943,180 +28853,6 @@ const ProductDetail = () => {
   ] });
 };
 const EditProductSchema$1 = z.object({
-  status: z.enum(["draft", "published", "proposed", "rejected"]),
-  title: z.string().min(1),
-  subtitle: z.string().optional(),
-  handle: z.string().min(1),
-  description: z.string().optional()
-});
-const GiftCardProductEditForm = ({
-  product
-}) => {
-  const { handleSuccess } = useRouteModal();
-  const form = useForm({
-    defaultValues: {
-      status: product.status,
-      title: product.title,
-      subtitle: product.subtitle || "",
-      handle: product.handle || "",
-      description: product.description || ""
-    },
-    resolver: t$1(EditProductSchema$1)
-  });
-  const { mutateAsync, isPending } = useUpdateProduct(product.id);
-  const handleSubmit = form.handleSubmit(async (data) => {
-    const { title, handle, status, ...optional } = data;
-    await mutateAsync(
-      {
-        ...optional,
-        title,
-        handle,
-        status
-      },
-      {
-        onSuccess: ({ product: product2 }) => {
-          ui.toast.success(
-            `Gift card product ${product2.title} updated successfully`
-          );
-          handleSuccess();
-        },
-        onError: (e2) => {
-          ui.toast.error(e2.message);
-        }
-      }
-    );
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    KeyboundForm,
-    {
-      onSubmit: handleSubmit,
-      className: "flex flex-1 flex-col overflow-hidden",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Form$2.Field,
-            {
-              control: form.control,
-              name: "status",
-              render: ({ field: { onChange, ref, ...field } }) => {
-                return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Status" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { ...field, onValueChange: onChange, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { ref, className: "capitalize", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: [
-                      "draft",
-                      "published",
-                      "proposed",
-                      "rejected"
-                    ].map((status) => {
-                      return /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.Select.Item,
-                        {
-                          value: status,
-                          className: "capitalize",
-                          children: status
-                        },
-                        status
-                      );
-                    }) })
-                  ] }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                ] });
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Form$2.Field,
-            {
-              control: form.control,
-              name: "title",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Title" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                ] });
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Form$2.Field,
-            {
-              control: form.control,
-              name: "subtitle",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Subtitle" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                ] });
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Form$2.Field,
-            {
-              control: form.control,
-              name: "handle",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Handle" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 z-10 flex w-8 items-center justify-center border-r", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      ui.Text,
-                      {
-                        className: "text-ui-fg-muted",
-                        size: "small",
-                        leading: "compact",
-                        weight: "plus",
-                        children: "/"
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field, className: "pl-10" })
-                  ] }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                ] });
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Form$2.Field,
-            {
-              control: form.control,
-              name: "description",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Description" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Textarea, { ...field }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
-                ] });
-              }
-            }
-          )
-        ] }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
-        ] }) })
-      ]
-    }
-  ) });
-};
-const GiftCardProductEdit$1 = () => {
-  const { id } = reactRouterDom.useParams();
-  const { product, isLoading, isError, error } = useProduct(id, {});
-  if (isError) {
-    throw error;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit gift card product" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { className: "sr-only", children: "Edit the gift card product" })
-    ] }),
-    !isLoading && product && /* @__PURE__ */ jsxRuntime.jsx(GiftCardProductEditForm, { product })
-  ] });
-};
-const EditProductSchema = z.object({
   denominations: z.array(
     z.object({
       id: z.string().optional(),
@@ -29142,7 +28878,7 @@ const GiftCardProductEditDenominationsForm = ({
         };
       })
     },
-    resolver: t$1(EditProductSchema)
+    resolver: t$1(EditProductSchema$1)
   });
   const { mutateAsync, isPending } = useUpdateProduct(product.id);
   const handleSubmit = form.handleSubmit(async (data) => {
@@ -29244,20 +28980,194 @@ const GiftCardProductEditDenominationsForm = ({
             );
           }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
+            ui.Button,
+            {
+              size: "small",
+              variant: "secondary",
+              type: "button",
+              className: "w-full",
+              onClick: () => {
+                addDenomination({ value: "", sku: "", prices: {} });
+              },
+              children: "Add denomination"
+            }
+          ),
+          form.formState.errors.denominations && /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { variant: "error", children: "Please add at least one denomination." })
+        ] }) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
+        ] }) })
+      ]
+    }
+  ) });
+};
+const GiftCardProductEdit$1 = () => {
+  const { id } = reactRouterDom.useParams();
+  const { product, isLoading, isError, error } = useProduct(id, {});
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit gift card product" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { className: "sr-only", children: "Edit the gift card product" })
+    ] }),
+    !isLoading && product && /* @__PURE__ */ jsxRuntime.jsx(GiftCardProductEditDenominationsForm, { product })
+  ] });
+};
+const EditProductSchema = z.object({
+  status: z.enum(["draft", "published", "proposed", "rejected"]),
+  title: z.string().min(1),
+  subtitle: z.string().optional(),
+  handle: z.string().min(1),
+  description: z.string().optional()
+});
+const GiftCardProductEditForm = ({
+  product
+}) => {
+  const { handleSuccess } = useRouteModal();
+  const form = useForm({
+    defaultValues: {
+      status: product.status,
+      title: product.title,
+      subtitle: product.subtitle || "",
+      handle: product.handle || "",
+      description: product.description || ""
+    },
+    resolver: t$1(EditProductSchema)
+  });
+  const { mutateAsync, isPending } = useUpdateProduct(product.id);
+  const handleSubmit = form.handleSubmit(async (data) => {
+    const { title, handle, status, ...optional } = data;
+    await mutateAsync(
+      {
+        ...optional,
+        title,
+        handle,
+        status
+      },
+      {
+        onSuccess: ({ product: product2 }) => {
+          ui.toast.success(
+            `Gift card product ${product2.title} updated successfully`
+          );
+          handleSuccess();
+        },
+        onError: (e2) => {
+          ui.toast.error(e2.message);
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    KeyboundForm,
+    {
+      onSubmit: handleSubmit,
+      className: "flex flex-1 flex-col overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Form$2.Field,
             {
-              size: "small",
-              variant: "secondary",
-              type: "button",
-              className: "w-full",
-              onClick: () => {
-                addDenomination({ value: "", sku: "", prices: {} });
-              },
-              children: "Add denomination"
+              control: form.control,
+              name: "status",
+              render: ({ field: { onChange, ref, ...field } }) => {
+                return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Status" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { ...field, onValueChange: onChange, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { ref, className: "capitalize", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: [
+                      "draft",
+                      "published",
+                      "proposed",
+                      "rejected"
+                    ].map((status) => {
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        ui.Select.Item,
+                        {
+                          value: status,
+                          className: "capitalize",
+                          children: status
+                        },
+                        status
+                      );
+                    }) })
+                  ] }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                ] });
+              }
             }
           ),
-          form.formState.errors.denominations && /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { variant: "error", children: "Please add at least one denomination." })
-        ] }) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Form$2.Field,
+            {
+              control: form.control,
+              name: "title",
+              render: ({ field }) => {
+                return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Title" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                ] });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Form$2.Field,
+            {
+              control: form.control,
+              name: "subtitle",
+              render: ({ field }) => {
+                return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Subtitle" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                ] });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Form$2.Field,
+            {
+              control: form.control,
+              name: "handle",
+              render: ({ field }) => {
+                return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Handle" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 z-10 flex w-8 items-center justify-center border-r", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Text,
+                      {
+                        className: "text-ui-fg-muted",
+                        size: "small",
+                        leading: "compact",
+                        weight: "plus",
+                        children: "/"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field, className: "pl-10" })
+                  ] }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                ] });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Form$2.Field,
+            {
+              control: form.control,
+              name: "description",
+              render: ({ field }) => {
+                return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Description" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Textarea, { ...field }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
+                ] });
+              }
+            }
+          )
+        ] }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
@@ -29277,9 +29187,99 @@ const GiftCardProductEdit = () => {
       /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit gift card product" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { className: "sr-only", children: "Edit the gift card product" })
     ] }),
-    !isLoading && product && /* @__PURE__ */ jsxRuntime.jsx(GiftCardProductEditDenominationsForm, { product })
+    !isLoading && product && /* @__PURE__ */ jsxRuntime.jsx(GiftCardProductEditForm, { product })
   ] });
 };
+const StoreCreditAccountBalanceSection = ({
+  storeCreditAccount
+}) => {
+  if (!storeCreditAccount || typeof storeCreditAccount.balance === "undefined") {
+    return;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "grid grid-cols-2 gap-x-2 px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-x-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-tag-green-icon h-8 w-1 rounded-full" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { weight: "plus", size: "small", className: "text-ui-fg-subtle", children: "Current Balance" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Text,
+        {
+          weight: "plus",
+          size: "xlarge",
+          className: "tabular-nums text-ui-fg-base",
+          children: formatAmount(
+            storeCreditAccount.balance,
+            storeCreditAccount.currency_code
+          )
+        }
+      )
+    ] })
+  ] }) });
+};
+const StoreCreditAccountDetailsSection = ({
+  storeCreditAccount
+}) => {
+  if (!storeCreditAccount || typeof storeCreditAccount.balance === "undefined") {
+    return;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "grid grid-cols-2 gap-x-2 px-6 py-6", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Text,
+    {
+      weight: "plus",
+      size: "xlarge",
+      className: "text-ui-fg-base flex gap-x-4",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CreditCardIcon, { className: "inline" }),
+          " "
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle", children: [
+            storeCreditAccount.currency_code.toUpperCase(),
+            " Account"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-ui-fg-base", children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text,
+            {
+              weight: "regular",
+              size: "small",
+              className: "text-ui-fg-base flex gap-x-4",
+              children: /* @__PURE__ */ jsxRuntime.jsx(DisplayId, { id: storeCreditAccount.id })
+            }
+          ) })
+        ] })
+      ]
+    }
+  ) });
+};
+const StoreCreditAccountPage = () => {
+  const { id } = reactRouterDom.useParams();
+  const { store_credit_account: storeCreditAccount } = useStoreCreditAccount(
+    id
+  );
+  if (!storeCreditAccount) {
+    return;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    TwoColumnLayout,
+    {
+      firstCol: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StoreCreditAccountDetailsSection,
+          {
+            storeCreditAccount
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(TransactionsTable, { id: storeCreditAccount.id })
+      ] }),
+      secondCol: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        StoreCreditAccountBalanceSection,
+        {
+          storeCreditAccount
+        }
+      ) })
+    }
+  ) });
+};
 const EditProductMediaForm = ({ product }) => {
   const [selection, setSelection] = React.useState({});
   const { handleSuccess } = useRouteModal();
@@ -30173,6 +30173,10 @@ const widgetModule = { widgets: [
 ] };
 const routeModule = {
   routes: [
+    {
+      Component: GiftCardsPage,
+      path: "/gift-cards"
+    },
     {
       Component: GiftCardProductsPage,
       path: "/gift-card-products",
@@ -30187,14 +30191,6 @@ const routeModule = {
       Component: StoreCreditAccountsPage,
       path: "/store-credit-accounts"
     },
-    {
-      Component: GiftCardsPage,
-      path: "/gift-cards"
-    },
-    {
-      Component: StoreCreditAccountPage,
-      path: "/store-credit-accounts/:id"
-    },
     {
       Component: GiftCardDetailsPage,
       path: "/gift-cards/:id",
@@ -30205,11 +30201,11 @@ const routeModule = {
         },
         {
           Component: Note$1,
-          path: "/gift-cards/:id/note"
+          path: "/gift-cards/:id/owner"
         },
         {
           Component: Note,
-          path: "/gift-cards/:id/owner"
+          path: "/gift-cards/:id/note"
         }
       ]
     },
@@ -30219,14 +30215,18 @@ const routeModule = {
       children: [
         {
           Component: GiftCardProductEdit$1,
-          path: "/gift-card-products/:id/edit"
+          path: "/gift-card-products/:id/denominations"
         },
         {
           Component: GiftCardProductEdit,
-          path: "/gift-card-products/:id/denominations"
+          path: "/gift-card-products/:id/edit"
         }
       ]
     },
+    {
+      Component: StoreCreditAccountPage,
+      path: "/store-credit-accounts/:id"
+    },
     {
       Component: ProductMedia,
       path: "/gift-card-products/:id/media"
@@ -30244,22 +30244,22 @@ const routeModule = {
 const menuItemModule = {
   menuItems: [
     {
-      label: config$1.label,
-      icon: config$1.icon,
-      path: "/store-credit-accounts",
-      nested: void 0
-    },
-    {
-      label: config.label,
-      icon: config.icon,
+      label: config$2.label,
+      icon: config$2.icon,
       path: "/gift-cards",
       nested: void 0
     },
     {
-      label: config$2.label,
+      label: config$1.label,
       icon: void 0,
       path: "/gift-card-products",
       nested: "/products"
+    },
+    {
+      label: config.label,
+      icon: config.icon,
+      path: "/store-credit-accounts",
+      nested: void 0
     }
   ]
 };