# yatra/3.0.10/resources/js/components/common/PhoneDisplay.tsx

Yatra – Travel Booking & Tour Operator Software, version 3.0.10. 51 lines.

- Page: https://pluginprobe.com/plugins/yatra/3.0.10/code/resources/js/components/common/PhoneDisplay.tsx
- Raw: https://pluginprobe.com/plugins/yatra/3.0.10/raw/resources/js/components/common/PhoneDisplay.tsx
- Modified: 2026-07-06T05:29:20+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/yatra/3.0.10/code/resources/js/components/common/PhoneDisplay.tsx#L10-L20`.

```tsx
/**
 * Renders a stored phone value as flag + readable number in admin views.
 * International values ("+9779806015400") show the detected country flag and a
 * spaced "+977 9806015400"; legacy national-only values render as plain text
 * with no flag (never reinterpreted).
 */
import React from "react";
import { detectPhoneCountry, flagUrl, formatPhone } from "../../lib/phone";

interface PhoneDisplayProps {
  value?: string | null;
  className?: string;
}

export const PhoneDisplay: React.FC<PhoneDisplayProps> = ({
  value,
  className,
}) => {
  const raw = (value || "").trim();
  if (!raw) return null;

  const detected = detectPhoneCountry(raw);
  const url = detected ? flagUrl(detected.iso) : "";

  return (
    <span
      className={className}
      style={{ display: "inline-flex", alignItems: "center", gap: 6 }}
    >
      {url && (
        <img
          src={url}
          alt={detected ? detected.iso : ""}
          width={18}
          height={13}
          loading="lazy"
          style={{
            borderRadius: 2,
            objectFit: "cover",
            boxShadow: "0 0 0 1px rgba(0,0,0,0.08)",
            flex: "0 0 auto",
          }}
        />
      )}
      <span>{detected ? formatPhone(raw) : raw}</span>
    </span>
  );
};

export default PhoneDisplay;

```