sotre

src/components/article/boxes/TierPricePills.jsx

@@ -1,3 +1,4 @@
+import { Component } from 'react';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import { formatPrice, parsePriceInput } from '../../../utils/price';
@@ -8,24 +9,27 @@ const tierPillSx = {
   fontWeight: 600,
 };
 
-export default function TierPricePills({ tiers }) {
-  return (
-    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, minHeight: 22 }}>
-      {(tiers ?? []).map((tier) => {
-        const gross = parsePriceInput(tier.gross);
-        if (gross == null) return null;
-        return (
-          <Chip
-            key={tier.minmultiplier}
-            size="small"
-            label={`ab ${tier.minmultiplier} · ${formatPrice(gross)}`}
-            sx={{
-              ...tierPillSx,
-              bgcolor: 'rgba(0, 0, 0, 0.08)',
-            }}
-          />
-        );
-      })}
-    </Box>
-  );
+export default class TierPricePills extends Component {
+  render() {
+    const { tiers } = this.props;
+    return (
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, minHeight: 22 }}>
+        {(tiers ?? []).map((tier) => {
+          const gross = parsePriceInput(tier.gross);
+          if (gross == null) return null;
+          return (
+            <Chip
+              key={tier.minmultiplier}
+              size="small"
+              label={`ab ${tier.minmultiplier} · ${formatPrice(gross)}`}
+              sx={{
+                ...tierPillSx,
+                bgcolor: 'rgba(0, 0, 0, 0.08)',
+              }}
+            />
+          );
+        })}
+      </Box>
+    );
+  }
 }