Add پس کرایه checkbox beside shipping price and show it to customers.

Admin can mark a group as freight collect so the amount input is disabled and checkout shows پس کرایه at zero cost.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/OrderItemsModal.tsx

@@ -57,6 +57,7 @@ function parseOrderShipping(shippingAddress: Record<string, unknown>) {
         title: typeof row.title === 'string' ? row.title : '',
         methodLabel: typeof row.methodLabel === 'string' ? row.methodLabel : null,
         amount: typeof row.amount === 'number' && Number.isFinite(row.amount) ? row.amount : 0,
+        pasKraye: row.pasKraye === true,
         itemNames: Array.isArray(row.itemNames)
           ? row.itemNames.filter((name): name is string => typeof name === 'string')
           : [],
@@ -75,6 +76,7 @@ function parseOrderShipping(shippingAddress: Record<string, unknown>) {
     deliveryMode,
     addressLine: addressParts.join(' · '),
     groups,
+    hasPasKraye: groups.some((group) => group.pasKraye),
   }
 }
 
@@ -109,6 +111,7 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps)
   if (!mounted || !order) return null
 
   const itemCount = totalQuantity(order)
+  const shippingInfo = parseOrderShipping(order.shippingAddress)
 
   return createPortal(
     <div
@@ -153,46 +156,43 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps)
             </span>
           </div>
 
-          {(() => {
-            const shippingInfo = parseOrderShipping(order.shippingAddress)
-            return (
-              <div className={styles.shippingBlock}>
-                <div className={styles.shippingSectionTitle}>{t('orderItems.delivery')}</div>
-                {shippingInfo.deliveryMode === 'pickup' ? (
-                  <p className={styles.addressText}>{t('orderItems.pickup')}</p>
-                ) : shippingInfo.addressLine ? (
-                  <p className={styles.addressText}>{shippingInfo.addressLine}</p>
-                ) : null}
+          <div className={styles.shippingBlock}>
+            <div className={styles.shippingSectionTitle}>{t('orderItems.delivery')}</div>
+            {shippingInfo.deliveryMode === 'pickup' ? (
+              <p className={styles.addressText}>{t('orderItems.pickup')}</p>
+            ) : shippingInfo.addressLine ? (
+              <p className={styles.addressText}>{shippingInfo.addressLine}</p>
+            ) : null}
 
-                {shippingInfo.groups.length > 0 ? (
-                  <ul className={styles.shippingGroupList}>
-                    {shippingInfo.groups.map((group) => (
-                      <li key={group.groupId} className={styles.shippingGroupCard}>
-                        <div className={styles.shippingGroupHeader}>
-                          <span className={styles.shippingGroupTitle}>{group.title}</span>
-                          <span className={styles.shippingGroupAmount}>
-                            {group.amount > 0
-                              ? formatIrtPrice(group.amount)
-                              : t('orderItems.freeShipping')}
-                          </span>
-                        </div>
-                        {group.methodLabel ? (
-                          <div className={styles.shippingMethod}>{group.methodLabel}</div>
-                        ) : null}
-                        {group.itemNames.length > 0 ? (
-                          <ul className={styles.shippingItemNames}>
-                            {group.itemNames.map((name) => (
-                              <li key={`${group.groupId}-${name}`}>{name}</li>
-                            ))}
-                          </ul>
-                        ) : null}
-                      </li>
-                    ))}
-                  </ul>
-                ) : null}
-              </div>
-            )
-          })()}
+            {shippingInfo.groups.length > 0 ? (
+              <ul className={styles.shippingGroupList}>
+                {shippingInfo.groups.map((group) => (
+                  <li key={group.groupId} className={styles.shippingGroupCard}>
+                    <div className={styles.shippingGroupHeader}>
+                      <span className={styles.shippingGroupTitle}>{group.title}</span>
+                      <span className={styles.shippingGroupAmount}>
+                        {group.pasKraye
+                          ? t('orderItems.pasKraye')
+                          : group.amount > 0
+                            ? formatIrtPrice(group.amount)
+                            : t('orderItems.freeShipping')}
+                      </span>
+                    </div>
+                    {group.methodLabel ? (
+                      <div className={styles.shippingMethod}>{group.methodLabel}</div>
+                    ) : null}
+                    {group.itemNames.length > 0 ? (
+                      <ul className={styles.shippingItemNames}>
+                        {group.itemNames.map((name) => (
+                          <li key={`${group.groupId}-${name}`}>{name}</li>
+                        ))}
+                      </ul>
+                    ) : null}
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          </div>
 
           {order.items.length === 0 ? (
             <p className={styles.empty}>{t('orderItems.empty')}</p>
@@ -243,7 +243,9 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps)
               <span className={styles.totalsValue}>
                 {order.shippingTotal > 0
                   ? formatIrtPrice(order.shippingTotal)
-                  : t('orderItems.freeShipping')}
+                  : shippingInfo.hasPasKraye
+                    ? t('orderItems.pasKraye')
+                    : t('orderItems.freeShipping')}
               </span>
             </div>
             {order.discountTotal > 0 ? (

apps/business/src/components/ShippingCostGroupModal.module.css

@@ -199,6 +199,37 @@
   direction: ltr;
 }
 
+.pasKrayeCheck {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  margin-inline-start: 4px;
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  background: rgba(148, 163, 184, 0.08);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-primary);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.pasKrayeCheck input {
+  width: 15px;
+  height: 15px;
+  accent-color: var(--primary);
+  cursor: pointer;
+}
+
+.amountRow input:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  background: rgba(148, 163, 184, 0.1);
+}
+
 .checkRow {
   display: flex;
   align-items: flex-start;

apps/business/src/components/ShippingCostGroupModal.tsx

@@ -47,6 +47,7 @@ export function ShippingCostGroupModal({
   const [description, setDescription] = useState('')
   const [methods, setMethods] = useState<ShippingMethodId[]>([])
   const [defaultAmount, setDefaultAmount] = useState('')
+  const [pasKraye, setPasKraye] = useState(false)
   const [isDefault, setIsDefault] = useState(false)
   const [formError, setFormError] = useState('')
 
@@ -58,6 +59,7 @@ export function ShippingCostGroupModal({
       setNameEn(editingGroup?.nameEn ?? '')
       setDescription(editingGroup?.description ?? '')
       setMethods(editingGroup?.methods ?? [])
+      setPasKraye(editingGroup?.pasKraye ?? false)
       setDefaultAmount(
         editingGroup
           ? formatIrtInput(String(Math.round(editingGroup.defaultAmount)))
@@ -98,7 +100,7 @@ export function ShippingCostGroupModal({
 
     const trimmedFa = nameFa.trim()
     const trimmedEn = nameEn.trim()
-    const amount = parseIrtInput(defaultAmount)
+    const amount = pasKraye ? 0 : parseIrtInput(defaultAmount)
 
     if (!trimmedFa || !trimmedEn) {
       setFormError(t('store.shipping.form.errorRequired'))
@@ -108,7 +110,7 @@ export function ShippingCostGroupModal({
       setFormError(t('store.shipping.form.errorMethods'))
       return
     }
-    if (amount === null || amount < 0) {
+    if (!pasKraye && (amount === null || amount < 0)) {
       setFormError(t('store.shipping.form.errorAmount'))
       return
     }
@@ -118,7 +120,8 @@ export function ShippingCostGroupModal({
       nameEn: trimmedEn,
       description: description.trim() || undefined,
       methods,
-      defaultAmount: amount,
+      defaultAmount: amount ?? 0,
+      pasKraye,
       isDefault,
     })
   }
@@ -244,11 +247,28 @@ export function ShippingCostGroupModal({
                 placeholder={t('store.shipping.form.defaultAmountPlaceholder')}
                 value={defaultAmount}
                 onChange={(e) => setDefaultAmount(formatIrtInput(e.target.value))}
-                disabled={isSubmitting}
-                required
+                disabled={isSubmitting || pasKraye}
+                required={!pasKraye}
               />
               <span className={styles.amountUnit}>IRT</span>
+              <label className={styles.pasKrayeCheck} htmlFor="shipping-pas-kraye">
+                <input
+                  id="shipping-pas-kraye"
+                  type="checkbox"
+                  checked={pasKraye}
+                  onChange={(e) => {
+                    const checked = e.target.checked
+                    setPasKraye(checked)
+                    if (checked) setDefaultAmount('')
+                  }}
+                  disabled={isSubmitting}
+                />
+                <span>{t('store.shipping.form.pasKraye')}</span>
+              </label>
             </div>
+            {pasKraye ? (
+              <p className={styles.hint}>{t('store.shipping.form.pasKrayeHint')}</p>
+            ) : null}
           </div>
 
           <label className={styles.checkRow} htmlFor="shipping-is-default">

apps/business/src/components/ShippingCostGroupRow.tsx

@@ -59,7 +59,11 @@ export function ShippingCostGroupRow({
         <div className={styles.chip}>
           <span className={styles.chipLabel}>{t('store.shipping.row.defaultAmount')}</span>
           <span className={styles.chipValue}>
-            <span className={styles.chipNumber}>{formatIrtPrice(group.defaultAmount)}</span>
+            <span className={styles.chipNumber}>
+              {group.pasKraye
+                ? t('store.shipping.form.pasKraye')
+                : formatIrtPrice(group.defaultAmount)}
+            </span>
           </span>
         </div>
 

apps/business/src/i18n/messages.ts

@@ -1006,6 +1006,9 @@ const en = {
   'store.shipping.form.defaultAmountHint':
     'Applied to all provinces unless a city-specific amount is set later.',
   'store.shipping.form.defaultAmountPlaceholder': 'e.g. 120,000',
+  'store.shipping.form.pasKraye': 'Freight collect',
+  'store.shipping.form.pasKrayeHint':
+    'Shipping is free at checkout, but customers see “پس کرایه” (pay on delivery).',
   'store.shipping.form.isDefault': 'Make this the default group',
   'store.shipping.form.isDefaultHint':
     'Categories with no assigned shipping group will use this group.',
@@ -1303,6 +1306,7 @@ const en = {
   'orderItems.shipping': 'Shipping',
   'orderItems.discount': 'Discount',
   'orderItems.freeShipping': 'Free shipping',
+  'orderItems.pasKraye': 'Freight collect',
 
   'orderTransactions.title': 'Transaction details',
   'orderTransactions.empty': 'No payment transactions recorded for this order.',
@@ -3896,6 +3900,9 @@ const fa: Record<MessageKey, string> = {
   'store.shipping.form.defaultAmountHint':
     'برای همه استان‌ها اعمال می‌شود مگر اینکه برای شهر خاصی مبلغ دیگری تعیین شود.',
   'store.shipping.form.defaultAmountPlaceholder': 'مثلاً ۱۲۰,۰۰۰',
+  'store.shipping.form.pasKraye': 'پس کرایه',
+  'store.shipping.form.pasKrayeHint':
+    'هزینه ارسال در تسویه‌حساب رایگان محاسبه می‌شود، اما به مشتری «پس کرایه» نمایش داده می‌شود.',
   'store.shipping.form.isDefault': 'این گروه را به‌عنوان گروه پیش‌فرض تنظیم کن',
   'store.shipping.form.isDefaultHint':
     'دسته‌هایی که گروه ارسال اختصاصی ندارند از این گروه استفاده می‌کنند.',
@@ -4193,6 +4200,7 @@ const fa: Record<MessageKey, string> = {
   'orderItems.shipping': 'هزینه ارسال',
   'orderItems.discount': 'تخفیف',
   'orderItems.freeShipping': 'ارسال رایگان',
+  'orderItems.pasKraye': 'پس کرایه',
 
   'orderTransactions.title': 'جزئیات تراکنش',
   'orderTransactions.empty': 'تراکنش پرداختی برای این سفارش ثبت نشده است.',

apps/business/src/types/shippingCostGroup.ts

@@ -38,6 +38,7 @@ export interface ShippingCostGroup {
   sortOrder: number
   isActive: boolean
   isDefault: boolean
+  pasKraye: boolean
   categoryIds: string[]
   categories: ShippingCostGroupCategory[]
   cityRates: ShippingCostGroupCityRate[]
@@ -52,6 +53,7 @@ export interface ShippingCostGroupFormPayload {
   description?: string
   methods: ShippingMethodId[]
   defaultAmount: number
+  pasKraye?: boolean
   isDefault?: boolean
   categoryIds?: string[]
   provinceExceptions?: Array<{ provinceId: string; amount: number }>