@withpotter/components 0.13.0-next.101

package/dist/discount-editor/discount-editor-content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/discount-editor/discount-editor-content.tsx"],"sourcesContent":["'use client';\n\nimport { DetailColumns } from '@withpotter/ui-kit/detail-columns';\nimport { CurrencyInput } from '@withpotter/ui-kit/currency-input';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Percent, Tag, Truck, Gift } from 'lucide-react';\nimport { ProductScopePicker } from './product-scope-picker';\nimport { TierGatePicker } from './tier-gate-picker';\nimport { Select } from '@withpotter/ui-kit/select';\nimport type { useDiscountFormState } from '@withpotter/hooks/use-discount-form-state';\nimport type { DiscountType } from '@withpotter/lib/api/types';\nimport { Input, Checkbox, NumberField, OptionButton } from '@withpotter/ui-kit';\nimport { Textarea } from '@withpotter/ui-kit';\n\ntype DiscountFormState = ReturnType<typeof useDiscountFormState>;\n\n// Helpers for min date constraints\nconst todayDateTimeLocal = () => {\n  const now = new Date();\n  now.setSeconds(0, 0);\n  return now.toISOString().slice(0, 16);\n};\nconst tomorrowDateTimeLocal = () => {\n  const d = new Date();\n  d.setDate(d.getDate() + 1);\n  d.setHours(0, 0, 0, 0);\n  return d.toISOString().slice(0, 16);\n};\n\nconst DISCOUNT_TYPES: {\n  type: DiscountType;\n  label: string;\n  icon: typeof Percent;\n}[] = [\n  { type: 'percentage', label: 'Percentage', icon: Percent },\n  { type: 'fixed_amount', label: 'Fixed amount', icon: Tag },\n  { type: 'free_shipping', label: 'Free shipping', icon: Truck },\n  { type: 'buy_x_get_y', label: 'Buy X get Y', icon: Gift },\n];\n\ninterface DiscountEditorContentProps {\n  state: DiscountFormState;\n  currencyCode: string;\n}\n\nexport function DiscountEditorContent({\n  state,\n  currencyCode,\n}: DiscountEditorContentProps) {\n  // Two columns, the same split the read-only view of this record uses: what\n  // the offer IS on the left, the rules that govern WHEN it applies on the\n  // right. One column made a short form scroll for no reason and put \"Schedule\"\n  // three screens below the code it belongs to.\n  return (\n    <DetailColumns\n      className=\"pb-12\"\n      aside={\n        <>\n          <div className=\"space-y-4\">\n            {/* Schedule */}\n            <div className=\"surface p-4\">\n              <h2 className=\"mb-4 text-sm font-medium text-[var(--text-primary)]\">\n                Schedule\n              </h2>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <div>\n                  <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                    Starts\n                  </label>\n                  <Input\n                    type=\"datetime-local\"\n                    value={state.startsAt}\n                    min={todayDateTimeLocal()}\n                    onChange={(e) => state.setStartsAt(e.target.value)}\n                  />\n                </div>\n                <div>\n                  <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                    Ends\n                  </label>\n                  <Input\n                    type=\"datetime-local\"\n                    value={state.endsAt}\n                    min={state.startsAt || tomorrowDateTimeLocal()}\n                    onChange={(e) => state.setEndsAt(e.target.value)}\n                  />\n                </div>\n              </div>\n            </div>\n\n            {/* Usage Limits */}\n            <div className=\"surface p-4\">\n              <h2 className=\"mb-4 text-sm font-medium text-[var(--text-primary)]\">\n                Usage limits\n              </h2>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <div>\n                  <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                    Total usage limit\n                  </label>\n                  <Input\n                    type=\"number\"\n                    value={state.usageLimit ?? ''}\n                    onChange={(e) =>\n                      state.setUsageLimit(\n                        e.target.value ? Number(e.target.value) : undefined,\n                      )\n                    }\n                    placeholder=\"Unlimited\"\n                    min={0}\n                  />\n                </div>\n                <div>\n                  <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                    Per customer limit\n                  </label>\n                  <Input\n                    type=\"number\"\n                    value={state.usageLimitPerCustomer ?? ''}\n                    onChange={(e) =>\n                      state.setUsageLimitPerCustomer(\n                        e.target.value ? Number(e.target.value) : undefined,\n                      )\n                    }\n                    placeholder=\"Unlimited\"\n                    min={0}\n                  />\n                </div>\n              </div>\n            </div>\n\n            {/* Settings */}\n            <div className=\"surface p-4\">\n              <h2 className=\"mb-4 text-sm font-medium text-[var(--text-primary)]\">\n                Settings\n              </h2>\n              <div className=\"space-y-4\">\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div>\n                    <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                      Status\n                    </label>\n                    <Select\n                      value={state.status}\n                      onChange={(next) =>\n                        state.setStatus(\n                          next as 'active' | 'inactive' | 'scheduled',\n                        )\n                      }\n                      options={[\n                        { value: 'active', label: 'Active' },\n                        { value: 'inactive', label: 'Inactive' },\n                        { value: 'scheduled', label: 'Scheduled' },\n                      ]}\n                    />\n                  </div>\n                </div>\n                <Checkbox\n                  checked={state.autoApply}\n                  onChange={(e) => state.setAutoApply(e.target.checked)}\n                  label=\"Auto-apply at checkout\"\n                />\n              </div>\n            </div>\n          </div>\n        </>\n      }\n    >\n      {/* Basic Info */}\n      <div className=\"surface p-4\">\n        <h2 className=\"mb-4 text-sm font-medium text-[var(--text-primary)]\">\n          Basics\n        </h2>\n        <div className=\"space-y-4\">\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n              Name\n            </label>\n            <Input\n              type=\"text\"\n              value={state.name}\n              onChange={(e) => state.setName(e.target.value)}\n              placeholder=\"Summer Sale 20% Off\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n              Description\n            </label>\n            <Textarea\n              value={state.description}\n              onChange={(e) => state.setDescription(e.target.value)}\n              placeholder=\"Optional description\"\n              rows={2}\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n              Discount code\n            </label>\n            <div className=\"flex gap-2\">\n              <Input\n                type=\"text\"\n                value={state.code}\n                onChange={(e) => state.setCode(e.target.value)}\n                className=\"flex-1 font-mono\"\n                placeholder=\"SUMMER20\"\n              />\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                onClick={state.generateCode}\n              >\n                Generate\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Discount Type */}\n      <div className=\"surface p-4\">\n        <h2 className=\"mb-4 text-sm font-medium text-[var(--text-primary)]\">\n          Type and value\n        </h2>\n        <div className=\"space-y-4\">\n          <div className=\"grid grid-cols-2 gap-3\">\n            {DISCOUNT_TYPES.map(({ type, label, icon: Icon }) => (\n              <OptionButton\n                key={type}\n                shape=\"card\"\n                selected={state.discountType === type}\n                onClick={() => state.setDiscountType(type)}\n              >\n                <Icon className=\"size-4\" />\n                {label}\n              </OptionButton>\n            ))}\n          </div>\n\n          {(state.discountType === 'percentage' ||\n            state.discountType === 'fixed_amount') && (\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div>\n                {state.discountType === 'percentage' ? (\n                  <>\n                    <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                      Percentage (%)\n                    </label>\n                    <Input\n                      type=\"number\"\n                      value={state.value ?? ''}\n                      onChange={(e) =>\n                        state.setValue(\n                          e.target.value ? Number(e.target.value) : undefined,\n                        )\n                      }\n                      min={0}\n                      max={100}\n                    />\n                  </>\n                ) : (\n                  <CurrencyInput\n                    label=\"Amount\"\n                    value={state.value}\n                    onChange={(v) => state.setValue(v ?? undefined)}\n                    currencyCode={currencyCode}\n                  />\n                )}\n              </div>\n              {state.discountType === 'percentage' && (\n                <CurrencyInput\n                  label=\"Maximum discount\"\n                  value={state.maxDiscountAmount}\n                  onChange={(v) => state.setMaxDiscountAmount(v ?? undefined)}\n                  placeholder=\"No limit\"\n                  currencyCode={currencyCode}\n                />\n              )}\n            </div>\n          )}\n\n          {state.discountType === 'buy_x_get_y' && (\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div>\n                <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                  Buy quantity\n                </label>\n                <NumberField\n                  value={state.buyXGetYConfig?.buyQuantity}\n                  onChange={(v) =>\n                    state.setBuyXGetYConfig({\n                      ...(state.buyXGetYConfig || {\n                        buyQuantity: 0,\n                        getQuantity: 0,\n                      }),\n                      buyQuantity: v ?? 1,\n                    })\n                  }\n                  min={1}\n                  decimal={false}\n                />\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                  Get quantity\n                </label>\n                <NumberField\n                  value={state.buyXGetYConfig?.getQuantity}\n                  onChange={(v) =>\n                    state.setBuyXGetYConfig({\n                      ...(state.buyXGetYConfig || {\n                        buyQuantity: 0,\n                        getQuantity: 0,\n                      }),\n                      getQuantity: v ?? 1,\n                    })\n                  }\n                  min={1}\n                  decimal={false}\n                />\n              </div>\n              <div className=\"col-span-2\">\n                <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                  Discount on the free items (%)\n                </label>\n                <Input\n                  type=\"number\"\n                  value={state.buyXGetYConfig?.getDiscountPercent ?? ''}\n                  onChange={(e) =>\n                    state.setBuyXGetYConfig({\n                      ...(state.buyXGetYConfig || {\n                        buyQuantity: 0,\n                        getQuantity: 0,\n                      }),\n                      getDiscountPercent: e.target.value\n                        ? Number(e.target.value)\n                        : undefined,\n                    })\n                  }\n                  placeholder=\"100 = fully free\"\n                  min={1}\n                  max={100}\n                />\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Rules: Conditions */}\n      <div className=\"surface p-4\">\n        <h2 className=\"mb-4 text-sm font-medium text-[var(--text-primary)]\">\n          Conditions\n        </h2>\n        <div className=\"space-y-4\">\n          <div className=\"grid grid-cols-2 gap-4\">\n            <CurrencyInput\n              label=\"Min order amount\"\n              value={state.conditions.minOrderAmount}\n              onChange={(v) =>\n                state.setConditions({\n                  ...state.conditions,\n                  minOrderAmount: v ?? undefined,\n                })\n              }\n              placeholder=\"No minimum\"\n              currencyCode={currencyCode}\n            />\n            <div>\n              <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                Min quantity\n              </label>\n              <Input\n                type=\"number\"\n                value={state.conditions.minQuantity ?? ''}\n                onChange={(e) =>\n                  state.setConditions({\n                    ...state.conditions,\n                    minQuantity: e.target.value\n                      ? Number(e.target.value)\n                      : undefined,\n                  })\n                }\n                placeholder=\"No minimum\"\n                min={0}\n              />\n            </div>\n            <div>\n              <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                Max quantity\n              </label>\n              <Input\n                type=\"number\"\n                value={state.conditions.maxQuantity ?? ''}\n                onChange={(e) =>\n                  state.setConditions({\n                    ...state.conditions,\n                    maxQuantity: e.target.value\n                      ? Number(e.target.value)\n                      : undefined,\n                  })\n                }\n                placeholder=\"No maximum\"\n                min={0}\n              />\n            </div>\n          </div>\n          <div className=\"flex gap-6\">\n            <Checkbox\n              checked={state.conditions.memberOnly || false}\n              onChange={(e) =>\n                state.setConditions({\n                  ...state.conditions,\n                  memberOnly: e.target.checked,\n                })\n              }\n              label=\"Members only\"\n            />\n            <Checkbox\n              checked={state.conditions.firstOrderOnly || false}\n              onChange={(e) =>\n                state.setConditions({\n                  ...state.conditions,\n                  firstOrderOnly: e.target.checked,\n                })\n              }\n              label=\"First order only\"\n            />\n          </div>\n\n          <TierGatePicker\n            selectedTierIds={state.conditions.loyaltyTierIds ?? []}\n            onChange={(ids) =>\n              state.setConditions({\n                ...state.conditions,\n                loyaltyTierIds: ids.length ? ids : undefined,\n              })\n            }\n          />\n          {state.conditions.minOrderAmount != null &&\n            state.maxDiscountAmount != null &&\n            state.conditions.minOrderAmount > state.maxDiscountAmount && (\n              <p className=\"text-xs text-[var(--error)] mt-1\">\n                Min order amount cannot exceed the max discount amount.\n              </p>\n            )}\n          <div className=\"pt-2 border-t border-[var(--border-subtle)]\">\n            <ProductScopePicker\n              conditions={state.conditions}\n              onChange={(next) => state.setConditions(next)}\n            />\n          </div>\n        </div>\n      </div>\n    </DetailColumns>\n  );\n}\n"],"mappings":";AAyDQ,mBAIM,KAIE,YARR;AAvDR,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,cAAc;AACvB,SAAS,SAAS,KAAK,OAAO,YAAY;AAC1C,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AAGvB,SAAS,OAAO,UAAU,aAAa,oBAAoB;AAC3D,SAAS,gBAAgB;AAKzB,MAAM,qBAAqB,MAAM;AAC/B,QAAM,MAAM,oBAAI,KAAK;AACrB,MAAI,WAAW,GAAG,CAAC;AACnB,SAAO,IAAI,YAAY,EAAE,MAAM,GAAG,EAAE;AACtC;AACA,MAAM,wBAAwB,MAAM;AAClC,QAAM,IAAI,oBAAI,KAAK;AACnB,IAAE,QAAQ,EAAE,QAAQ,IAAI,CAAC;AACzB,IAAE,SAAS,GAAG,GAAG,GAAG,CAAC;AACrB,SAAO,EAAE,YAAY,EAAE,MAAM,GAAG,EAAE;AACpC;AAEA,MAAM,iBAIA;AAAA,EACJ,EAAE,MAAM,cAAc,OAAO,cAAc,MAAM,QAAQ;AAAA,EACzD,EAAE,MAAM,gBAAgB,OAAO,gBAAgB,MAAM,IAAI;AAAA,EACzD,EAAE,MAAM,iBAAiB,OAAO,iBAAiB,MAAM,MAAM;AAAA,EAC7D,EAAE,MAAM,eAAe,OAAO,eAAe,MAAM,KAAK;AAC1D;AAOO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AACF,GAA+B;AAK7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OACE,gCACE,+BAAC,SAAI,WAAU,aAEb;AAAA,6BAAC,SAAI,WAAU,eACb;AAAA,8BAAC,QAAG,WAAU,uDAAsD,sBAEpE;AAAA,UACA,qBAAC,SAAI,WAAU,0BACb;AAAA,iCAAC,SACC;AAAA,kCAAC,WAAM,WAAU,+DAA8D,oBAE/E;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,OAAO,MAAM;AAAA,kBACb,KAAK,mBAAmB;AAAA,kBACxB,UAAU,CAAC,MAAM,MAAM,YAAY,EAAE,OAAO,KAAK;AAAA;AAAA,cACnD;AAAA,eACF;AAAA,YACA,qBAAC,SACC;AAAA,kCAAC,WAAM,WAAU,+DAA8D,kBAE/E;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,OAAO,MAAM;AAAA,kBACb,KAAK,MAAM,YAAY,sBAAsB;AAAA,kBAC7C,UAAU,CAAC,MAAM,MAAM,UAAU,EAAE,OAAO,KAAK;AAAA;AAAA,cACjD;AAAA,eACF;AAAA,aACF;AAAA,WACF;AAAA,QAGA,qBAAC,SAAI,WAAU,eACb;AAAA,8BAAC,QAAG,WAAU,uDAAsD,0BAEpE;AAAA,UACA,qBAAC,SAAI,WAAU,0BACb;AAAA,iCAAC,SACC;AAAA,kCAAC,WAAM,WAAU,+DAA8D,+BAE/E;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,OAAO,MAAM,cAAc;AAAA,kBAC3B,UAAU,CAAC,MACT,MAAM;AAAA,oBACJ,EAAE,OAAO,QAAQ,OAAO,EAAE,OAAO,KAAK,IAAI;AAAA,kBAC5C;AAAA,kBAEF,aAAY;AAAA,kBACZ,KAAK;AAAA;AAAA,cACP;AAAA,eACF;AAAA,YACA,qBAAC,SACC;AAAA,kCAAC,WAAM,WAAU,+DAA8D,gCAE/E;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,OAAO,MAAM,yBAAyB;AAAA,kBACtC,UAAU,CAAC,MACT,MAAM;AAAA,oBACJ,EAAE,OAAO,QAAQ,OAAO,EAAE,OAAO,KAAK,IAAI;AAAA,kBAC5C;AAAA,kBAEF,aAAY;AAAA,kBACZ,KAAK;AAAA;AAAA,cACP;AAAA,eACF;AAAA,aACF;AAAA,WACF;AAAA,QAGA,qBAAC,SAAI,WAAU,eACb;AAAA,8BAAC,QAAG,WAAU,uDAAsD,sBAEpE;AAAA,UACA,qBAAC,SAAI,WAAU,aACb;AAAA,gCAAC,SAAI,WAAU,0BACb,+BAAC,SACC;AAAA,kCAAC,WAAM,WAAU,+DAA8D,oBAE/E;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO,MAAM;AAAA,kBACb,UAAU,CAAC,SACT,MAAM;AAAA,oBACJ;AAAA,kBACF;AAAA,kBAEF,SAAS;AAAA,oBACP,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,oBACnC,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,oBACvC,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,kBAC3C;AAAA;AAAA,cACF;AAAA,eACF,GACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,MAAM;AAAA,gBACf,UAAU,CAAC,MAAM,MAAM,aAAa,EAAE,OAAO,OAAO;AAAA,gBACpD,OAAM;AAAA;AAAA,YACR;AAAA,aACF;AAAA,WACF;AAAA,SACF,GACF;AAAA,MAIF;AAAA,6BAAC,SAAI,WAAU,eACb;AAAA,8BAAC,QAAG,WAAU,uDAAsD,oBAEpE;AAAA,UACA,qBAAC,SAAI,WAAU,aACb;AAAA,iCAAC,SACC;AAAA,kCAAC,WAAM,WAAU,+DAA8D,kBAE/E;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,OAAO,MAAM;AAAA,kBACb,UAAU,CAAC,MAAM,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA,kBAC7C,aAAY;AAAA;AAAA,cACd;AAAA,eACF;AAAA,YACA,qBAAC,SACC;AAAA,kCAAC,WAAM,WAAU,+DAA8D,yBAE/E;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO,MAAM;AAAA,kBACb,UAAU,CAAC,MAAM,MAAM,eAAe,EAAE,OAAO,KAAK;AAAA,kBACpD,aAAY;AAAA,kBACZ,MAAM;AAAA;AAAA,cACR;AAAA,eACF;AAAA,YACA,qBAAC,SACC;AAAA,kCAAC,WAAM,WAAU,+DAA8D,2BAE/E;AAAA,cACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,OAAO,MAAM;AAAA,oBACb,UAAU,CAAC,MAAM,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA,oBAC7C,WAAU;AAAA,oBACV,aAAY;AAAA;AAAA,gBACd;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAQ;AAAA,oBACR,SAAS,MAAM;AAAA,oBAChB;AAAA;AAAA,gBAED;AAAA,iBACF;AAAA,eACF;AAAA,aACF;AAAA,WACF;AAAA,QAGA,qBAAC,SAAI,WAAU,eACb;AAAA,8BAAC,QAAG,WAAU,uDAAsD,4BAEpE;AAAA,UACA,qBAAC,SAAI,WAAU,aACb;AAAA,gCAAC,SAAI,WAAU,0BACZ,yBAAe,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,KAAK,MAC7C;AAAA,cAAC;AAAA;AAAA,gBAEC,OAAM;AAAA,gBACN,UAAU,MAAM,iBAAiB;AAAA,gBACjC,SAAS,MAAM,MAAM,gBAAgB,IAAI;AAAA,gBAEzC;AAAA,sCAAC,QAAK,WAAU,UAAS;AAAA,kBACxB;AAAA;AAAA;AAAA,cANI;AAAA,YAOP,CACD,GACH;AAAA,aAEE,MAAM,iBAAiB,gBACvB,MAAM,iBAAiB,mBACvB,qBAAC,SAAI,WAAU,0BACb;AAAA,kCAAC,SACE,gBAAM,iBAAiB,eACtB,iCACE;AAAA,oCAAC,WAAM,WAAU,+DAA8D,4BAE/E;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,OAAO,MAAM,SAAS;AAAA,oBACtB,UAAU,CAAC,MACT,MAAM;AAAA,sBACJ,EAAE,OAAO,QAAQ,OAAO,EAAE,OAAO,KAAK,IAAI;AAAA,oBAC5C;AAAA,oBAEF,KAAK;AAAA,oBACL,KAAK;AAAA;AAAA,gBACP;AAAA,iBACF,IAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,OAAO,MAAM;AAAA,kBACb,UAAU,CAAC,MAAM,MAAM,SAAS,KAAK,MAAS;AAAA,kBAC9C;AAAA;AAAA,cACF,GAEJ;AAAA,cACC,MAAM,iBAAiB,gBACtB;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,OAAO,MAAM;AAAA,kBACb,UAAU,CAAC,MAAM,MAAM,qBAAqB,KAAK,MAAS;AAAA,kBAC1D,aAAY;AAAA,kBACZ;AAAA;AAAA,cACF;AAAA,eAEJ;AAAA,YAGD,MAAM,iBAAiB,iBACtB,qBAAC,SAAI,WAAU,0BACb;AAAA,mCAAC,SACC;AAAA,oCAAC,WAAM,WAAU,+DAA8D,0BAE/E;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO,MAAM,gBAAgB;AAAA,oBAC7B,UAAU,CAAC,MACT,MAAM,kBAAkB;AAAA,sBACtB,GAAI,MAAM,kBAAkB;AAAA,wBAC1B,aAAa;AAAA,wBACb,aAAa;AAAA,sBACf;AAAA,sBACA,aAAa,KAAK;AAAA,oBACpB,CAAC;AAAA,oBAEH,KAAK;AAAA,oBACL,SAAS;AAAA;AAAA,gBACX;AAAA,iBACF;AAAA,cACA,qBAAC,SACC;AAAA,oCAAC,WAAM,WAAU,+DAA8D,0BAE/E;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO,MAAM,gBAAgB;AAAA,oBAC7B,UAAU,CAAC,MACT,MAAM,kBAAkB;AAAA,sBACtB,GAAI,MAAM,kBAAkB;AAAA,wBAC1B,aAAa;AAAA,wBACb,aAAa;AAAA,sBACf;AAAA,sBACA,aAAa,KAAK;AAAA,oBACpB,CAAC;AAAA,oBAEH,KAAK;AAAA,oBACL,SAAS;AAAA;AAAA,gBACX;AAAA,iBACF;AAAA,cACA,qBAAC,SAAI,WAAU,cACb;AAAA,oCAAC,WAAM,WAAU,+DAA8D,4CAE/E;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,OAAO,MAAM,gBAAgB,sBAAsB;AAAA,oBACnD,UAAU,CAAC,MACT,MAAM,kBAAkB;AAAA,sBACtB,GAAI,MAAM,kBAAkB;AAAA,wBAC1B,aAAa;AAAA,wBACb,aAAa;AAAA,sBACf;AAAA,sBACA,oBAAoB,EAAE,OAAO,QACzB,OAAO,EAAE,OAAO,KAAK,IACrB;AAAA,oBACN,CAAC;AAAA,oBAEH,aAAY;AAAA,oBACZ,KAAK;AAAA,oBACL,KAAK;AAAA;AAAA,gBACP;AAAA,iBACF;AAAA,eACF;AAAA,aAEJ;AAAA,WACF;AAAA,QAGA,qBAAC,SAAI,WAAU,eACb;AAAA,8BAAC,QAAG,WAAU,uDAAsD,wBAEpE;AAAA,UACA,qBAAC,SAAI,WAAU,aACb;AAAA,iCAAC,SAAI,WAAU,0BACb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,OAAO,MAAM,WAAW;AAAA,kBACxB,UAAU,CAAC,MACT,MAAM,cAAc;AAAA,oBAClB,GAAG,MAAM;AAAA,oBACT,gBAAgB,KAAK;AAAA,kBACvB,CAAC;AAAA,kBAEH,aAAY;AAAA,kBACZ;AAAA;AAAA,cACF;AAAA,cACA,qBAAC,SACC;AAAA,oCAAC,WAAM,WAAU,+DAA8D,0BAE/E;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,OAAO,MAAM,WAAW,eAAe;AAAA,oBACvC,UAAU,CAAC,MACT,MAAM,cAAc;AAAA,sBAClB,GAAG,MAAM;AAAA,sBACT,aAAa,EAAE,OAAO,QAClB,OAAO,EAAE,OAAO,KAAK,IACrB;AAAA,oBACN,CAAC;AAAA,oBAEH,aAAY;AAAA,oBACZ,KAAK;AAAA;AAAA,gBACP;AAAA,iBACF;AAAA,cACA,qBAAC,SACC;AAAA,oCAAC,WAAM,WAAU,+DAA8D,0BAE/E;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,OAAO,MAAM,WAAW,eAAe;AAAA,oBACvC,UAAU,CAAC,MACT,MAAM,cAAc;AAAA,sBAClB,GAAG,MAAM;AAAA,sBACT,aAAa,EAAE,OAAO,QAClB,OAAO,EAAE,OAAO,KAAK,IACrB;AAAA,oBACN,CAAC;AAAA,oBAEH,aAAY;AAAA,oBACZ,KAAK;AAAA;AAAA,gBACP;AAAA,iBACF;AAAA,eACF;AAAA,YACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS,MAAM,WAAW,cAAc;AAAA,kBACxC,UAAU,CAAC,MACT,MAAM,cAAc;AAAA,oBAClB,GAAG,MAAM;AAAA,oBACT,YAAY,EAAE,OAAO;AAAA,kBACvB,CAAC;AAAA,kBAEH,OAAM;AAAA;AAAA,cACR;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS,MAAM,WAAW,kBAAkB;AAAA,kBAC5C,UAAU,CAAC,MACT,MAAM,cAAc;AAAA,oBAClB,GAAG,MAAM;AAAA,oBACT,gBAAgB,EAAE,OAAO;AAAA,kBAC3B,CAAC;AAAA,kBAEH,OAAM;AAAA;AAAA,cACR;AAAA,eACF;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB,MAAM,WAAW,kBAAkB,CAAC;AAAA,gBACrD,UAAU,CAAC,QACT,MAAM,cAAc;AAAA,kBAClB,GAAG,MAAM;AAAA,kBACT,gBAAgB,IAAI,SAAS,MAAM;AAAA,gBACrC,CAAC;AAAA;AAAA,YAEL;AAAA,YACC,MAAM,WAAW,kBAAkB,QAClC,MAAM,qBAAqB,QAC3B,MAAM,WAAW,iBAAiB,MAAM,qBACtC,oBAAC,OAAE,WAAU,oCAAmC,qEAEhD;AAAA,YAEJ,oBAAC,SAAI,WAAU,+CACb;AAAA,cAAC;AAAA;AAAA,gBACC,YAAY,MAAM;AAAA,gBAClB,UAAU,CAAC,SAAS,MAAM,cAAc,IAAI;AAAA;AAAA,YAC9C,GACF;AAAA,aACF;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/discount-editor/discount-editor-page.d.ts

@@ -0,0 +1,5 @@
+interface DiscountEditorPageProps {
+    mode: 'create' | 'edit';
+}
+export declare function DiscountEditorPage({ mode }: DiscountEditorPageProps): import("react").JSX.Element;
+export {};

package/dist/discount-editor/discount-editor-page.js

@@ -0,0 +1,340 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { useRouter, useParams } from "next/navigation";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { discountsApi } from "@withpotter/lib/api/discounts";
+import { useDiscountFormState } from "@withpotter/hooks/use-discount-form-state";
+import { useDemoMode } from "@withpotter/hooks/use-demo-mode";
+import { useEditorDirtyTracking } from "@withpotter/components/editor-shared";
+import { DEMO_DISCOUNTS } from "@withpotter/pages-commerce/dashboard/(commerce)/discounts/demo-data";
+import { Edit2, Tag } from "lucide-react";
+import { useDetailHeader } from "@withpotter/hooks/use-detail-header";
+import { useTenantCurrency } from "@withpotter/hooks/use-tenant-currency";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { DetailColumns } from "@withpotter/ui-kit/detail-columns";
+import { useConfirm } from "@withpotter/ui-kit/confirm-dialog";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { Button } from "@withpotter/ui-kit/button";
+import { DetailPage } from "@withpotter/ui-kit/detail-page";
+import { DetailStates } from "@withpotter/ui-kit/detail-states";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { DiscountEditor } from "./discount-editor";
+import { DiscountPerformance } from "./discount-performance";
+function message(e, fallback) {
+  return e instanceof Error && e.message ? e.message : fallback;
+}
+const LIST_URL = "/dashboard/marketing/promotions?view=discounts";
+function Row({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--text-tertiary)]", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "text-right text-[var(--text-primary)]", children: value })
+  ] });
+}
+function Panel({
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "surface p-4", children: [
+    /* @__PURE__ */ jsx("h2", { className: "mb-4 text-sm font-medium text-[var(--text-primary)]", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3 text-sm", children })
+  ] });
+}
+function DiscountEditorPage({ mode }) {
+  const router = useRouter();
+  const params = useParams();
+  const { tenant } = useAuth();
+  const tenantCurrency = useTenantCurrency();
+  const formatCurrency = useFormatCurrency();
+  const confirm = useConfirm();
+  const demo = useDemoMode();
+  const { toast } = useToast();
+  const [viewMode, setViewMode] = useState(mode === "edit");
+  const discountId = mode === "edit" ? params?.discountId : void 0;
+  const [discount, setDiscount] = useState(null);
+  const [loadingDiscount, setLoadingDiscount] = useState(mode === "edit");
+  const [loadError, setLoadError] = useState(null);
+  const fetchDiscount = useCallback(async () => {
+    if (mode !== "edit" || !discountId) return;
+    if (demo) {
+      setDiscount(DEMO_DISCOUNTS.find((d) => d.id === discountId) ?? null);
+      setLoadError(null);
+      setLoadingDiscount(false);
+      return;
+    }
+    if (!tenant?.slug) return;
+    setLoadingDiscount(true);
+    setLoadError(null);
+    try {
+      setDiscount(await discountsApi.getById(tenant.slug, discountId));
+    } catch (e) {
+      setLoadError(message(e, "Failed to load discount"));
+    } finally {
+      setLoadingDiscount(false);
+    }
+  }, [mode, tenant?.slug, discountId, demo]);
+  useEffect(() => {
+    void fetchDiscount();
+  }, [fetchDiscount]);
+  const { data: analytics } = useApiQuery(
+    ["discount-analytics", discountId],
+    (slug) => discountsApi.analytics(slug, discountId),
+    { enabled: mode === "edit" && !!discountId && !demo }
+  );
+  const state = useDiscountFormState({
+    discount: mode === "edit" ? discount : null
+  });
+  const { isDirty, setIsDirty } = useEditorDirtyTracking([
+    state.name,
+    state.description,
+    state.code,
+    state.discountType,
+    state.value,
+    state.maxDiscountAmount,
+    state.buyXGetYConfig,
+    state.conditions,
+    state.startsAt,
+    state.endsAt,
+    state.usageLimit,
+    state.usageLimitPerCustomer,
+    state.status,
+    state.autoApply
+  ]);
+  const [deleting, setDeleting] = useState(false);
+  const handleDelete = useCallback(async () => {
+    if (!tenant?.slug || !discountId) return;
+    const ok = await confirm({
+      title: "Delete this discount?",
+      description: "The code stops working immediately. Orders that already used it keep their discount. This cannot be undone.",
+      tone: "danger",
+      confirmLabel: "Delete discount"
+    });
+    if (!ok) return;
+    setDeleting(true);
+    try {
+      await discountsApi.delete(tenant.slug, discountId);
+      router.replace(LIST_URL);
+    } catch (e) {
+      state.setError(message(e, "Failed to delete"));
+      setDeleting(false);
+    }
+  }, [tenant?.slug, discountId, router, state, confirm]);
+  const handleEndNow = useCallback(async () => {
+    if (!tenant?.slug || !discountId) return;
+    state.setSaving(true);
+    state.setError(null);
+    try {
+      await discountsApi.update(tenant.slug, discountId, {
+        endsAt: (/* @__PURE__ */ new Date()).toISOString()
+      });
+      const updated = await discountsApi.getById(tenant.slug, discountId);
+      setDiscount(updated);
+    } catch (e) {
+      state.setError(message(e, "Failed to end discount"));
+    } finally {
+      state.setSaving(false);
+    }
+  }, [tenant?.slug, discountId, state]);
+  const handleSave = useCallback(async () => {
+    if (!tenant?.slug) return;
+    const validationError = state.validate();
+    if (validationError) {
+      state.setError(validationError);
+      return;
+    }
+    state.setSaving(true);
+    state.setError(null);
+    try {
+      const payload = state.buildPayload();
+      if (mode === "edit" && discountId) {
+        await discountsApi.update(tenant.slug, discountId, payload);
+        setIsDirty(false);
+        toast({
+          title: "Discount updated",
+          description: "Your changes have been saved."
+        });
+        router.push(LIST_URL);
+      } else {
+        const result = await discountsApi.create(tenant.slug, payload);
+        setIsDirty(false);
+        router.replace(`/dashboard/discounts/${result.id}`);
+      }
+    } catch (err) {
+      state.setError(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      state.setSaving(false);
+    }
+  }, [tenant?.slug, state, mode, discountId, router, setIsDirty, toast]);
+  const editorTitle = mode === "edit" ? state.name || "Edit discount" : "New discount";
+  const backUrl = LIST_URL;
+  const back = { href: backUrl, label: "Back to discounts" };
+  const crumbs = (name) => [
+    { label: "Discounts", href: backUrl, icon: /* @__PURE__ */ jsx(Tag, {}) },
+    { label: name }
+  ];
+  useDetailHeader({
+    title: editorTitle,
+    onBack: () => router.push(backUrl)
+  });
+  if (mode === "edit" && (loadingDiscount || loadError || !discount)) {
+    return /* @__PURE__ */ jsx(
+      DetailStates,
+      {
+        loading: loadingDiscount,
+        error: loadError,
+        notFoundLabel: "Discount not found",
+        back,
+        onRetry: fetchDiscount,
+        maxWidth: "max-w-4xl"
+      }
+    );
+  }
+  if (mode === "edit" && viewMode && discount) {
+    const fmtDate = (d) => d ? new Date(d).toLocaleDateString() : "Not set";
+    const conditions = discount.conditions;
+    const hasConditions = conditions?.minOrderAmount != null || conditions?.minQuantity != null || conditions?.memberOnly || conditions?.firstOrderOnly || !!conditions?.loyaltyTierIds?.length;
+    return /* @__PURE__ */ jsx(
+      DetailPage,
+      {
+        maxWidth: "max-w-4xl",
+        breadcrumbs: crumbs(discount.name),
+        title: discount.name,
+        badges: /* @__PURE__ */ jsx(StatusBadge, { status: discount.status }),
+        actions: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "primary",
+            onClick: () => setViewMode(false),
+            icon: /* @__PURE__ */ jsx(Edit2, {}),
+            children: "Edit"
+          }
+        ),
+        children: /* @__PURE__ */ jsxs(
+          DetailColumns,
+          {
+            aside: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs(Panel, { title: "Schedule", children: [
+                /* @__PURE__ */ jsx(Row, { label: "Starts", value: fmtDate(discount.startsAt) }),
+                /* @__PURE__ */ jsx(Row, { label: "Ends", value: fmtDate(discount.endsAt) })
+              ] }),
+              /* @__PURE__ */ jsxs(Panel, { title: "Usage", children: [
+                /* @__PURE__ */ jsx(Row, { label: "Used", value: String(discount.usageCount) }),
+                discount.usageLimit != null && /* @__PURE__ */ jsx(Row, { label: "Limit", value: String(discount.usageLimit) }),
+                discount.usageLimitPerCustomer != null && /* @__PURE__ */ jsx(
+                  Row,
+                  {
+                    label: "Per customer",
+                    value: String(discount.usageLimitPerCustomer)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Row,
+                  {
+                    label: "Applies automatically",
+                    value: discount.autoApply ? "Yes" : "No"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "primary",
+                  onClick: () => setViewMode(false),
+                  icon: /* @__PURE__ */ jsx(Edit2, {}),
+                  className: "w-full py-3 lg:hidden",
+                  children: "Edit discount"
+                }
+              )
+            ] }) }),
+            children: [
+              /* @__PURE__ */ jsxs(Panel, { title: "Basics", children: [
+                /* @__PURE__ */ jsx(Row, { label: "Name", value: discount.name }),
+                discount.description && /* @__PURE__ */ jsx(Row, { label: "Description", value: discount.description }),
+                /* @__PURE__ */ jsx(
+                  Row,
+                  {
+                    label: "Code",
+                    value: /* @__PURE__ */ jsx("span", { className: "rounded bg-[var(--bg-subtle)] px-2 py-0.5 font-mono text-[var(--text-primary)]", children: discount.code })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Row,
+                  {
+                    label: "Type",
+                    value: /* @__PURE__ */ jsx("span", { className: "capitalize", children: discount.discountType.replace(/_/g, " ") })
+                  }
+                ),
+                discount.value != null && /* @__PURE__ */ jsx(
+                  Row,
+                  {
+                    label: "Value",
+                    value: discount.discountType === "percentage" ? `${discount.value}%` : formatCurrency(discount.value)
+                  }
+                ),
+                discount.maxDiscountAmount != null && /* @__PURE__ */ jsx(
+                  Row,
+                  {
+                    label: "Most it can take off",
+                    value: formatCurrency(discount.maxDiscountAmount)
+                  }
+                )
+              ] }),
+              analytics && /* @__PURE__ */ jsx(
+                DiscountPerformance,
+                {
+                  analytics,
+                  formatCurrency
+                }
+              ),
+              hasConditions && /* @__PURE__ */ jsxs(Panel, { title: "Conditions", children: [
+                conditions.minOrderAmount != null && /* @__PURE__ */ jsx(
+                  Row,
+                  {
+                    label: "Minimum order",
+                    value: formatCurrency(conditions.minOrderAmount)
+                  }
+                ),
+                conditions.minQuantity != null && /* @__PURE__ */ jsx(
+                  Row,
+                  {
+                    label: "Minimum quantity",
+                    value: String(conditions.minQuantity)
+                  }
+                ),
+                conditions.memberOnly && /* @__PURE__ */ jsx(Row, { label: "Members only", value: "Yes" }),
+                conditions.firstOrderOnly && /* @__PURE__ */ jsx(Row, { label: "First order only", value: "Yes" }),
+                !!conditions.loyaltyTierIds?.length && /* @__PURE__ */ jsx(
+                  Row,
+                  {
+                    label: "Reserved for tiers",
+                    value: `${conditions.loyaltyTierIds.length} tier${conditions.loyaltyTierIds.length === 1 ? "" : "s"}`
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DiscountEditor,
+    {
+      state,
+      isDirty,
+      onSave: handleSave,
+      backHref: backUrl,
+      onDelete: mode === "edit" ? handleDelete : void 0,
+      onEndNow: mode === "edit" ? handleEndNow : void 0,
+      deleting,
+      currencyCode: tenantCurrency
+    }
+  );
+}
+export {
+  DiscountEditorPage
+};
+//# sourceMappingURL=discount-editor-page.js.map

package/dist/discount-editor/discount-editor-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/discount-editor/discount-editor-page.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { useRouter, useParams } from 'next/navigation';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { discountsApi } from '@withpotter/lib/api/discounts';\nimport type { Discount, DiscountAnalytics } from '@withpotter/lib/api/types';\nimport { useDiscountFormState } from '@withpotter/hooks/use-discount-form-state';\nimport { useDemoMode } from '@withpotter/hooks/use-demo-mode';\nimport { useEditorDirtyTracking } from '@withpotter/components/editor-shared';\nimport { DEMO_DISCOUNTS } from '@withpotter/pages-commerce/dashboard/(commerce)/discounts/demo-data';\nimport { Edit2, Tag } from 'lucide-react';\nimport { useDetailHeader } from '@withpotter/hooks/use-detail-header';\nimport { useTenantCurrency } from '@withpotter/hooks/use-tenant-currency';\nimport { useFormatCurrency } from '@withpotter/hooks/use-format-currency';\nimport { DetailColumns } from '@withpotter/ui-kit/detail-columns';\nimport { useConfirm } from '@withpotter/ui-kit/confirm-dialog';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { DetailPage } from '@withpotter/ui-kit/detail-page';\nimport { DetailStates } from '@withpotter/ui-kit/detail-states';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { DiscountEditor } from './discount-editor';\nimport { DiscountPerformance } from './discount-performance';\n\ninterface DiscountEditorPageProps {\n  mode: 'create' | 'edit';\n}\n\nfunction message(e: unknown, fallback: string): string {\n  return e instanceof Error && e.message ? e.message : fallback;\n}\n\n/**\n * Where the list is. Not `/dashboard/discounts` any more — that redirects, and\n * bouncing Cancel or a save through a redirect leaves a dead entry in history\n * that Back walks straight into.\n */\nconst LIST_URL = '/dashboard/marketing/promotions?view=discounts';\n\n/**\n * One fact about the discount. The icon that used to sit beside every label is\n * gone: a Tag glyph stood for the name, the description, the minimum quantity\n * and auto-apply, which means it stood for nothing. The label is the label.\n */\nfunction Row({ label, value }: { label: string; value: React.ReactNode }) {\n  return (\n    <div className=\"flex items-start justify-between gap-4\">\n      <span className=\"shrink-0 text-[var(--text-tertiary)]\">{label}</span>\n      <span className=\"text-right text-[var(--text-primary)]\">{value}</span>\n    </div>\n  );\n}\n\n/** A titled block of facts. Real heading, `surface` panel — as everywhere else. */\nfunction Panel({\n  title,\n  children,\n}: {\n  title: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <section className=\"surface p-4\">\n      <h2 className=\"mb-4 text-sm font-medium text-[var(--text-primary)]\">\n        {title}\n      </h2>\n      <div className=\"space-y-3 text-sm\">{children}</div>\n    </section>\n  );\n}\n\nexport function DiscountEditorPage({ mode }: DiscountEditorPageProps) {\n  const router = useRouter();\n  const params = useParams();\n  const { tenant } = useAuth();\n  const tenantCurrency = useTenantCurrency();\n  const formatCurrency = useFormatCurrency();\n  const confirm = useConfirm();\n  const demo = useDemoMode();\n  const { toast } = useToast();\n\n  // Start in view mode for edit, switch to edit mode via Edit button\n  const [viewMode, setViewMode] = useState(mode === 'edit');\n\n  const discountId =\n    mode === 'edit' ? (params?.discountId as string) : undefined;\n\n  // -- Discount data loading (edit mode) --\n  const [discount, setDiscount] = useState<Discount | null>(null);\n  const [loadingDiscount, setLoadingDiscount] = useState(mode === 'edit');\n  const [loadError, setLoadError] = useState<string | null>(null);\n\n  // Hoisted out of the effect so the error state can offer Retry. It used to\n  // be a closure inside useEffect, which left a failed load with nothing but a\n  // back link — the one screen where retrying is the obvious thing to want.\n  const fetchDiscount = useCallback(async () => {\n    if (mode !== 'edit' || !discountId) return;\n    // Demo mode reads the same seed set the list does, so clicking a demo row\n    // opens the record it showed rather than a \"not found\".\n    if (demo) {\n      setDiscount(DEMO_DISCOUNTS.find((d) => d.id === discountId) ?? null);\n      setLoadError(null);\n      setLoadingDiscount(false);\n      return;\n    }\n    if (!tenant?.slug) return;\n    setLoadingDiscount(true);\n    setLoadError(null);\n    try {\n      setDiscount(await discountsApi.getById(tenant.slug, discountId));\n    } catch (e) {\n      setLoadError(message(e, 'Failed to load discount'));\n    } finally {\n      setLoadingDiscount(false);\n    }\n  }, [mode, tenant?.slug, discountId, demo]);\n\n  useEffect(() => {\n    void fetchDiscount();\n  }, [fetchDiscount]);\n\n  // What the code earned. This endpoint has always existed and nothing read\n  // it, so a discount's page could only show you what you typed into it.\n  const { data: analytics } = useApiQuery<DiscountAnalytics>(\n    ['discount-analytics', discountId],\n    (slug) => discountsApi.analytics(slug, discountId!),\n    { enabled: mode === 'edit' && !!discountId && !demo },\n  );\n\n  // -- Form state --\n  const state = useDiscountFormState({\n    discount: mode === 'edit' ? discount : null,\n  });\n\n  // -- Dirty tracking --\n  const { isDirty, setIsDirty } = useEditorDirtyTracking([\n    state.name,\n    state.description,\n    state.code,\n    state.discountType,\n    state.value,\n    state.maxDiscountAmount,\n    state.buyXGetYConfig,\n    state.conditions,\n    state.startsAt,\n    state.endsAt,\n    state.usageLimit,\n    state.usageLimitPerCustomer,\n    state.status,\n    state.autoApply,\n  ]);\n\n  // -- Delete handler (edit mode) --\n  const [deleting, setDeleting] = useState(false);\n  const handleDelete = useCallback(async () => {\n    if (!tenant?.slug || !discountId) return;\n    // window.confirm is banned app-wide: it is unstyled, unthemeable and\n    // blocks the tab. useConfirm is the same question in our own dialog.\n    const ok = await confirm({\n      title: 'Delete this discount?',\n      description:\n        'The code stops working immediately. Orders that already used it keep their discount. This cannot be undone.',\n      tone: 'danger',\n      confirmLabel: 'Delete discount',\n    });\n    if (!ok) return;\n    setDeleting(true);\n    try {\n      await discountsApi.delete(tenant.slug, discountId);\n      router.replace(LIST_URL);\n    } catch (e) {\n      state.setError(message(e, 'Failed to delete'));\n      setDeleting(false);\n    }\n  }, [tenant?.slug, discountId, router, state, confirm]);\n\n  // -- End Now handler (active discounts only) --\n  const handleEndNow = useCallback(async () => {\n    if (!tenant?.slug || !discountId) return;\n    state.setSaving(true);\n    state.setError(null);\n    try {\n      await discountsApi.update(tenant.slug, discountId, {\n        endsAt: new Date().toISOString(),\n      });\n      // Refresh the discount data\n      const updated = await discountsApi.getById(tenant.slug, discountId);\n      setDiscount(updated);\n    } catch (e) {\n      state.setError(message(e, 'Failed to end discount'));\n    } finally {\n      state.setSaving(false);\n    }\n  }, [tenant?.slug, discountId, state]);\n\n  // -- Save handler --\n  const handleSave = useCallback(async () => {\n    if (!tenant?.slug) return;\n\n    const validationError = state.validate();\n    if (validationError) {\n      state.setError(validationError);\n      return;\n    }\n\n    state.setSaving(true);\n    state.setError(null);\n\n    try {\n      const payload = state.buildPayload();\n\n      if (mode === 'edit' && discountId) {\n        await discountsApi.update(tenant.slug, discountId, payload);\n        setIsDirty(false);\n        toast({\n          title: 'Discount updated',\n          description: 'Your changes have been saved.',\n        });\n        router.push(LIST_URL);\n      } else {\n        const result = await discountsApi.create(tenant.slug, payload);\n        setIsDirty(false);\n        router.replace(`/dashboard/discounts/${result.id}`);\n      }\n    } catch (err) {\n      state.setError(err instanceof Error ? err.message : 'Failed to save');\n    } finally {\n      state.setSaving(false);\n    }\n  }, [tenant?.slug, state, mode, discountId, router, setIsDirty, toast]);\n\n  const editorTitle =\n    mode === 'edit' ? state.name || 'Edit discount' : 'New discount';\n  const backUrl = LIST_URL;\n  const back = { href: backUrl, label: 'Back to discounts' };\n  /**\n   * The trail every other record wears. `back` stays for `DetailStates`, whose\n   * not-found case has no record to name and so has no second crumb.\n   */\n  const crumbs = (name: string) => [\n    { label: 'Discounts', href: backUrl, icon: <Tag /> },\n    { label: name },\n  ];\n\n  useDetailHeader({\n    title: editorTitle,\n    onBack: () => router.push(backUrl),\n  });\n\n  // The shared detail state machine, the same one every other record screen\n  // uses. This was a hand-rolled skeleton branch plus a bespoke back link and a\n  // centred alert card — a third look for the two states every detail page has.\n  if (mode === 'edit' && (loadingDiscount || loadError || !discount)) {\n    return (\n      <DetailStates\n        loading={loadingDiscount}\n        error={loadError}\n        notFoundLabel=\"Discount not found\"\n        back={back}\n        onRetry={fetchDiscount}\n        maxWidth=\"max-w-4xl\"\n      />\n    );\n  }\n\n  // -- View mode: read-only summary with Edit button --\n  if (mode === 'edit' && viewMode && discount) {\n    const fmtDate = (d: string | null) =>\n      d ? new Date(d).toLocaleDateString() : 'Not set';\n    const conditions = discount.conditions;\n    const hasConditions =\n      conditions?.minOrderAmount != null ||\n      conditions?.minQuantity != null ||\n      conditions?.memberOnly ||\n      conditions?.firstOrderOnly ||\n      !!conditions?.loyaltyTierIds?.length;\n\n    return (\n      <DetailPage\n        maxWidth=\"max-w-4xl\"\n        breadcrumbs={crumbs(discount.name)}\n        title={discount.name}\n        badges={<StatusBadge status={discount.status} />}\n        actions={\n          <Button\n            type=\"button\"\n            variant=\"primary\"\n            onClick={() => setViewMode(false)}\n            icon={<Edit2 />}\n          >\n            Edit\n          </Button>\n        }\n      >\n        <DetailColumns\n          aside={\n            <>\n              <div className=\"space-y-4\">\n                <Panel title=\"Schedule\">\n                  <Row label=\"Starts\" value={fmtDate(discount.startsAt)} />\n                  <Row label=\"Ends\" value={fmtDate(discount.endsAt)} />\n                </Panel>\n\n                <Panel title=\"Usage\">\n                  <Row label=\"Used\" value={String(discount.usageCount)} />\n                  {discount.usageLimit != null && (\n                    <Row label=\"Limit\" value={String(discount.usageLimit)} />\n                  )}\n                  {discount.usageLimitPerCustomer != null && (\n                    <Row\n                      label=\"Per customer\"\n                      value={String(discount.usageLimitPerCustomer)}\n                    />\n                  )}\n                  <Row\n                    label=\"Applies automatically\"\n                    value={discount.autoApply ? 'Yes' : 'No'}\n                  />\n                </Panel>\n\n                {/* DetailHeader is desktop-only, so the phone needs its own way in. */}\n                <Button\n                  type=\"button\"\n                  variant=\"primary\"\n                  onClick={() => setViewMode(false)}\n                  icon={<Edit2 />}\n                  className=\"w-full py-3 lg:hidden\"\n                >\n                  Edit discount\n                </Button>\n              </div>\n            </>\n          }\n        >\n          <Panel title=\"Basics\">\n            <Row label=\"Name\" value={discount.name} />\n            {discount.description && (\n              <Row label=\"Description\" value={discount.description} />\n            )}\n            <Row\n              label=\"Code\"\n              value={\n                <span className=\"rounded bg-[var(--bg-subtle)] px-2 py-0.5 font-mono text-[var(--text-primary)]\">\n                  {discount.code}\n                </span>\n              }\n            />\n            <Row\n              label=\"Type\"\n              value={\n                <span className=\"capitalize\">\n                  {discount.discountType.replace(/_/g, ' ')}\n                </span>\n              }\n            />\n            {discount.value != null && (\n              <Row\n                label=\"Value\"\n                value={\n                  discount.discountType === 'percentage'\n                    ? `${discount.value}%`\n                    : formatCurrency(discount.value)\n                }\n              />\n            )}\n            {discount.maxDiscountAmount != null && (\n              <Row\n                label=\"Most it can take off\"\n                value={formatCurrency(discount.maxDiscountAmount)}\n              />\n            )}\n          </Panel>\n\n          {analytics && (\n            <DiscountPerformance\n              analytics={analytics}\n              formatCurrency={formatCurrency}\n            />\n          )}\n\n          {hasConditions && (\n            <Panel title=\"Conditions\">\n              {conditions.minOrderAmount != null && (\n                <Row\n                  label=\"Minimum order\"\n                  value={formatCurrency(conditions.minOrderAmount)}\n                />\n              )}\n              {conditions.minQuantity != null && (\n                <Row\n                  label=\"Minimum quantity\"\n                  value={String(conditions.minQuantity)}\n                />\n              )}\n              {conditions.memberOnly && (\n                <Row label=\"Members only\" value=\"Yes\" />\n              )}\n              {conditions.firstOrderOnly && (\n                <Row label=\"First order only\" value=\"Yes\" />\n              )}\n              {!!conditions.loyaltyTierIds?.length && (\n                <Row\n                  label=\"Reserved for tiers\"\n                  value={`${conditions.loyaltyTierIds.length} tier${\n                    conditions.loyaltyTierIds.length === 1 ? '' : 's'\n                  }`}\n                />\n              )}\n            </Panel>\n          )}\n        </DetailColumns>\n      </DetailPage>\n    );\n  }\n\n  return (\n    <DiscountEditor\n      state={state}\n      isDirty={isDirty}\n      onSave={handleSave}\n      backHref={backUrl}\n      onDelete={mode === 'edit' ? handleDelete : undefined}\n      onEndNow={mode === 'edit' ? handleEndNow : undefined}\n      deleting={deleting}\n      currencyCode={tenantCurrency}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/discount-editor/discount-editor.d.ts

@@ -0,0 +1,15 @@
+import type { useDiscountFormState } from '@withpotter/hooks/use-discount-form-state';
+type DiscountFormState = ReturnType<typeof useDiscountFormState>;
+interface DiscountEditorProps {
+    state: DiscountFormState;
+    isDirty: boolean;
+    onSave: () => void;
+    /** Where the back link goes. The desktop header renders it as a real link. */
+    backHref: string;
+    onDelete?: () => void;
+    onEndNow?: () => void;
+    deleting?: boolean;
+    currencyCode: string;
+}
+export declare function DiscountEditor({ state, isDirty, onSave, backHref, onDelete, onEndNow, deleting, currencyCode, }: DiscountEditorProps): import("react").JSX.Element;
+export {};

package/dist/discount-editor/discount-editor.js

@@ -0,0 +1,120 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useIsMobile } from "@withpotter/hooks/use-mobile";
+import { Save, Loader2, Trash2, StopCircle, Tag } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { DetailPage } from "@withpotter/ui-kit/detail-page";
+import { Banner } from "@withpotter/ui-kit/banner";
+import { MobileDiscountEditor } from "./mobile-discount-editor";
+import { DiscountEditorContent } from "./discount-editor-content";
+import {
+  BackBar,
+  StickyCtaBar,
+  stickyCtaScrollPadding
+} from "@withpotter/components/mobile/primitives";
+import { useRouter } from "next/navigation";
+function DiscountEditor({
+  state,
+  isDirty,
+  onSave,
+  backHref,
+  onDelete,
+  onEndNow,
+  deleting,
+  currencyCode
+}) {
+  const isMobile = useIsMobile();
+  const router = useRouter();
+  const saveLabel = state.saving ? "Saving\u2026" : state.isEditing ? "Save changes" : "Create discount";
+  const actions = /* @__PURE__ */ jsxs(Fragment, { children: [
+    state.isEditing && state.status === "active" && onEndNow && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        onClick: onEndNow,
+        icon: /* @__PURE__ */ jsx(StopCircle, {}),
+        title: "Sets the end date to now, so the code stops working immediately",
+        children: "End now"
+      }
+    ),
+    state.isEditing && onDelete && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        onClick: onDelete,
+        disabled: deleting,
+        icon: /* @__PURE__ */ jsx(Trash2, {}),
+        children: "Delete"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: onSave,
+        disabled: state.saving,
+        icon: state.saving ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsx(Save, {}),
+        children: saveLabel
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-[calc(100vh-3.5rem)]", children: [
+    !isMobile && /* @__PURE__ */ jsxs(
+      DetailPage,
+      {
+        maxWidth: "max-w-5xl",
+        breadcrumbs: [
+          { label: "Discounts", href: backHref, icon: /* @__PURE__ */ jsx(Tag, {}) },
+          {
+            label: state.isEditing ? state.name || "Edit discount" : "New discount"
+          }
+        ],
+        actions,
+        children: [
+          state.error && /* @__PURE__ */ jsx(
+            Banner,
+            {
+              className: "mb-4",
+              tone: "error",
+              onDismiss: () => state.setError(null),
+              children: state.error
+            }
+          ),
+          /* @__PURE__ */ jsx(DiscountEditorContent, { state, currencyCode })
+        ]
+      }
+    ),
+    isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        BackBar,
+        {
+          title: state.isEditing ? state.name || "Edit discount" : "New discount",
+          onBack: () => router.push(backHref)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "px-4",
+          style: { paddingBottom: stickyCtaScrollPadding(false) },
+          children: /* @__PURE__ */ jsx(MobileDiscountEditor, { state, currencyCode })
+        }
+      ),
+      (!state.isEditing || isDirty) && /* @__PURE__ */ jsx(StickyCtaBar, { respectTabBar: false, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: onSave,
+          disabled: state.saving,
+          className: "w-full gap-3 rounded-ios-lg py-3 text-lg font-semibold",
+          children: [
+            state.saving ? /* @__PURE__ */ jsx(Loader2, { className: "h-[18px] w-[18px] animate-spin" }) : null,
+            saveLabel
+          ]
+        }
+      ) })
+    ] }) : null
+  ] });
+}
+export {
+  DiscountEditor
+};
+//# sourceMappingURL=discount-editor.js.map

package/dist/discount-editor/discount-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/discount-editor/discount-editor.tsx"],"sourcesContent":["'use client';\n\nimport { useIsMobile } from '@withpotter/hooks/use-mobile';\nimport { Save, Loader2, Trash2, StopCircle, Tag } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { DetailPage } from '@withpotter/ui-kit/detail-page';\nimport { Banner } from '@withpotter/ui-kit/banner';\nimport { MobileDiscountEditor } from './mobile-discount-editor';\nimport { DiscountEditorContent } from './discount-editor-content';\nimport type { useDiscountFormState } from '@withpotter/hooks/use-discount-form-state';\nimport {\n  BackBar,\n  StickyCtaBar,\n  stickyCtaScrollPadding,\n} from '@withpotter/components/mobile/primitives';\nimport { useRouter } from 'next/navigation';\n\ntype DiscountFormState = ReturnType<typeof useDiscountFormState>;\n\ninterface DiscountEditorProps {\n  state: DiscountFormState;\n  isDirty: boolean;\n  onSave: () => void;\n  /** Where the back link goes. The desktop header renders it as a real link. */\n  backHref: string;\n  onDelete?: () => void;\n  onEndNow?: () => void;\n  deleting?: boolean;\n  currencyCode: string;\n}\n\nexport function DiscountEditor({\n  state,\n  isDirty,\n  onSave,\n  backHref,\n  onDelete,\n  onEndNow,\n  deleting,\n  currencyCode,\n}: DiscountEditorProps) {\n  const isMobile = useIsMobile();\n  // The desktop trail renders backHref as a real link; the mobile BackBar takes\n  // a handler, so it needs the router to go the same place.\n  const router = useRouter();\n\n  const saveLabel = state.saving\n    ? 'Saving…'\n    : state.isEditing\n      ? 'Save changes'\n      : 'Create discount';\n\n  const actions = (\n    <>\n      {state.isEditing && state.status === 'active' && onEndNow && (\n        <Button\n          variant=\"secondary\"\n          onClick={onEndNow}\n          icon={<StopCircle />}\n          title=\"Sets the end date to now, so the code stops working immediately\"\n        >\n          End now\n        </Button>\n      )}\n      {state.isEditing && onDelete && (\n        <Button\n          variant=\"secondary\"\n          onClick={onDelete}\n          disabled={deleting}\n          icon={<Trash2 />}\n        >\n          Delete\n        </Button>\n      )}\n      <Button\n        onClick={onSave}\n        disabled={state.saving}\n        icon={state.saving ? <Loader2 className=\"animate-spin\" /> : <Save />}\n      >\n        {saveLabel}\n      </Button>\n    </>\n  );\n\n  return (\n    <div className=\"min-h-[calc(100vh-3.5rem)]\">\n      {/* Desktop chrome comes from the shared detail header, the same one the\n          read-only view of this record uses. It was a hand-rolled sticky bar\n          with three hand-rolled buttons and an amber dot standing in for\n          \"unsaved\" — the dot is gone; the save button already says it. */}\n      {/* Breadcrumb rather than a back link with a heading under it. Those were\n          two rows saying the same thing — \"Back to discounts\" then \"New\n          discount\" is the trail written twice, once as an instruction. The\n          crumb IS the title here, which is what DetailPage documents for\n          editors, and it puts the save button on the same line. */}\n      {!isMobile && (\n        <DetailPage\n          maxWidth=\"max-w-5xl\"\n          breadcrumbs={[\n            { label: 'Discounts', href: backHref, icon: <Tag /> },\n            {\n              label: state.isEditing\n                ? state.name || 'Edit discount'\n                : 'New discount',\n            },\n          ]}\n          actions={actions}\n        >\n          {/* The error used to be a toast pinned to the bottom-right corner,\n              nowhere near the field that caused it or the button that tripped\n              it. It sits above the form now, where you are looking. */}\n          {state.error && (\n            <Banner\n              className=\"mb-4\"\n              tone=\"error\"\n              onDismiss={() => state.setError(null)}\n            >\n              {state.error}\n            </Banner>\n          )}\n          <DiscountEditorContent state={state} currencyCode={currencyCode} />\n        </DetailPage>\n      )}\n\n      {isMobile ? (\n        <>\n          {/* DetailPage is behind `!isMobile` above, so the frame's mobile\n              chrome never reaches this branch and the screen opened with no\n              title and no way off it but the browser's own back. Same wording\n              as the last crumb. */}\n          <BackBar\n            title={\n              state.isEditing ? state.name || 'Edit discount' : 'New discount'\n            }\n            onBack={() => router.push(backHref)}\n          />\n          <div\n            className=\"px-4\"\n            style={{ paddingBottom: stickyCtaScrollPadding(false) }}\n          >\n            <MobileDiscountEditor state={state} currencyCode={currencyCode} />\n          </div>\n          {(!state.isEditing || isDirty) && (\n            <StickyCtaBar respectTabBar={false}>\n              <Button\n                onClick={onSave}\n                disabled={state.saving}\n                className=\"w-full gap-3 rounded-ios-lg py-3 text-lg font-semibold\"\n              >\n                {state.saving ? (\n                  <Loader2 className=\"h-[18px] w-[18px] animate-spin\" />\n                ) : null}\n                {saveLabel}\n              </Button>\n            </StickyCtaBar>\n          )}\n        </>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";AAqDI,mBAKY,KALZ;AAnDJ,SAAS,mBAAmB;AAC5B,SAAS,MAAM,SAAS,QAAQ,YAAY,WAAW;AACvD,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAEtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAgBnB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,WAAW,YAAY;AAG7B,QAAM,SAAS,UAAU;AAEzB,QAAM,YAAY,MAAM,SACpB,iBACA,MAAM,YACJ,iBACA;AAEN,QAAM,UACJ,iCACG;AAAA,UAAM,aAAa,MAAM,WAAW,YAAY,YAC/C;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS;AAAA,QACT,MAAM,oBAAC,cAAW;AAAA,QAClB,OAAM;AAAA,QACP;AAAA;AAAA,IAED;AAAA,IAED,MAAM,aAAa,YAClB;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM,oBAAC,UAAO;AAAA,QACf;AAAA;AAAA,IAED;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,UAAU,MAAM;AAAA,QAChB,MAAM,MAAM,SAAS,oBAAC,WAAQ,WAAU,gBAAe,IAAK,oBAAC,QAAK;AAAA,QAEjE;AAAA;AAAA,IACH;AAAA,KACF;AAGF,SACE,qBAAC,SAAI,WAAU,8BAUZ;AAAA,KAAC,YACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,aAAa;AAAA,UACX,EAAE,OAAO,aAAa,MAAM,UAAU,MAAM,oBAAC,OAAI,EAAG;AAAA,UACpD;AAAA,YACE,OAAO,MAAM,YACT,MAAM,QAAQ,kBACd;AAAA,UACN;AAAA,QACF;AAAA,QACA;AAAA,QAKC;AAAA,gBAAM,SACL;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cACL,WAAW,MAAM,MAAM,SAAS,IAAI;AAAA,cAEnC,gBAAM;AAAA;AAAA,UACT;AAAA,UAEF,oBAAC,yBAAsB,OAAc,cAA4B;AAAA;AAAA;AAAA,IACnE;AAAA,IAGD,WACC,iCAKE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OACE,MAAM,YAAY,MAAM,QAAQ,kBAAkB;AAAA,UAEpD,QAAQ,MAAM,OAAO,KAAK,QAAQ;AAAA;AAAA,MACpC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,eAAe,uBAAuB,KAAK,EAAE;AAAA,UAEtD,8BAAC,wBAAqB,OAAc,cAA4B;AAAA;AAAA,MAClE;AAAA,OACE,CAAC,MAAM,aAAa,YACpB,oBAAC,gBAAa,eAAe,OAC3B;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,UAAU,MAAM;AAAA,UAChB,WAAU;AAAA,UAET;AAAA,kBAAM,SACL,oBAAC,WAAQ,WAAU,kCAAiC,IAClD;AAAA,YACH;AAAA;AAAA;AAAA,MACH,GACF;AAAA,OAEJ,IACE;AAAA,KACN;AAEJ;","names":[]}

package/dist/discount-editor/discount-performance.d.ts

@@ -0,0 +1,20 @@
+import type { DiscountAnalytics } from '@withpotter/lib/api/types';
+/**
+ * What the code actually earned.
+ *
+ * `GET /discounts/:id/analytics` has returned all of this from the start —
+ * uses, savings, revenue driven, unique customers and the orders that redeemed
+ * it — and nothing rendered a line of it. Opening a discount showed you what
+ * you had typed into the form, which is why there was never anything worth
+ * measuring at the top of the list: the measurement belongs to the record, not
+ * to the index above it.
+ *
+ * Written as rows in the same definition-list frame the rest of this record
+ * uses, rather than a tile grid. "Total discounted" is the cost side and reads
+ * beside the revenue it bought, because one without the other is half a
+ * sentence.
+ */
+export declare function DiscountPerformance({ analytics, formatCurrency, }: {
+    analytics: DiscountAnalytics;
+    formatCurrency: (n: number) => string;
+}): import("react").JSX.Element;