UpdateEmailBottomSheet Component

A reusable bottomsheet component for corporate email verification and update flow. This component supports two use cases:

1. UPDATE: Add and verify a new corporate email
2. VERIFY: Verify an existing corporate email (if expired)

Features

• Multi-step flow: Email input → OTP verification
• Flexible heading & button text: Changes based on flow type (UPDATE/VERIFY)
• Email validation: Validates email format and corporate domain matching
• 6-digit OTP input: Auto-focus, paste support, backspace navigation
• Resend OTP: Countdown timer and resend functionality
• Error handling: User-friendly error messages with error callouts
• Analytics: Integrated with ravenSDK for event tracking
• Edit capability: Users can go back to email input to modify the email
• Responsive design: Works seamlessly on mobile and web

Installation

This component is part of @cleartrip/ct-platform-utils monorepo.

npm install @cleartrip/ct-platform-update-email-bottom-sheet

Usage

Basic Usage

import { UpdateEmailBottomSheet, EmailFlowType } from '@cleartrip/ct-platform-update-email-bottom-sheet';
import { useState } from 'react';

export function MyComponent() {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <UpdateEmailBottomSheet
            isBottomSheetOpen={isOpen}
            flowType={EmailFlowType.UPDATE}
            corporateDomain="intel.com"
            onCloseButtonClick={() => setIsOpen(false)}
            onEmailVerified={(email) => {
                console.log('Email verified:', email);
                // Handle post-verification logic
            }}
            onEmailVerificationFailed={(error) => {
                console.log('Verification failed:', error);
            }}
        />
    );
}

With Verify Flow

<UpdateEmailBottomSheet
    isBottomSheetOpen={isOpen}
    flowType={EmailFlowType.VERIFY}
    corporateDomain="intel.com"
    onCloseButtonClick={() => setIsOpen(false)}
    onEmailVerified={(email) => {
        // Re-apply coupon after verification
        applyCoupon(email);
    }}
/>

Props

interface UpdateEmailBottomSheetProps {
    // Required
    isBottomSheetOpen: boolean;              // Controls visibility of bottomsheet
    flowType: EmailFlowType;                 // UPDATE or VERIFY

    // Optional
    corporateDomain?: string;                // e.g., "intel.com" - shows in heading
    closeOnOutsideClick?: boolean;           // Default: false
    onCloseButtonClick?: () => void;         // Called when close button is clicked
    onEmailVerified?: (email: string) => void;  // Called on successful verification
    onEmailVerificationFailed?: (error: string) => void;  // Called on verification failure
    ravenPayload?: { [key: string]: string | number };  // Additional analytics props
}

enum EmailFlowType {
    UPDATE = 'UPDATE',  // For adding new email
    VERIFY = 'VERIFY',  // For verifying existing email
}

Flow & Behavior

Screen 1: Email Input

UPDATE Flow:

• Heading: "Update email address"
• Subtext: "Add and verify your "intel.com" email id to unlock this exclusive coupon."
• Button: "Get OTP"
• Validates email format and domain

VERIFY Flow:

• Heading: "Verify email address"
• Subtext: "Confirm your "intel.com" email id and verify it to unlock this exclusive coupon."
• Button: "Verify"
• Same validation as UPDATE

Actions:

• User enters email → Validates format and domain → Clicks "Get OTP" → API call to send OTP
• On success → Proceeds to OTP input screen
• On error → Shows error callout, user can retry

Screen 2: OTP Input

• Shows "OTP sent to {email}" with edit icon
• 6 digit boxes for OTP entry
• Auto-focus on first box
• Auto-advances to next box on digit entry
• Supports paste from clipboard
• Supports backspace navigation
• Resend OTP button with countdown (30s)
• Auto-detection of OTP (if supported by platform)

Actions:

• User enters all 6 digits → Auto-submits OTP verification
• On success → Shows success message → Closes bottomsheet after 1.5s
• On error → Shows error message, user can retry
• Click edit icon → Returns to email input screen
• Click "Resend" → Sends new OTP with 30s countdown

Integration Notes

API Integration (To Be Provided)

The component has placeholder implementations for:

1. sendEmailOtp(email) - Send OTP to email
2. validateOtp(email, otp) - Verify OTP

Once API endpoints are provided, integrate them in the getOTP function and OTP validation logic:

// In UpdateEmailBottomSheet.tsx
const getOTP = useCallback(
    async (emailAddress: string) => {
        try {
            setSendingOtp(true);
            const res = await sendEmailOtp(emailAddress);  // YOUR API CALL
            if (res?.status === 'SUCCESS') {
                setShowEmailPage(false);
            }
        } catch (err) {
            // Handle error
        }
    },
    [],
);

// In OtpInput/index.tsx
const handleOtpComplete = useCallback(
    async (otp: string) => {
        try {
            const response = await validateOtp(email, otp);  // YOUR API CALL
            if (response?.status === 200) {
                handleVerificationSuccess();
            }
        } catch (e) {
            handleVerificationFailure('OTP verification failed');
        }
    },
    [],
);

Wrapping in UI Layer (ct-platform-ui)

Create a wrapper component in ct-platform-ui to handle:

• Local state management
• Integration with user context
• Post-verification coupon application logic
• Navigation/redirect after closure

Example:

// ct-platform-ui/src/components/UpdateEmailBottomSheetWrapper/index.tsx
import { UpdateEmailBottomSheet, EmailFlowType } from '@cleartrip/ct-platform-update-email-bottom-sheet';
import { useUserContext } from '../../context/UserContext';

export function UpdateEmailBottomSheetWrapper() {
    const { showUpdateEmail, setShowUpdateEmail, applyCoupon } = useUserContext();

    return (
        <UpdateEmailBottomSheet
            isBottomSheetOpen={showUpdateEmail}
            flowType={EmailFlowType.UPDATE}
            corporateDomain="intel.com"
            onCloseButtonClick={() => setShowUpdateEmail(false)}
            onEmailVerified={(email) => {
                // Apply coupon after successful verification
                applyCoupon();
            }}
        />
    );
}

Constants Mapping

Error messages from backend will be matched against UPDATE_EMAIL_CONSTANTS:

UPDATE_EMAIL_CONSTANTS = {
    INVALID_EMAIL: 'Please enter a valid email address',
    EMAIL_MISMATCH: 'Email does not match the required domain',
    OTP_SEND_LIMIT_EXCEEDED: 'Too many OTP requests. Please try after some time.',
    OTP_VALIDATE_LIMIT_EXCEEDED: 'Too many verification attempts. Please try after some time.',
    INVALID_OTP: 'Invalid OTP. Please try again.',
    GENERIC_ERROR_MESSAGE: 'Something went wrong. Please try later.',
}

Analytics Events

All user interactions are tracked with ravenSDK:

• email_verification_bottomsheet_open - When bottomsheet opens
• email_verification_bottomsheet_dismiss - When close button clicked
• get_otp_clicked - When "Get OTP" button clicked
• otp_entered - When OTP digits are entered
• otp_entered (manual_entry vs autodetected) - Entry type tracking
• resend_otp_clicked - When Resend button clicked
• email_verified_success - On successful verification
• email_verified_failure - On verification failure
• email_otp_screen_opened - When OTP screen displays

Accessibility

• Form labels are hidden but available for screen readers
• All interactive elements have proper ARIA roles
• Keyboard navigation supported (Tab, Backspace, Enter)
• Color contrast meets WCAG standards

Styling

The component uses:

• CSS Modules for scoped styles
• Design system tokens from @cleartrip/ct-design-*
• SCSS for flexible styling
• Responsive design for mobile and web

Custom styling can be applied via CSS overrides targeting:

• .updateemailcontainer - Main container
• .emailinput_* - Email input specific
• .otp_* - OTP input specific

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• iOS Safari
• Android Chrome

Dependencies

• React 16.8+
• react-dom 16.8+
• @cleartrip/ct-platform-drawer
• @cleartrip/ct-platform-utils
• @cleartrip/ct-design-* components
• styled-components 6.1.8+

Testing

The component can be tested by:

1. Mounting the component with different flowType props
2. Verifying error handling with invalid emails
3. Testing OTP input with paste functionality
4. Testing resend countdown and callbacks
5. Verifying analytics events are triggered

Future Enhancements

• SMS-based OTP delivery option
• Email-based OTP delivery tracking
• Rate limiting UI improvements
• Custom email validation rules
• Internationalization (i18n) support
• Dark mode support

Support

For issues or feature requests, please contact the Cleartrip development team.