83 lines
2.6 KiB
React
83 lines
2.6 KiB
React
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.firstname || 'Not set'}
|
|
</span>
|
|
<span className={styles.arrow}>→</span>
|
|
<span className={styles.newValue}>
|
|
{contactDetails.firstname || '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.lastname || 'Not set'}
|
|
</span>
|
|
<span className={styles.arrow}>→</span>
|
|
<span className={styles.newValue}>
|
|
{contactDetails.lastname || '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;
|