tf-checkout-react 2.0.0-beta.2 → 2.0.0-beta.4

package/src/ui/Stepper.tsx

@@ -1,6 +1,7 @@
 import React, { type FC } from 'react'
 
 import { cx } from './cx'
+import { useT } from './I18nProvider'
 
 /** Quantity ± control (ticket / add-on quantities). */
 export const Stepper: FC<{
@@ -11,26 +12,29 @@ export const Stepper: FC<{
   step?: number
   disabled?: boolean
   className?: string
-}> = ({ value, onChange, min = 0, max = Infinity, step = 1, disabled, className }) => (
-  <div className={cx('tf-checkout-stepper', className)}>
-    <button
-      type="button"
-      className="tf-checkout-stepper__btn"
-      aria-label="Decrease"
-      disabled={disabled || value <= min}
-      onClick={() => onChange(Math.max(min, value - step))}
-    >
-      −
-    </button>
-    <span className="tf-checkout-stepper__value">{value}</span>
-    <button
-      type="button"
-      className="tf-checkout-stepper__btn"
-      aria-label="Increase"
-      disabled={disabled || value >= max}
-      onClick={() => onChange(Math.min(max, value + step))}
-    >
-      +
-    </button>
-  </div>
-)
+}> = ({ value, onChange, min = 0, max = Infinity, step = 1, disabled, className }) => {
+  const t = useT()
+  return (
+    <div className={cx('tf-checkout-stepper', className)}>
+      <button
+        type="button"
+        className="tf-checkout-stepper__btn"
+        aria-label={t('common.decrease')}
+        disabled={disabled || value <= min}
+        onClick={() => onChange(Math.max(min, value - step))}
+      >
+        −
+      </button>
+      <span className="tf-checkout-stepper__value">{value}</span>
+      <button
+        type="button"
+        className="tf-checkout-stepper__btn"
+        aria-label={t('common.increase')}
+        disabled={disabled || value >= max}
+        onClick={() => onChange(Math.min(max, value + step))}
+      >
+        +
+      </button>
+    </div>
+  )
+}