adding TheCard preview

2026-01-17 12:55:45 +03:00
parent 930f4f0656
commit dea781b423
36 changed files with 7720 additions and 201 deletions
@@ -0,0 +1,190 @@
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { parsePhoneNumber } from 'libphonenumber-js/mobile';
+
+import SendMessage from './send-message.jsx';
+import LetterTile from './letter-tile.jsx';
+
+import { TheCard } from 'tinode-sdk';
+import { importVCard } from '../lib/blob-helpers.js';
+
+const messages = defineMessages({
+  unknown_name: {
+    id: 'unknown_name',
+    defaultMessage: 'Unknown',
+    description: 'Name to show when the name is missing'
+  }
+});
+
+export default class TheCardPreview extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      content: null
+    };
+
+    importVCard(props.content.file)
+      .then(card => {
+        console.log('Imported vCard:', card);
+        this.setState({ content: card });
+      });
+
+    this.handleSendCard = this.handleSendCard.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  handleKeyDown(e) {
+    e.preventDefault();
+    if (e.key === 'Escape') {
+      this.props.onClose();
+    }
+  }
+
+  handleSendCard() {
+    this.props.onClose();
+    this.props.onSendMessage(this.props.content);
+  }
+
+  render() {
+    const card = this.state.content;
+
+    console.log('Rendering TheCardPreview for card:', JSON.stringify(card));
+
+    const fullName = TheCard.getFn(card);
+    const photoUrl = TheCard.getPhotoUrl(card) || null;
+    const note = card?.note;
+    const org = TheCard.getOrg(card);
+
+    // Get communication methods
+    const emails = TheCard.getComm(card, 'email') || [];
+    console.log('Emails:', emails);
+    const phones = TheCard.getComm(card, 'tel') || [];
+    console.log('Phones:', phones);
+    const tinodeIds = TheCard.getComm(card, 'tinode') || [];
+    console.log('Tinode IDs:', tinodeIds);
+    const urls = TheCard.getComm(card, 'http') || [];
+    console.log('URLs:', urls);
+
+    const contacts = [];
+
+    // Add emails
+    emails.forEach((email, idx) => {
+      const types = Array.isArray(email.des) ? email.des.join(', ') : '';
+      contacts.push(
+        <div className="group quoted" key={`email-${idx}`}>
+          <tt>{email.value}</tt>
+          <span className="small gray"> {types ? `(${types})` : ''}</span>
+        </div>
+      );
+    });
+
+    // Add phones
+    phones.forEach((phone, idx) => {
+      let val = phone.value;
+      try {
+        const number = parsePhoneNumber(phone.value);
+        val = number ? number.formatInternational() : phone.value;
+      } catch (err) {
+        // Use original value if parsing fails
+      }
+      const types = Array.isArray(phone.des) ? phone.des.join(', ') : '';
+      contacts.push(
+        <div className="group quoted" key={`tel-${idx}`}>
+          <tt>{val}</tt>
+          <span className="small gray"> {types ? `(${types})` : ''}</span>
+        </div>
+      );
+    });
+
+    // Add Tinode IDs
+    tinodeIds.forEach((tid, idx) => {
+      const types = Array.isArray(tid.des) ? tid.des.join(', ') : '';
+      contacts.push(
+        <div className="group quoted" key={`tinode-${idx}`}>
+          <tt>{tid.value}</tt>
+          <span className="small gray"> {types ? `(${types})` : ''}</span>
+        </div>
+      );
+    });
+
+    // Add URLs
+    urls.forEach((url, idx) => {
+      const types = Array.isArray(url.des) ? url.des.join(', ') : '';
+      contacts.push(
+        <div className="group quoted" key={`url-${idx}`}>
+          <tt>{url.value}</tt>
+          <span className="small gray"> {types ? `(${types})` : ''}</span>
+        </div>
+      );
+    });
+
+    return (
+      <div id="image-preview">
+        <div id="image-preview-caption-panel">
+          <span><FormattedMessage id="label_contact_card" defaultMessage="Contact Card"
+            description="Label for contact card preview" /></span>
+          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}>
+            <i className="material-icons gray">close</i>
+          </a>
+        </div>
+        <div id="image-preview-container">
+          <div className="doc-card">
+            <div className="panel-form-column">
+              <center>
+                <div className="avatar-box">
+                  <LetterTile
+                    authorizeURL={this.props.tinode.authorizeURL}
+                    avatar={photoUrl || true}
+                    topic="usrXXX123"
+                    title={fullName} />
+                </div>
+              </center>
+              <div className="group">
+                <div className="large ellipsized">{fullName || <FormattedMessage {...messages.unknown_name} />}</div>
+              </div>
+              {org ?
+                <div className="group">
+                  <div>{org}</div>
+                </div>
+                : null}
+              {note ?
+                <div className="group">
+                  <label className="small">
+                    <FormattedMessage id="label_description" defaultMessage="Description"
+                      description="Label for description" />
+                  </label>
+                  <div className="quoted">{note}</div>
+                </div>
+                : null}
+              {contacts.length > 0 ?
+                <div className="group">
+                  <label className="small">
+                    <FormattedMessage id="label_contacts" defaultMessage="Contacts"
+                      description="Label for contact information" />
+                  </label>
+                  {contacts}
+                </div>
+                : null}
+            </div>
+          </div>
+        </div>
+        <SendMessage
+          noInput={true}
+          tinode={this.props.tinode}
+          reply={this.props.reply}
+          onCancelReply={this.props.onCancelReply}
+          onSendMessage={this.handleSendCard}
+          onError={this.props.onError} />
+      </div>
+    );
+  }
+}