tsk-10: Edit Contact (#23)

Closes #10 Reviewed-on: phoenix/textsender#23 Co-authored-by: phoenix <kundeng00@pm.me> Co-committed-by: phoenix <kundeng00@pm.me>
2026-01-29 22:20:28 +00:00
parent 34644d1cd2
commit 0202425a09
15 changed files with 1952 additions and 787 deletions
@@ -0,0 +1,82 @@
+import React from 'react';
+import styles from './ConfirmationStep.module.css';
+
+function ConfirmationStep({ selectedContact, contactDetails, isSubmitting }) {
+  if (!selectedContact || !contactDetails) {
+    return (
+      <div className={styles.confirmationStep}>
+        <div className={styles.noDataMessage}>
+          <p>No contact selected or details available.</p>
+          <p className={styles.hint}>
+            Please go back and select a contact to modify.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.confirmationStep}>
+      <h3 className={styles.sectionTitle}>Review Your Changes</h3>
+
+      <div className={styles.reviewSection}>
+        <div className={styles.reviewItem}>
+          <span className={styles.reviewLabel}>Contact Phone</span>
+          <span className={styles.reviewValue}>
+            {selectedContact.phone_number}
+          </span>
+        </div>
+
+        <div className={styles.reviewDivider} />
+
+        <div className={styles.reviewItem}>
+          <span className={styles.reviewLabel}>First Name</span>
+          <div className={styles.reviewComparison}>
+            <span className={styles.oldValue}>
+              {selectedContact.first_name || 'Not set'}
+            </span>
+            <span className={styles.arrow}>→</span>
+            <span className={styles.newValue}>
+              {contactDetails.first_name || 'Not set'}
+            </span>
+          </div>
+        </div>
+
+        <div className={styles.reviewItem}>
+          <span className={styles.reviewLabel}>Last Name</span>
+          <div className={styles.reviewComparison}>
+            <span className={styles.oldValue}>
+              {selectedContact.last_name || 'Not set'}
+            </span>
+            <span className={styles.arrow}>→</span>
+            <span className={styles.newValue}>
+              {contactDetails.last_name || 'Not set'}
+            </span>
+          </div>
+        </div>
+
+        <div className={styles.reviewItem}>
+          <span className={styles.reviewLabel}>Nickname</span>
+          <div className={styles.reviewComparison}>
+            <span className={styles.oldValue}>
+              {selectedContact.nickname || 'Not set'}
+            </span>
+            <span className={styles.arrow}>→</span>
+            <span className={styles.newValue}>
+              {contactDetails.nickname || 'Not set'}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {isSubmitting && (
+        <div className={styles.submittingMessage}>
+          <div className={styles.spinner}></div>
+          <p>Updating contact information...</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ConfirmationStep;