تنسيق الأسعار

المشكلة

يتضمن عرض السعر كلاً من الرقم والعملة. السعر الأمريكي هو $1,200.50، بينما قد تكون نفس القيمة باليورو 1 200,50 € في ألمانيا. يتغير موضع رمز العملة والفاصل العشري وفاصل التجميع، ويصبح ترميز هذه القواعد يدوياً لكل لغة أمراً غير قابل للإدارة.

الحل

استخدم مكون FormattedNumber من react-intl مع خيار style: 'currency'. يقرأ هذا المكون اللغة الحالية من موفره ويقوم بتنسيق الرقم كسعر، مع معالجة موضع الرمز والفواصل العشرية والتجميع تلقائياً لتلك اللغة والعملة المحددة.

الخطوات

1. إنشاء مكون عميل للأسعار

يجب استخدام مكونات التنسيق من react-intl داخل مكونات العميل.

أنشئ مكوناً جديداً، app/components/ProductPrice.tsx.

// app/components/ProductPrice.tsx
'use client';

import { FormattedNumber } from 'react-intl';

type Props = {
  price: number;
  currencyCode: string; // e.g., "USD", "EUR", "JPY"
};

export default function ProductPrice({ price, currencyCode }: Props) {
  return (
    <FormattedNumber
      value={price}
      style="currency"
      currency={currencyCode}
    />
  );
}

2. تمرير خيارات التنسيق

يتم التحكم في مكون FormattedNumber بواسطة هذه الخصائص:

• value: القيمة الرقمية للسعر.
• style: 'currency': يخبر هذا المكون بتنسيق الرقم كعملة، وليس كرقم عشري قياسي.
• currency: رمز العملة ISO المكون من ثلاثة أحرف (مثل 'USD' أو 'EUR'). هذا مطلوب عند استخدام style: 'currency'.

3. استخدام المكون في الصفحة

يمكنك الآن استخدام هذا المكون في مكونات الخادم أو العميل لعرض الأسعار.

// app/[lang]/page.tsx
import ProductPrice from '@/app/components/ProductPrice';

export default function Home() {
  const product = {
    price: 1299.99,
    currency: 'USD',
  };

  const productInEuros = {
    price: 1199.5,
    currency: 'EUR',
  };

  return (
    <div>
      <h1>Product</h1>
      <p>
        Price (USD): <ProductPrice price={product.price} currencyCode={product.currency} />
      </p>
      <p>
        Price (EUR): <ProductPrice price={productInEuros.price} currencyCode={productInEuros.currency} />
      </p>
    </div>
  );
}

سيرى المستخدم الذي يزور /en "السعر (USD): $1,299.99" و"السعر (EUR): €1,199.50". سيرى المستخدم الذي يزور /es "السعر (USD): 1299,99 US$" و"السعر (EUR): 1199,50 €".