Gift Registry Feature
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Gift Registry feature is a core module of the Boda Cris application designed to facilitate gift-giving for wedding guests. It provides a dedicated section within the invitation where guests can view banking details for monetary gifts, often referred to as "Lluvia de Sobres" (Rain of Envelopes). The feature supports multiple bank accounts, copy-to-clipboard functionality for account details, and a specialized "Envelope" animation to reveal information.
Architecturally, the feature is managed through a centralized ContentContext that persists gift information to local storage. It is integrated into the main InvitationPage and allows administrators to manage accounts and custom messages through the ContentEditor.
Sources: src/pages/InvitationPage.jsx:11, src/components/invitation/GiftRegistry.jsx:20-30, src/context/ContentContext.jsx:132-166
Architecture and Data Flow
The Gift Registry operates on a unidirectional data flow where state is managed by a React Context and consumed by both administrative and public-facing components.
Data Management
Gift registry data is stored within the content object under the gifts key. This includes a global message and an array of bank account objects.
Component Interaction
The following diagram illustrates how the ContentContext serves as the single source of truth for gift data across the application.
Gift Registry Interface
The public-facing interface (GiftRegistry.jsx) is characterized by an interactive "Envelope" animation. Guests must interact with the envelope to reveal the registry details.
Key Interaction Logic
- Reveal Mechanism: An
isEnvelopeOpenstate controls the visibility of the bank accounts. Clicking the envelope triggers a CSS transform (rotateX) to simulate opening a physical flap. - Account Expansion: In cases with multiple accounts, the
expandedAccountstate manages which specific account details are visible to avoid UI clutter. - Utility Functions: The
copyToClipboardfunction allows guests to quickly copy CLABE or card numbers to their device clipboard.
Administrative Management
Administrators manage the registry through the ContentEditor. This interface provides full CRUD (Create, Read, Update, Delete) capabilities for bank accounts and allows for the customization of the registry's introductory message.
Registry Configuration Options
The registry supports the following data fields for each bank account:
| Field | Type | Description |
|---|---|---|
bankName | String | The name of the financial institution (e.g., BBVA México). |
accountHolder | String | The name of the person who owns the account. |
clabe | String | The 18-digit Interbank CLABE. |
cardNumber | String | (Optional) 16-digit debit/credit card number. |
alias | String | A friendly name for the account (e.g., "Main Account"). |
Sources: src/components/admin/ContentEditor.jsx:146-194, src/data/defaultContent.js:58-66
Implementation Detail: Account Form
The AccountForm component within the editor handles local state for new or edited accounts before committing them to the global context via addGiftAccount or updateGiftAccount.
Sources: src/components/admin/ContentEditor.jsx:142-200, src/context/ContentContext.jsx:132-154
Technical Specifications
Data Model Snippet
The following structure defines the default gift registry configuration:
// src/data/defaultContent.js:55-68
gifts: {
message: 'Tu presencia es nuestro mejor regalo...',
accounts: [
{
id: '1',
bankName: 'BBVA México',
accountHolder: 'Carlos Hernández García',
clabe: '012345678901234567',
cardNumber: '4152 3130 0000 0000',
alias: 'Cuenta principal'
}
]
}
State Management Methods
The ContentContext exposes several methods to manipulate the registry state:
addGiftAccount(account): Generates a unique ID usingDate.now()and appends the account.updateGiftAccount(id, data): Merges new data into an existing account object.deleteGiftAccount(id): Filters the account out of the array.updateGiftsMessage(message): Updates the global registry introduction text.
Sources: src/context/ContentContext.jsx:132-166
Summary
The Gift Registry feature provides a secure and user-friendly way for guests to contribute monetary gifts. By utilizing a central context and interactive UI components like the animated envelope and clipboard integration, the system ensures that sensitive banking information is presented clearly and is easily accessible on various devices. The administration module ensures that the couple can manage multiple accounts and customize their message to guests effectively.