Untitled

Here's how you can modify the DebitCard.js file to implement the required functionalities:

1. Initial List of Cards: Render the list of cards from the JSON file and display them as "Card 1", "Card 2", etc.
2. Card Click Logic: When a card is clicked, show the details in an encrypted format.
3. Decrypt Logic: Clicking on the detailed card will decrypt and show the real card details.

Here’s the updated code for DebitCard.js:

import React, { useState } from "react";
import "./DebitCard.css";  // Ensure you have the correct path here
import cards from "../../cards.json";  // Importing cards list

export const DebitCard = () => {
    const [selectedCard, setSelectedCard] = useState(null);  // Store the selected card
    const [decrypted, setDecrypted] = useState(false);  // Track if the card is decrypted

    // Helper function to format the card number with spaces
    const formatCardNumber = (number) => {
        return number.replace(/(\d{4})(?=\d)/g, '$1 ');
    };

    // Function to handle card click
    const handleCardClick = (card) => {
        setSelectedCard(card);
        setDecrypted(false);  // Reset to encrypted state when a new card is selected
    };

    // Function to handle card decryption
    const handleDecrypt = () => {
        setDecrypted(true);
    };

    return (
        <div className="mt-50 layout-column justify-content-center align-items-center">
            {/* Card Details Section */}
            <div className="card outlined" style={{ width: '1000px' }}>
                <div data-testid="debit-card">
                    <h3 style={{ textAlign: 'center' }}>Card Details</h3>
                    <hr />
                    {selectedCard ? (
                        <div className="debit-card-body" data-testid="debit-card-body" onClick={handleDecrypt}>
                            <p className="debit-card-bank" data-testid="debit-card-bank-name">{selectedCard.bank}</p>
                            <p className="debit-card-no" data-testid="debit-card-no">
                                {decrypted 
                                    ? formatCardNumber(selectedCard.number)
                                    : `${selectedCard.number.slice(0, 4)} XXXX XXXX XXXX`}
                            </p>
                            <div style={{ height: '45px', backgroundColor: 'black' }} className="debit-card-stripe"></div>
                            <p>
                                <span className="debit-card-holder-name" data-testid="debit-card-holder-name">
                                    {decrypted
                                        ? selectedCard.name
                                        : selectedCard.name.split(' ').map(() => 'XXXX').join(' ')}
                                </span>
                                <span className="debit-card-date" data-testid="debit-card-expiry-date">
                                    {decrypted ? selectedCard.expiry : 'XX/XX'}
                                </span>
                                <span className="debit-card-cvv" data-testid="debit-card-cvv">
                                    {decrypted ? selectedCard.CVV : 'XXX'}
                                </span>
                            </p>
                        </div>
                    ) : (
                        <p style={{ textAlign: 'center' }}>Select a card to see details</p>
                    )}
                </div>
            </div>

            {/* Cards List Section */}
            <h3 style={{ textAlign: 'center' }}>Cards List</h3>
            <div className="debit-card-list" data-testid="debit-card-list">
                {cards.map((card, index) => (
                    <div
                        className="list-card"
                        data-testid={`list-card-${index}`}
                        key={index}
                        onClick={() => handleCardClick(card)}
                    >
                        <p className="list-card-title">Card {index + 1}</p>
                    </div>
                ))}
            </div>
        </div>
    );
};

Key Changes:

1. State Management:

   • selectedCard: Stores the clicked card's details.
   • decrypted: Tracks whether the card details should be decrypted or not.

2. Card Click Logic:

   • handleCardClick: Sets the clicked card as the selected one and ensures the details start as encrypted.
   • handleDecrypt: Switches the state to decrypted when the detailed card is clicked.

3. Display Logic:

   • If the card is encrypted, only the first 4 digits and "XXXX" for the rest are displayed. When decrypted, the full card details are shown.

4. Mapping Over Cards:

   • The list of cards is generated dynamically from the cards.json file using the .map() function, each card given a unique test-id as specified.

This should meet all the requirements of the task! Let me know if you need further adjustments.