## **Card Cafe Website Documentation**
<!-- #### (for developers) -->

### **1. Landing Page**

**The main structure consists of different sections like Nav, Banner, ImageSection, SpecialOccasion, PerfectCardGift, HowItWorks, ModifyEverySingle, GiftAsThey, CardCafeMobile, CustomerSay, Footer, IntercomRoute, and ScrollButton.**

**File Details**
**URL Path :** /otp
**File Name :** LandingPage()

**Component Imports:**
The component imports various other React components from different files, such as Nav, Banner, ImageSection, CardCafeMobile, HowItWorks, ModifyEverySingle, GiftAsThey, CustomerSay, Footer, SpecialOccasion, PerfectCardGift, ScrollButton, and IntercomRoute.

**Custom Hooks:**
The component uses custom hooks like **useOtp, useToken, and useOTPs** to manage state and functionality related to OTPs and tokens.

**React Router:**
It uses useNavigate from React Router to navigate between pages based on certain conditions. If a token is present, it navigates to the home page; otherwise, it navigates to the OTP page.

**Effect Hook:**
There's a useEffect hook that runs on component mount. It scrolls to the top of the page using scrollToTop utility function and handles navigation based on the presence of a token.

**Conditional Rendering:**
The component conditionally renders a Loading component if data is still loading, and displays an alert if there's an error.
Component Structure:

### **2. Sign up / Sign in**

**This screen is responsible for handling phone number verification using OTP (One-Time Password). Here's a breakdown of the main features and functionality:**

**File Details**
**URL Path :** /otp
**File Name :** Otp({

**Component Structure:**
The component renders two main sections based on the value of the show state: one for entering the phone number (MainDiv) and the other for entering the OTP (MainDiv again).

**Firebase Authentication:**
The component uses Firebase authentication (signInWithPhoneNumber and RecaptchaVerifier) to handle phone number verification.

**Phone Input and Recaptcha:**
It utilizes the react-phone-input-2 library for the phone number input, allowing users to select their country code. The Recaptcha functionality is also integrated for security.

**OTP Input:**
The OTP input is handled using the ReactCodeInput component, allowing users to enter a 6-digit verification code.

**State Management:**
The component uses useState to manage the state of the phone number (number), OTP (otp), and whether to display the OTP section (show).

**Navigation and Form Submission:**
The signin function initiates the phone number verification process. After entering the OTP, the ValidateOtp function is called to confirm the OTP and handle further actions.

**Form Validation and Submission:**
The component performs basic form validation, checking if the phone number is valid before initiating the verification process.

**Routing and Redirection:**
Upon successful verification, the runOtpMutation function is called to handle further actions, such as storing a token in localStorage and redirecting the user based on their authentication status.

**Styling:**
The component uses styled-components for styling, with various styled elements like MainDiv, MainInner, FormDiv, etc.

**Accessibility:**
There's support for accessibility with the handleEnterKeyPress function, allowing users to press the "Enter" key to submit the form.

**Conditional Rendering:**
Sections are conditionally rendered based on the show state, displaying either the phone number input or the OTP input.

### **3. Home Page**

**This is the Home screen that displays various sections, including top categories, a carousel of card categories, and a horizontal scroll list of cards by single category. Overall, this component performs data fetching for card categories effectively. Here's a breakdown of the key features and functionality:**

**File Details**
**URL Path :** /home
**File Name :** Home()

**Custom Hooks:**
The component uses custom hooks such as useCardCategories and useToken to fetch data related to card categories and user authentication token.

**Conditional Rendering:**
The component checks for the presence of certain data in local storage (designerpublicgallery and referralcampaigns) and the existence of a user token. Depending on these conditions, it navigates to specific paths or removes certain items from local storage.

**Effect Hook:**
The useEffect hook is used to scroll to the top of the page and handle navigation based on the conditions mentioned above.

**Loading and Error Handling:**
The component renders a loading indicator while data is being fetched (<Loading /> component). In case of an error, it displays an alert with the error message.

**Component Structure:**
The main structure consists of various styled components such as MainHomeDiv, CategoriesDiv, MainHomeInner, HomeBannerButtonDiv, HomeBannerbutton, and HomeData.

**Material-UI Integration:**
The component utilizes Material-UI components, including the Button component, for the "Design Card" button.

**Navigation:**
React Router's useNavigate is used for navigation to different paths within the application.

**Card Components:**
It includes the usage of custom card components like CardCategories for displaying top categories as a horizontal list, and CardCategoriesImages for displaying a carousel of card categories.

**Conditional Rendering of "Design Card" Button:**
The "Design Card" button is conditionally rendered based on the existence of a user token.

**Mapping and Rendering of Card Categories:**
The component maps over the categories obtained from the API response and renders CardBySingleCategory components for each category.

**Styling:**
Styled components are used for styling various sections of the home page.

### **4. Single Card**

***Ant Design Modal created in Card.jsx file at line no. 357.* This screen is a modal responsible to handle the selection and display of card details, with additional functionalities for customization, sending, marking as a favorite, and more.. Here's a breakdown of its key features and functionality:**

**File Details**
**URL Path :** /home
**File Name :** SelectCardModal({

**Card Flip Animation:**
The component uses the ReactCardFlip library for a flip animation to show the front and back of a card.

**State and Hooks:**
It uses hooks like useCardCategories and useReferrals to manage state and fetch data related to card categories and user referrals.

**Modal Structure:**
The modal has a main structure consisting of various styled components such as SelectCardMain, SelectCardInner, SelectCardCloseBtn, SelectCardButtonInner, SelectCardFavDiv, SelectCardFavIcon, SelectCardFavIcon2, ReactCardFlipInnerDiv, CardData, CardDataImg, CardDataFlipIcon, CardDetail, CardDetailHeading, CardDetailButtons, and more.

**Favorite and More Icons:**
Icons for marking a card as a favorite (SelectCardFavIcon and SelectCardFavIcon2) and for displaying additional options (MdOutlineMoreHoriz) are included.

**Zoom on Image:**
The react-medium-image-zoom library is used to enable zoom functionality for card images.

**Customize and Send Buttons:**
The modal includes "Customize" and "Send" buttons, each with their corresponding functionalities.

**Navigation:**
React Router's useNavigate is used for navigation to different paths within the application.

**Card Data Display:**
Information about the card, including the designer, category, and title, is displayed in the CardDetail section.

**Customization and Send Actions:**
Clicking on the "Customize" button navigates to the card editor, and clicking on the "Send" button navigates to a card preview page.

**Conditional Rendering:**
Certain components are conditionally rendered based on the existence of a user token and whether the card is marked as a favorite.

**Referral Link Handling:**
Clicking on the designer's name triggers navigation to a gallery page using the user's referral link.

**Styling:**
Styled components are used for styling various sections of the modal.

### **5. Card Preview**

**This is a card preview page where users can view different parts of a card (front, back, and envelope) using the Swiper library. This screen provides a user-friendly interface for previewing and customizing cards before approval. Here's a breakdown of its key features and functionality:**

**File Details**
**URL Path :** /cardpreview/:flag
**File Name :** CardPreview()

**Swiper Component:**
The Swiper component is used for creating a swipeable carousel to display the different parts of the card and the envelope.

**Dynamic Content Loading:**
The component uses the useEffect hook to dynamically load and display the front, back, and envelope images of the card. It also handles cleanup by revoking object URLs.

**Lottie Animation:**
Lottie is used to display an animation of an envelope on one of the slides.

**Conditional Rendering:**
The component conditionally renders content based on whether the card is being created or previewed.

**Card Approval and Customization:**
Users can approve the card or customize the envelope by clicking on the corresponding buttons.

**Routing:**
React Router's useNavigate is used for navigation to different paths within the application.

**Loading Indicator:**
While the card is being created, a loading indicator (CreateCardLoading component) is displayed, showing the progress of the card creation.

**Intercom Integration:**
The IntercomRoute component is included, suggesting integration with the Intercom messaging platform.

**Styling:**
Styled components are used for styling various sections of the page.

**Event Dispatching:**
The component dispatches a custom event to notify other parts of the application when the storage has changed.

**Parameter from URL:**
The useParams hook is used to get the flag parameter from the URL.

**Button Actions:**
The "Approve Card" button triggers the handleCard function, and the "Customize Envelope" button navigates to the envelope customization page.

**LocalStorage Usage:**
LocalStorage is used to store and retrieve card-related information.

### **6. Envelope**

**This screen provides a user-friendly interface for customizing the appearance of an envelope with different color options, linings, and seals. Here's a breakdown of its key features and functionality:**

**File Details**
**URL Path :** /envelope
**File Name :** Envelope()

**Tab Navigation:**
The component uses tabs to allow users to navigate between different customization options: Color, Lining, and Seal.The handleTab function is used to switch between tabs.

**Envelope Customization Components:**
The component includes separate components for handling envelope color (EnvelopeColor), lining color (LiningColor), and seal selection (Seals).
Each customization option is rendered based on the active tab.

**SvgEnvelope Component:**
The SvgEnvelope component is responsible for rendering the visual representation of the envelope based on the selected customization options such as lining, backdrop, tab, and envelope color.

**Tab Navigation Buttons:**
Buttons with left and right arrow icons (AiOutlineLeft and AiOutlineRight) are included for navigating between tabs.

**State Management:**
The component relies on the state management provided by the EditorContext context. Various functions (handleEnvelopeColor, handleLining, handleSeal, handlePrevTab, and handleNextTab) are used to manage state changes.

**Styling:**
Styled components (EnvelopeTop, EnvelopeDiv, EnvelopeSvgdiv, EnvelopeSvgImg, EnvelopeSvgInner, EnvelopeBottomMain, EnvelopeBottomIcon, EnvelopeBottom, TabHeading) are used for styling various sections of the page.

**Intercom Integration:**
The IntercomRoute component is included, suggesting integration with the Intercom messaging platform.

**Effect Hook for Scrolling:**
The useEffect hook is used to scroll to the top of the page when the component mounts.

### **7. Gifts Shop**

**This is a Gifts shop screen which shows digital gifts and physical gifts divided by their categories. The UI appears to change based on the values of "flag" and "delivery".**

**File Details**
**URL Path :** /gifts/:flag?
**File Name :** Gifts()

**Imports:**
The component imports various dependencies and components. Notably, it uses the Apollo Client's useQuery hook for making GraphQL queries.It imports the Loading component, which presumably displays a loading indicator.It imports styles from "../../Assets/Styles/Home/HomeStyle".It imports the GlobalContext to access global state and the useParams hook from "react-router-dom" to get parameters from the route

**Initialization:**
It uses the useParams hook to get the value of the "flag" parameter from the route. It uses the useContext hook to access the delivery variable from the global context.

**GraphQL Query:**
It uses the useQuery hook from Apollo Client to fetch data using the Get_Gift_Categories query. The result is stored in the data, loading, and error variables.

**Effect Hook:**
It uses the useEffect hook to call the scrollToTop function when the component mounts. This function presumably scrolls the page to the top.

**Conditional Rendering:**
It contains conditional rendering based on the loading state and error state of the GraphQL query.If the data is still loading, it renders the Loading component.If there is an error in fetching the data, it displays an alert with the error message. If data is available, it renders the main content of the component.

**Component Structure:**
The main content is wrapped in a MainHomeDiv component. It has a CategoriesDiv that renders a component called GiftCategories with data from the GraphQL query. It has a MainHomeInner that contains: CardCategoriesImages component, which displays images based on gift categories. HomeData component, which contains conditional rendering based on the "flag" and "delivery" values. Within the HomeData component, there are nested conditions rendering different components (DigitalGifts and GiftsBySingleCategory) based on the "flag" and "delivery" values.

### **8. Gifts Cart**

**This is a Gifts shop screen which shows digital gifts and physical gifts divided by their categories. Here's a breakdown of your component:**

**File Details**
**URL Path :** /giftscartscreen
**File Name :** GiftsCartScreen()

**Apollo Client Query:**
useQuery is a hook from Apollo Client that executes a GraphQL query and automatically manages the loading and error states.

**Scroll to Top:**
This useEffect hook runs once when the component mounts, calling the scrollToTop function. This function presumably scrolls the page to the top

**Loading and Error Handling**
If the data is still loading, it renders a Loading component.If there's an error, it displays an alert with the error message.

**Render Content:**
The main content of the component is rendered inside a fragment (<>...</>).It consists of a MainHomeDiv containing two child components: CategoriesDiv and MainHomeInner

**Category Components:**
Renders the GiftCategories component with the gift category data.

**CardCategoriesImages Component:**
Renders the CardCategoriesImages component with the gift category data.

**HomeData Component:**
Renders the DigitalGifts component.Maps over the giftCategories and renders GiftsBySingleCategory component for each category.

### **9. Recipient Screen**

**This screen shows list of contacts and groups to add for recipients who are gonna receive cards. Here's a breakdown of the key elements and functionalities in your code:**

**File Details**
**URL Path :** /sendcard
**File Name :** SendCard()

**Import Statements:**
React is imported from the "react" library.
Button component is imported from the "@mui/material" library.Custom hooks and styles related to sending cards and profiles are imported from various paths.

**Component Structure:**
The SendCard component is defined as a functional component.It utilizes the useSendCard custom hook, which likely contains state logic and functions related to handling the selection of groups, contacts, and other functionalities.

**UseEffect Hook:**
An useEffect hook is used to perform side effects in the component.It calls the scrollToTop function from the "scrollToTop" utility when the component mounts.

**Rendering:**
The component returns JSX, rendering a main div (PlansMainDiv) with some inline styling.There's a heading (PlansHeading) stating "Select Recipients & Payment Method".Two buttons (AmbStatusButton) labeled "Contacts" and "Groups" are rendered within a container (SendCardButton).Depending on the state (contactShow or groupShow), either SendCardContacts or SendCardGroups components are conditionally rendered.

**Create New Contact and Done Buttons:**
Below the contact and group selection, there are two buttons (Create A New Contact and Done).
These buttons are implemented using the Button component from MUI and have click event handlers (handleCreateNewContact and checkContacts).

**Styling:**
The styles for the buttons and other components are defined using styled-components, as evidenced by the custom styles like PlansHeading, PlansMainDiv, SendCardButton, etc.

### **10. Add Order Details**

**This screen is responsible for presenting and confirming various details related to sending a card, including subjects, recipients, senders, payment, and other related information. if any of these information is not available so you can add it or change it on this screen. The structure is modular and organized.**

**File Details**
**URL Path :** /confirmcard
**File Name :** ConfirmCard()

**Import Statements:**
React and various components are imported from different paths, such as "@mui/material" for buttons, and custom hooks like useConfirmCard, useSubscription, useSendCard, useEditProfile, useToken, and useCredits.

**Component Structure:**
The ConfirmCard component is defined as a functional component.It utilizes several custom hooks to manage state and logic related to confirming card details, subscription, payment, and credits.

**Context Usage:**
The component makes use of React context via useContext to access values from LocalStorageContext, GiftsContext, and other contexts. This allows the component to share state information with other parts of the application.

**UseEffect Hook:**
An useEffect hook is used to recalculate the price (doCalculatePrice) and update calculations when dependencies like sendTo, giftCart, and digitalGiftCart change.

**Data Handling:**
The component retrieves data from local storage (localStorage.getItem("card")), and various hooks and contexts to handle subjects, recipients, senders, card back details, and payment information.

**Rendering:**
The component renders different sections of the confirmation process, such as subject confirmation, recipient confirmation (SendToConfirm), sender confirmation (SendFromConfirm), card back confirmation (CardBack), gift cart details (GiftCart), and calculations.

**Payment Method Section:**
The component conditionally renders the payment method section (ConfirmPayment) only if the total amount to be paid is greater than zero.

**Ready to Send Button:**
A button labeled "Ready to Send" is rendered at the end of the component. This button triggers the sendFinal function with relevant parameters when clicked.

**Styling:**
The component applies some inline styling to the main div (PlansMainDiv) with padding.

**Function Parameters:**
The component defines several objects (cardBackData, sendFromData, confirmPaymentData, confirmSubjectData, ConfirmSubjectPreviewData, sendFinalParameters) to pass as props to child components or functions.

### **11. Finalize Order Screen**

**This screen serves as the confirmation step before actually sending the card. It presents a summary of the card details and allows the user to confirm the payment and proceed with sending the card.**

**File Details**
**URL Path :** /finalsend
**File Name :** FinalSend()

**Import Statements:**
React and various components are imported from different paths.Styles such as AddGiftButtons and ConfirmButton are imported from specific style files.
The useLocation hook is imported from "react-router-dom" to access the current location state.

**Component Structure:**
The FinalSend component is defined as a functional component.It utilizes several custom hooks such as useSendCard and useConfirmCard.

**UseEffect Hook:**
An useEffect hook is used to scroll to the top of the page when the component mounts.

**Data Retrieval:**
The component retrieves data from the state using the useLocation hook, including details about the card (card), cardBack, sendTo, flag, calculations, selectedPayment, subscription, and ConfirmSubjectPreviewData.

**Loading and Error Handling:**
The component checks for loading status and error in the SendCard object. If loading, it displays a loading component; if there's an error, it shows an alert with the error message.

**Rendering:**
The component renders various sections related to confirming the card details.
It displays a preview of the subject, recipient information, card back details, gift items, calculations, and payment method.

**Confirmation Button:**
A button labeled "Send Card Now!" is rendered at the end of the component. It triggers the handlePaymentConfirm function with the selected payment method when clicked.

**Styling:**
The component applies some inline styling to the main div (PlansMainDiv) with padding.

**Conditional Rendering:**
The payment method section is conditionally rendered based on whether the total amount to be paid is greater than zero.

**Loading Component:**
If the SendCard object has a loading status, a loading component is rendered to indicate that the card is being sent.

**Error Handling:**
If there's an error in the SendCard object, an alert is shown with the error message.

### **12. My Cards Screen**

**This screen provides a structured and stylized tabbed view of user cards, allowing users to navigate between different sets of cards and add new cards. The styling and structure suggest a user-friendly interface for managing cards and adding new cards within the application.**

**File Details**
**URL Path :** /mycards
**File Name :** CardsTab()

**Import Statements:**
React and components such as Tabs are imported from "react" and "antd," respectively.The SiteMap object is imported from the route configuration file, likely containing the paths for various pages.Data for the tab items is imported from the "CardsTab" file.The Button component is imported from the "@mui/material" library.Styles related to the cards tab are imported from a specific style file.The useNavigate hook is imported from "react-router-dom" to handle navigation.

**Component Structure:**
The CardsTab component is defined as a functional component. It utilizes the useContext hook to access the TabContext, which likely manages the state related to active tabs.

**Rendering:**
The component renders a main div (CardsTabMainDiv) containing the heading, button, and tab content.The heading "My Cards" and a button labeled "+ Add New Card" are rendered at the top of the component.The tab content is rendered using the Ant Design Tabs component, with each tab corresponding to an item in the items array.

**Button Click Handling:**
The button is set up with an onClick handler to navigate to a specific path when clicked (SiteMap.CreateNewCustomCard.path).

**Tab Rendering:**
Tabs are rendered based on the data in the items array. Each tab has a label and key, and the corresponding children (presumably card-related content) are rendered when the tab is active.

**Tab Change Handling:**
The activeTab and handleTabChange functions are accessed from the TabContext using useContext. These likely manage the active tab state and handle tab changes.

**Styling:**
The component applies various styles to achieve the desired visual presentation, including styles for the main div, inner div, heading, button, and tab content.

### **13. Contacts Screen**

**the Contacts screen serves as a comprehensive interface for managing contacts and groups, providing features such as adding new contacts, searching, sorting, and interacting with individual contacts or groups**

**File Details**
**URL Path :** /contacts/:flag
**File Name :** CardsTab()

**Import Statements:**
React and various components, styles, and hooks are imported from different paths.Icons such as IoMdArrowDropdown, RiArrowUpDownLine, BiDotsHorizontalRounded, and AiOutlineUserAdd are imported for use in the UI.

**Component Structure:**
The Contacts component is defined as a functional component.It utilizes the useContactAndGroups hook to manage the state and functions related to contacts and groups.Additionally, it uses the SearchContext and CampaignContext to access search-related functionality and campaign members information.

**UseEffect Hook:**
An useEffect hook is used to perform various tasks when the component mounts, including fetching data (refetch), handling manual contacts if a flag is present, and scrolling to the top of the page.

**Rendering:**
The component renders a main div (PaymentMainDiv) containing the heading, top right button, and contact content.The heading "Contacts" is rendered along with a button to add a new contact.The contact content is divided into a left section (ContactMainLeft) and a right section (ContactMainRight).The left section includes search functionality, sorting options, and a list of contacts or search results.The right section includes forms for adding new contacts, viewing, editing, or creating new groups.

**Conditional Rendering:**
Depending on various conditions such as loading status, errors, and specific flags (manualContact, viewContact, editContact, newGroup, newGroupMembers), different components like AddNewContact, ViewContact, EditContact, AddNewGroup, and AddNewGroupMembers are conditionally rendered.

**Search Functionality:**
The component incorporates search functionality by using the SearchContext and handling the search input.

**Pagination:**
Pagination buttons (PageBtns) are provided to navigate through the list of contacts.

**Styling:**
The component applies various styles to achieve the desired visual presentation, including styles for headings, buttons, icons, and contact lists.
Modal for Request Info:A modal is used to display additional information (RequestInfo) when triggered by the infoModal state.

**Error Handling:**
Loading and error states are checked for different GraphQL operations, and appropriate loading or error components are displayed.

**Context Usage:**
The component uses multiple contexts (SearchContext and CampaignContext) to access shared state and functionality.

### **14. Wallet Screen**

**the PaymentMethods component provides a comprehensive interface for managing user payment methods and eGift cards, allowing users to add new payment methods, view existing ones, and manage their eGift card collection.**

**File Details**
**URL Path :** /paymentmethods
**File Name :** PaymentMethods()

**Import Statements:**
React, various components, styles, and hooks are imported from different paths.
Icons such as AiOutlinePlus are imported for use in the UI.

**Component Structure:**
The PaymentMethods component is defined as a functional component.It utilizes several custom hooks (usePaymentMethod, useUnredeemGiftCards, useActiveGiftCards) to manage the state and functions related to payment methods and eGift cards.

**UseEffect Hook:**
An useEffect hook is used to perform various tasks when the component mounts, including scrolling to the top of the page, refetching data, and updating gift cards' information.

**Rendering:**
The component renders a main div (PaymentMainDiv) containing the heading, top right button, and payment method content.The heading "Payment Methods" is rendered along with a button to add a new payment method.Depending on the presence of payment methods, either a message "No payment method found" or the details of card and bank payment methods are displayed.Additionally, it renders a tabbed section for managing eGift cards, allowing users to view unredeemed, active, and spent cards.

**Conditional Rendering:**
Components like ShowCardMethod and ShowBankMethod are conditionally rendered based on the presence of payment methods.A form (PaymentForm) for adding a new payment method is conditionally rendered based on the open state.

**Tabbed Section for eGift Cards:**
The component includes a tabbed section (CardsTabMainDiv) for managing eGift cards. Users can navigate between tabs for unredeemed, active, and spent cards.Buttons are provided to add new eGift cards.

**Styling:**
The component applies various styles to achieve the desired visual presentation, including styles for headings, buttons, icons, and tabbed sections.

**Error Handling:**
Loading and error states are checked for different GraphQL operations, and appropriate loading or error components are displayed.

### **15. Plans Screen**

**the CardCafe Plan plans screen provides a comprehensive interface for users to view and manage their subscription plans, including the current plan, available plans, and a comparison between different plans.**

**File Details**
**URL Path :** /cardcafeplan
**File Name :** CardCafePlan()

**Import Statements:**
The component imports necessary modules, components, styles, hooks, and icons from different paths.

**Hooks and Data:**
The component utilizes the useSubscription hook to manage subscription-related data and actions.

**UseEffect Hook:**
An useEffect hook is used to perform tasks when the component mounts, such as scrolling to the top of the page and refetching data.

**Conditional Rendering:**
The component checks if there is any subscription data. If not, it renders a message indicating "No Data Found."If there is subscription data, it displays information about the current subscription plan, CardCafe plans, and a comparison table.

**Rendering Current Subscription Information:**
The component renders details about the user's current subscription plan, including the plan name, start and end dates of the current cycle.

**Rendering CardCafe Plans:**
If the user is not an ambassador, it renders a table with details about different CardCafe plans, including plan name, cost, and buttons for cancellation or plan change.

**Cancellation and Upgrade Buttons:**
The component provides buttons for canceling the current subscription (if applicable) and upgrading to a different plan.

**Change Plan Modal:**
The ChangePlan component is conditionally rendered, providing a modal for users to change their subscription plan.

**Compare Plans:**
The component renders a table comparing different plans, including features and their values for each plan.

**Modals:**
The PlansModals component is used within a modal for canceling a subscription.

**Styling:**
The component applies various styles for headings, buttons, tables, and modals to achieve the desired visual presentation.

**Error Handling:**
Loading and error states are checked for different GraphQL operations, and appropriate loading or error components are displayed.

### **16. Credits Screen**

**the CardCafe Credits screen provides a comprehensive interface for users to view their credit balance, purchase credits, and manage auto-replenishing settings.!**

**File Details**
**URL Path :** /cardcafecredits
**File Name :** CardCafeCredits()

**Import Statements:**
The component imports necessary modules, components, styles, and hooks from different paths.

**Hooks and Data:**
The component utilizes the useCredits hook to manage credits-related data and actions.

**UseMemo Hook:**
The useMemo hook is used to refetch user credits data when there are changes in the userCredits?.data.

**Loading and Error Handling:**
Loading and error states are checked for different GraphQL operations, and appropriate loading or error components are displayed.

**Buy Credits Section:**
The component displays the user's credit balance, including regular and bulk credits. It provides a table of different credit packages that users can purchase, showing the amount, discounted price (if any), and a "Buy Now" button.

**Custom Credit Amount:**
Users can input a custom credit amount using a TextField.There's a validation to ensure the custom credit amount is greater than or equal to 5.A "Buy Now" button is provided for purchasing custom credits.

**Modals:**
The CardCafeCreditsBuy component is conditionally rendered, providing a modal for users to complete the credit purchase.

**Styling:**
The component applies various styles for headings, buttons, tables, and text fields to achieve the desired visual presentation.

**Auto Replenish Section:**
The component includes features related to auto-replenishing credits, such as enabling, disabling, and displaying relevant messages.

**Scroll to Top:**
The component uses the scrollToTop utility from the provided assets to scroll to the top of the page on mount or when refetching data.

**Alerts:**
The handleAlert function is used to display an alert when attempting to buy custom credits less than 5.

### **17. Share / Referral Screen**

**the CardCafeReferrals screen provides a comprehensive interface for users to view and manage their referral codes, referral links, and referral program details.**

**File Details**
**URL Path :** /cardcaferferrals
**File Name :** CardCafeReferrals()

**Import Statements:**
The component imports necessary modules, components, styles, and hooks from different paths.

**Hooks and Data:**
The component utilizes the useReferrals hook to manage referral-related data and actions.

**UseEffect Hook:**
The useEffect hook is used to scroll to the top of the page when the component mounts.

**Loading and Error Handling:**
Loading and error states are checked for different GraphQL operations, and appropriate loading or error components are displayed.

**Snackbar and Alert:**
The component uses MUI's Snackbar and Alert components to display a success message when the referral link is copied.

**Referral Code and Link Display:**
Displays the user's CardCafe referral code and provides an option to add an affinity referral code.
Shows the user's referral link, with the ability to copy the link.

**Share Referral Link Icons:**
Displays various share icons for users to easily share their referral link on different platforms.

**Referral Program Information:**
Provides information about the ongoing referral program, including commission percentages for direct and friend-of-friend referrals. Users can click "Learn More" to get additional details about the referral program.

**Direct and Friend-of-Friend Referrals:**
Renders components (DirectReferrals and FriendsReferrals) to display information about the user's direct and friend-of-friend referrals.

**Referral Modals:**
Utilizes a modal (ReferralModals component) for handling actions related to referral codes.

**Styling:**
The component applies various styles for headings, buttons, and informational sections to achieve the desired visual presentation.

### **18. Create Card Screen**
**the Create Card screen provides a user interface for creating a new custom card, either from scratch or by importing from Canva, with modals for each option.**

**File Details**
**URL Path :** /createnewcustomcard
**File Name :** CreateNewCustomCard()

**Import Statements:**
The component imports necessary modules, components, styles, and hooks from different paths.

**Hooks and Data:**
The component utilizes the useCardCategories and useCreateCard hooks to fetch card categories and manage the card creation process.

**Loading and Error Handling:**
Loading and error states are checked for card category data.

**Navigation:**
Provides a button to navigate back to the home page using React Router's useNavigate.

**Create From Scratch Section:**
Displays a section to create a new custom card from scratch.Clicking on this section opens a modal (CreateFromScratchComponent) with options related to creating a card from scratch.

**Import from Canva Section:**
Displays a section to import a card from Canva.Clicking on this section opens a modal (ImportFromCanveComponent) with instructions on how to import a card from Canva.

**Instructions for Canva Import:**
Provides step-by-step instructions for importing a card from Canva, including selecting the card type, loading a starting template, designing the card in Canva, and replacing front and back images in the CardCafe Editor.

**Modals:**
Uses Ant Design's Modal component to handle modals for creating a card from scratch and importing from Canva.

**Styling:**
Applies various styles for buttons, headings, and informational sections to achieve the desired visual presentation.

### **19. Local Storage**
1. **key = token** is **stored** at multiple OTP files (total = 4) which are
• Ambassador
• OTP
• Referral otp
• User Referral otp
2. **key = token** the Token is **imported** from local storage in (total = 5) files which are
• Editor Context
• Local Storage Context
• Search context
• Send from context
• useToken.js
4. **key = card** is stored on approving card in card preview component
5. **key = designer** is stored in the SelectCardModal component
6. **LocalStorageContext** is used for handling window events for local storage
### **in progress...**

## **-----------------------------------------------------------------------**

> [name=Irfan Iqbal]
### **20.Commissions**
["../../../src/Components/Commissions"]
1-Here are the commisions tabs it shows you have silver Elite CardCafe commisiuons.
2-Totals referrals, you need 30 more Referral points, to Reach.
3-You can convert the commissions into the cardCafe credits or transfer to my bank.
4-You can see the data summary of the commisions hereby.

### **21.Compaigns**
["../../../src/Components/Campaign"]
1-So here is the compaigns tab to create new compaign click on the right click button to Add New Compaign we will see that if we click on the Add key date Compaign a alert will show that yoyu please enable auto replenish in credits it means you should have money into your credits..
2-After enable the auto replenish in credits
you can add the information like Company Name, Compaign Type, Compaign Delivery method, Select Compaign Card, sender Profile, Gift(you can select it please from the available gift please), Card Back and then click on the button .
["../../../src/Components/ViewComponent/AddNewCompaign"]

2-You will see that the compaign is added successfully you can see the information the cost price and other things and you can confirm it.
3-Our compaign is created.
4- we can edit and inactive the compaign here.

### **22-Integrations**
>["../../../src/Components/Campaign/Integrations/Keap";
"../../../src/Components/Campaign/Integrations/Zapier";
"../../../src/Hooks/Campaign/Integrations/useIntegrations";]
1-In Ingredients you can the zapier ingredient will project will be created with the same process there.
2-In keap you can create a project logging in keap to create virtual event there.

### **23-Referrals**
> [../..../src/Components/Referrals/DirectReferrals]
> [../..../src/Components/Referrals/FriendsReferrals]
> [../..../src/Components/Referrals/Referrals/ReferralModals]
**Referral Compaigns**
1-Direct Referral scenrio is creating the same to create a referral
2-
3- There are 3 thing
i) Analytics (click on)
It will show the Referral Partner Sign- ups:
New Customers Acquired:
# of Campaign Shares:
Total Campaign Views:

ii) Referral Campaign Settings
--In setting there are 16 different setting to change the input naming you can change it according to the requirement there.
--Now you can share the link through the QR code and approve it.
-- Here ypu can add the refferral url and frtch the details of the compaigns there.

iii)Edit the Referral Compaign as you want please..

### **24. Add to cart**
1-User can finalize your card after successful payment here with dropdown Birthday or the anniversy etc...

2-In plus icon user can craete new contact or group to send the card id and create multiple contacts at the same time.
3-You need to check the data which you want to add into the contact and the gropups.
4- After the successful creation of the contact or group the user add gift item or Add card to send and preview thw other information there.
5-After this the card is ready to send
6-Then there is need to approve the card
7-Select the card and add new payment method click on the button to add new payment method to proceed the card is ready to send....
8-Congrats your card has been sent.

### **25. Profile**
**File Details**
**URL Path :** /profile/:api
**File Name :** Profile()
EditSenderProfile()
1-Simple user can edit their profile and can click on check to send it by default.!

**Add New Profile**
**URL Path :** /addnewprofile
**File Name :** AddNewProfile()
--A simple user can create multiple profiles by add the plus subscription to share the card, gift and other stuff.

**For developer**
The profile components of cardback, CompaignCardData,ApiKey CardBack etc.

**Add new Card back**
**URL Path :** /addnewprofile
**File Name :** AddNewProfile()
2-Simple user can create a new cardBack i)create from scratch ii)Import from the canva
You can create the cardback according to the requirement here.
4-Api key is the key which is used to for user.
3-User can delete the account by click on the delete button.
5-After the deletion of the current user you will navigate to the home page/otp...