{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "jsx-email/block-receipt-stripe",
  "title": "Receipt — Stripe",
  "description": "Stripe-style invoice receipt email",
  "dependencies": [
    "jsx-email"
  ],
  "registryDependencies": [
    "https://emailcn.run/r/jsx-email/default-fonts.json",
    "https://emailcn.run/r/jsx-email/theme-default.json",
    "https://emailcn.run/r/jsx-email/theme-stripe.json"
  ],
  "files": [
    {
      "path": "registry/bases/jsx-email/blocks/receipt-stripe.tsx",
      "content": "// Subject: Your receipt from {_productName}\n\nimport {\n  Body,\n  Column,\n  Container,\n  Head,\n  Hr,\n  Html,\n  Img,\n  Preview,\n  Row,\n  Section,\n  Tailwind,\n  Text,\n  Link,\n} from \"jsx-email\";\n\nimport { DefaultFonts } from \"@/components/email/font-default\";\nimport { defaultTheme } from \"@/components/email/theme-default\";\nimport { stripeTheme } from \"@/components/email/theme-stripe\";\n\ninterface ProductCardProps {\n  imageUrl?: string;\n  name?: string;\n  price?: string;\n  quantity?: number;\n  ctaLabel?: string;\n  ctaHref?: string;\n}\n\nconst ProductCardSection = ({\n  imageUrl,\n  name = \"Product Name\",\n  price = \"$99.00\",\n  quantity = 1,\n  ctaLabel = \"View Details\",\n  ctaHref = \"#\",\n}: Omit<ProductCardProps, \"theme\">) => (\n  <Section\n    style={{\n      backgroundColor: defaultTheme.colorBackground,\n      border: `1px solid ${defaultTheme.colorBorder}`,\n      borderRadius: \"8px\",\n      padding: \"24px\",\n    }}\n  >\n    <Row>\n      <Column style={{ verticalAlign: \"top\", width: \"100px\" }}>\n        {imageUrl ? (\n          <Img\n            src={imageUrl}\n            alt={name}\n            width={100}\n            style={{\n              borderRadius: \"8px\",\n              height: \"auto\",\n              maxWidth: \"100%\",\n              objectFit: \"cover\",\n            }}\n          />\n        ) : null}\n      </Column>\n      <Column style={{ paddingLeft: \"24px\", verticalAlign: \"top\" }}>\n        <Text\n          style={{\n            color: defaultTheme.colorText,\n            fontSize: defaultTheme.fontSizeBase,\n            fontWeight: defaultTheme.fontWeightMedium,\n            marginBottom: \"8px\",\n          }}\n        >\n          {name}\n        </Text>\n        <Text\n          style={{\n            color: defaultTheme.colorText,\n            fontSize: defaultTheme.fontSizeLg,\n            fontWeight: defaultTheme.fontWeightBold,\n          }}\n        >\n          {price}\n          {quantity > 1 ? (\n            <span\n              style={{\n                color: defaultTheme.colorTextMuted,\n                fontSize: defaultTheme.fontSizeSm,\n                marginLeft: \"8px\",\n              }}\n            >\n              {\" \"}\n              x {quantity}\n            </span>\n          ) : null}\n        </Text>\n        {ctaLabel ? (\n          <Text style={{ marginTop: \"8px\" }}>\n            <Link\n              href={ctaHref}\n              style={{\n                color: defaultTheme.colorPrimary,\n                display: \"inline-block\",\n                fontSize: defaultTheme.fontSizeSm,\n                textDecoration: \"none\",\n              }}\n            >\n              {ctaLabel}\n            </Link>\n          </Text>\n        ) : null}\n      </Column>\n    </Row>\n  </Section>\n);\n\ninterface ReceiptItem {\n  name: string;\n  imageUrl?: string;\n  price: string;\n  quantity?: number;\n}\n\ninterface Props {\n  orderNumber?: string;\n  customerName?: string;\n  items?: ReceiptItem[];\n  subtotal?: string;\n  tax?: string;\n  total?: string;\n  supportHref?: string;\n  _productName?: string;\n}\n\nexport const ReceiptStripe = ({\n  orderNumber = \"INV-123\",\n  customerName = \"John\",\n  items = [{ name: \"Product 1\", price: \"$99.00\", quantity: 1 }],\n  subtotal = \"$99.00\",\n  tax = \"$7.92\",\n  total = \"$106.92\",\n  supportHref = \"#\",\n  _productName = \"Stripe\",\n}: Props) => {\n  void _productName;\n\n  const t = stripeTheme;\n\n  return (\n    <Html>\n      <Head>\n        <DefaultFonts />\n      </Head>\n      <Preview>Your receipt</Preview>\n      <Tailwind>\n        <Body\n          style={{\n            backgroundColor: t.colorBackground,\n            fontFamily: t.fontFamily,\n            margin: 0,\n          }}\n        >\n          <Container style={{ maxWidth: t.containerWidth, padding: \"32px\" }}>\n            <Section style={{ paddingTop: t.spacingXl }}>\n              <Text\n                style={{\n                  color: t.colorText,\n                  fontSize: \"28px\",\n                  fontWeight: t.fontWeightBold,\n                  letterSpacing: \"-0.025em\",\n                  marginBottom: \"4px\",\n                }}\n              >\n                Invoice\n              </Text>\n              <Text\n                style={{\n                  color: t.colorTextMuted,\n                  fontSize: t.fontSizeBase,\n                  marginBottom: \"32px\",\n                }}\n              >\n                {orderNumber} • {customerName}\n              </Text>\n            </Section>\n\n            <Section>\n              {items.map((item, index) => (\n                <ProductCardSection\n                  key={index}\n                  imageUrl={item.imageUrl}\n                  name={item.name}\n                  price={item.price}\n                  quantity={item.quantity}\n                />\n              ))}\n            </Section>\n\n            <Section style={{ marginTop: \"16px\" }}>\n              <Row>\n                <Column>\n                  <Text\n                    style={{\n                      color: t.colorTextMuted,\n                      fontSize: t.fontSizeBase,\n                    }}\n                  >\n                    Subtotal\n                  </Text>\n                </Column>\n                <Column style={{ textAlign: \"right\" }}>\n                  <Text\n                    style={{\n                      color: t.colorText,\n                      fontSize: t.fontSizeBase,\n                      fontWeight: t.fontWeightMedium,\n                      textAlign: \"right\",\n                    }}\n                  >\n                    {subtotal}\n                  </Text>\n                </Column>\n              </Row>\n              <Row>\n                <Column>\n                  <Text\n                    style={{\n                      color: t.colorTextMuted,\n                      fontSize: t.fontSizeBase,\n                    }}\n                  >\n                    Tax\n                  </Text>\n                </Column>\n                <Column style={{ textAlign: \"right\" }}>\n                  <Text\n                    style={{\n                      color: t.colorText,\n                      fontSize: t.fontSizeBase,\n                      fontWeight: t.fontWeightMedium,\n                      textAlign: \"right\",\n                    }}\n                  >\n                    {tax}\n                  </Text>\n                </Column>\n              </Row>\n              <Hr\n                style={{\n                  borderColor: t.colorBorder,\n                  marginBottom: \"16px\",\n                  marginTop: \"16px\",\n                }}\n              />\n              <Row>\n                <Column>\n                  <Text\n                    style={{\n                      color: t.colorText,\n                      fontSize: t.fontSizeLg,\n                      fontWeight: t.fontWeightBold,\n                    }}\n                  >\n                    Total\n                  </Text>\n                </Column>\n                <Column style={{ textAlign: \"right\" }}>\n                  <Text\n                    style={{\n                      color: t.colorText,\n                      fontSize: t.fontSizeLg,\n                      fontWeight: t.fontWeightBold,\n                      textAlign: \"right\",\n                    }}\n                  >\n                    {total}\n                  </Text>\n                </Column>\n              </Row>\n            </Section>\n\n            <Text\n              style={{\n                color: t.colorTextMuted,\n                fontSize: t.fontSizeSm,\n                marginTop: \"32px\",\n              }}\n            >\n              Need help?{\" \"}\n              <Link\n                href={supportHref}\n                style={{ color: t.colorText, textDecoration: \"underline\" }}\n              >\n                Contact support\n              </Link>\n            </Text>\n          </Container>\n        </Body>\n      </Tailwind>\n    </Html>\n  );\n};\n\nReceiptStripe.PreviewProps = {\n  _productName: \"Stripe\",\n  customerName: \"John Doe\",\n  items: [{ name: \"Subscription\", price: \"$99.00\", quantity: 1 }],\n  orderNumber: \"INV-12345\",\n  subtotal: \"$99.00\",\n  supportHref: \"https://example.com/support\",\n  tax: \"$7.92\",\n  total: \"$106.92\",\n} satisfies Props;\n",
      "type": "registry:component",
      "target": "components/email/receipt-stripe.tsx"
    }
  ],
  "categories": [
    "receipt"
  ],
  "type": "registry:block"
}