Open Account Settings

Description

The openAccountSettings() action is a navigation helper that routes users to the core user configurations area. This allows customers to modify crucial personal attributes such as their name, email, contact phone number, password updates, and communication preferences.

Function Signature

Superfans.actions.openAccountSettings();

Structure of Response

Status	Response
Success	`{ "status": "success", "message": "Account Setitngs page opened successfully" }`
Cart not accessible	`{ "status": "error", "errorId": 400, "errorHandle": "Account Setitngs -not-accessible", "message": "Address page not accessible at the moment, please try again" }`
Unexpected Error	`{ "status": "error", "errorId": 500, "errorHandle": "unknown-error", "message": "Something unexpected happened" }`

Example Usage

function openAccountSettings()
{
Superfans.actions.openAccountSettings();
}

:root {
    --primary-clr: #4f46e5;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --text-sub: #64748b;
    --border-radius: 16px;
    --transition: all 0.25s ease;
}
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    color: var(--text-main);
}
.account-container {
    /* width: 100%;
    max-width: 400px;
    background: var(--card-bg);
    padding: 2.5rem 1.5rem;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04); */
}
/* Header Styles */
.profile-header {
    text-align: center;
    margin-bottom: 2rem;
}
.avatar-container {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.2rem;
}
#avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 8px 16px rgba(79, 70, 229, 0.15);
}
.profile-header h1 {
    font-size: 1.4rem;
    margin: 0;
    color: var(--text-main);
}
.profile-header p {
    font-size: 0.9rem;
    color: var(--text-sub);
    margin: 0.3rem 0 0;
}
/* Stats Section */
.stats-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
.stat-card {
    background: #f1f5f9;
    padding: 1rem;
    border-radius: var(--border-radius);
    text-align: center;
}
.stat-value {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
}
.stat-label {
    font-size: 0.75rem;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Action CTAs */
.action-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.action-item {
    display: flex;
    align-items: center;
    padding: 1.1rem;
    border: 1px solid #f1f5f9;
    background: #fff;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
}
.action-item:hover {
    border-color: var(--primary-clr);
    background: #fdfdff;
    transform: translateX(4px);
}
.action-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.3rem;
}
.address-icon { background: #eef2ff; color: #4f46e5; }
.settings-icon { background: #fff7ed; color: #f59e0b; }
.action-text { flex-grow: 1; text-align: left;}
.action-title {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
}
.action-sub {
    font-size: 0.75rem;
    color: var(--text-sub);
}
.arrow {
    color: #cbd5e1;
    font-size: 1.2rem;
}
/* Footer */
.logout-btn {
    margin-top: 2rem;
    width: 100%;
    padding: 1rem;
    border: none;
    background: #fff1f2;
    color: #e11d48;
    font-weight: 600;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
}
.logout-btn:hover { background: #ffe4e6; }

<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Account</title>
    <link rel="stylesheet" href="style.css">
    <div class="account-container">
        <header class="profile-header">
            <div class="avatar-container">
                <img src="https://ui-avatars.com/api/?name=Alex+Johnson&amp;background=4f46e5&amp;color=fff&amp;size=128" alt="Profile Placeholder" id="avatar-img">
            </div>
            <h1 id="user-name">Alex Johnson</h1>
            <p id="user-email">[email protected]</p>
        </header>
        <section class="stats-container">
            <div class="stat-card">
                <span class="stat-value">12</span>
                <span class="stat-label">Orders</span>
            </div>
            <div class="stat-card">
                <span class="stat-value">5</span>
                <span class="stat-label">Reviews</span>
            </div>
        </section>
        <nav class="action-list">
            <button class="action-item" onclick="openAddress()">
        <div class="action-icon address-icon">
            <ion-icon name="location-sharp"></ion-icon> 
        </div>
        <div class="action-text">
            <span class="action-title">My Addresses</span>
            <span class="action-sub">Manage delivery locations</span>
        </div>
        <ion-icon name="chevron-forward-outline" class="arrow"></ion-icon>
    </button>
            <button class="action-item" onclick="openAccountSettings()">
        <div class="action-icon settings-icon">
            <ion-icon name="options-outline"></ion-icon>
        </div>
        <div class="action-text">
            <span class="action-title">Account Settings</span>
            <span class="action-sub">Privacy and Profile details</span>
        </div>
        <ion-icon name="chevron-forward-outline" class="arrow"></ion-icon>
    </button>
        </nav>
        <footer class="account-footer">
            <button class="logout-btn">Log Out</button>
        </footer>
    </div>

Best Practices

Centralized Dashboard Hub: This action is perfect for anchoring a "Profile Gear" icon or account dashboard listing.
Data Refresh Synchronization: When users return to your custom block after editing their details, make sure to listen for any authentication or variable status changes to render newly modified user data dynamically.

Caveats

Device Restrictions: Certain natively embedded configurations (like biometric setups or push notifications preferences toggleable from account layouts) may depend directly on individual operating system configurations (iOS/Android).