applt a switch to require or not, stores, fix issues lik, return to correcto...

applt a switch to require or not, stores, fix issues lik, return to correcto domain when delete mailbox, remove the right dns record when using input search, hide buttons actions when is not a global admin on admin list in domain view, add pagination on distribution list, and input search etc.

path.json

-module.exports = {"main":{"js":"/886953bundle.js"}}
\ No newline at end of file
+module.exports = {"main":{"js":"/738894bundle.js"}}
\ No newline at end of file

src/components/companies/companies.jsx

@@ -27,6 +27,7 @@ export default class Companies extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getCompanies = this.getCompanies.bind(this);
         this.getDomains = this.getDomains.bind(this);
         this.getPlans = this.getPlans.bind(this);
@@ -43,13 +44,15 @@ export default class Companies extends React.Component {
     }
 
     gotoCompany(e, company) {
-        CompaniesStore.setCurrent(company);
+        if (this.isStoreEnabled) {
+            CompaniesStore.setCurrent(company);
+        }
         Utils.handleLink(e, `/companies/${company.id}`, this.props.location);
     }
 
     getCompanies() {
         const self = this;
-        const companies = CompaniesStore.getCompanies();
+        const companies = this.isStoreEnabled ? CompaniesStore.getCompanies() : null;
         if (companies) {
             self.setState({
                 companies
@@ -66,7 +69,9 @@ export default class Companies extends React.Component {
                 });
 
                 return Promise.all(domains).then((comps) => {
-                    CompaniesStore.setCompanies(comps);
+                    if (this.isStoreEnabled) {
+                        CompaniesStore.setCompanies(comps);
+                    }
 
                     self.setState({
                         companies: comps,
@@ -87,10 +92,14 @@ export default class Companies extends React.Component {
             });
         }
 
-        if (DomainStore.getDomains()) {
-            const domain = DomainStore.getDomainByName(mydomain);
+        const domains = this.isStoreEnabled ? DomainStore.getDomains() : null;
+
+        if (domains) {
+            const domain = this.isStoreEnabled ? DomainStore.getDomainByName(mydomain) : null;
             Client.getCompany(domain.attrs.businessCategory, (company) => {
-                CompaniesStore.setCompanies(company);
+                if (this.isStoreEnabled) {
+                    CompaniesStore.setCompanies(company);
+                }
             }, (error) => {
                 self.setState({error: {
                     message: error,

src/components/companies/company_admins.jsx

@@ -16,6 +16,7 @@ export default class CompanyAdmins extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getCompanyAdmins = this.getCompanyAdmins.bind(this);
         this.getAdmins = this.getAdmins.bind(this);
 
@@ -70,7 +71,9 @@ export default class CompanyAdmins extends React.Component {
                         d.admins = [];
                     }
 
-                    CompanyStore.addDomainAdmins(company.id, d);
+                    if (this.isStoreEnabled) {
+                        CompanyStore.addDomainAdmins(company.id, d);
+                    }
                     Reflect.apply(Array.prototype.push, admins, d.admins);
                 });
 

src/components/companies/company_details.jsx

@@ -28,6 +28,7 @@ export default class CompaniesDetails extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.state = {};
 
         this.getCompany = this.getCompany.bind(this);
@@ -38,7 +39,7 @@ export default class CompaniesDetails extends React.Component {
     getCompany() {
         const self = this;
         const companyId = this.props.params.id;
-        const company = CompaniesStore.getCurrent();
+        const company = this.isStoreEnabled ? CompaniesStore.getCurrent() : null;
         if (company) {
             self.setState({
                 company
@@ -48,7 +49,9 @@ export default class CompaniesDetails extends React.Component {
 
         return Client.getCompany(companyId).then((data) => {
             return self.getDomains(data).then((comp) => {
-                CompaniesStore.setCurrent(comp);
+                if (this.isStoreEnabled) {
+                    CompaniesStore.setCurrent(comp);
+                }
                 self.setState({
                     company: comp
                 });
@@ -75,13 +78,17 @@ export default class CompaniesDetails extends React.Component {
                 },
                 (data) => {
                     const domains = data.domain;
-                    return self.getPlans(domains).
-                    then(() => {
-                        company.domains = domains;
-                        resolve(company);
-                    }).catch((error) => {
-                        reject(error);
-                    });
+                    if (domains) {
+                        return self.getPlans(domains).
+                        then(() => {
+                            company.domains = domains;
+                            resolve(company);
+                        }).catch((error) => {
+                            reject(error);
+                        });
+                    }
+
+                    return resolve(company);
                 },
                 (error) => {
                     reject(error);
@@ -121,6 +128,7 @@ export default class CompaniesDetails extends React.Component {
 
     render() {
         const company = this.state.company;
+
         if (!company) {
             return <div/>;
         }

src/components/companies/company_domains.jsx

@@ -13,7 +13,7 @@ import * as Utils from '../../utils/utils.jsx';
 
 export default class CompanyDomains extends React.Component {
     render() {
-        const domains = this.props.company.domains;
+        const domains = this.props.company.domains || [];
         const isAdmin = UserStore.isGlobalAdmin();
 
         let buttons;

src/components/companies/company_mailbox_plans.jsx

@@ -37,7 +37,7 @@ export default class CompanyMailboxPlans extends React.Component {
             return cos[c];
         });
 
-        const domains = company.domains;
+        const domains = company.domains || [];
 
         const plans = {};
         let noLimitError;

src/components/distribution/distribution_lists.jsx

@@ -27,6 +27,7 @@ export default class DistributionLists extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = true;
         this.getDistributionLists = this.getDistributionLists.bind(this);
         this.showMessage = this.showMessage.bind(this);
         this.onDeleteMember = this.onDeleteMember.bind(this);
@@ -61,15 +62,14 @@ export default class DistributionLists extends React.Component {
     }
 
     getDistributionLists() {
-        //const domain = DomainStore.getCurrent();
+        const domain = this.isStoreEnabled ? DomainStore.getCurrent() : null;
         const id = this.props.params.id;
         const response = {};
-        const domain = null;
 
         return new Promise((resolve, reject) => {
             if (domain) {
                 response.domain = domain;
-                const dl = DomainStore.getDistributionListById(id, domain);
+                const dl = this.isStoreEnabled ? DomainStore.getDistributionListById(id, domain) : null;
                 response.distributionsList = dl;
 
                 dl.getOwners((error, owners) => {
@@ -102,13 +102,15 @@ export default class DistributionLists extends React.Component {
                 reject(error);
             });
         }).then((data) => {
-            DomainStore.setOwners(data.owners);
-            DomainStore.setMembers(data.distributionsList.members);
+            if (this.isStoreEnabled) {
+                DomainStore.setOwners(data.owners);
+                DomainStore.setMembers(data.distributionsList.members);
+            }
 
             this.setState({
                 distributionsList: data.distributionsList,
-                members: DomainStore.getMembers(),
-                owners: DomainStore.getOwners(),
+                members: this.isStoreEnabled ? DomainStore.getMembers() : data.distributionsList.members,
+                owners: this.isStoreEnabled ? DomainStore.getOwners() : data.owners,
                 domain: data.domain
             });
         }).catch((error) => {
@@ -124,12 +126,14 @@ export default class DistributionLists extends React.Component {
     onSubmitOwners(response) {
         if (response.refresh) {
             response.refresh.forEach((member) => {
-                DomainStore.addOwners(member);
+                if (this.isStoreEnabled) {
+                    DomainStore.addOwners(member);
+                }
             });
         }
 
         this.multipleActionsOwners(response, this.state.distributionsList).then((res) => {
-            //const newOwners = DomainStore.getOwners();
+            //const newOwners = this.isStoreEnabled ? DomainStore.getOwners() : null;
             const errors = [];
             const limit = res.length;
 
@@ -156,7 +160,9 @@ export default class DistributionLists extends React.Component {
                 Client.getDistributionList(id, (success) => {
                     success.getOwners((error, owners) => {
                         if (owners) {
-                            DomainStore.setOwners(owners);
+                            if (this.isStoreEnabled) {
+                                DomainStore.setOwners(owners);
+                            }
                             this.setState({
                                 owners,
                                 error: errors
@@ -175,12 +181,14 @@ export default class DistributionLists extends React.Component {
     onSubmitMembers(response) {
         if (response.refresh) {
             response.refresh.forEach((member) => {
-                DomainStore.addMember(member);
+                if (this.isStoreEnabled) {
+                    DomainStore.addMember(member);
+                }
             });
         }
 
         this.multipleActionsMembers(response, this.state.distributionsList).then((res) => {
-            const newMembers = DomainStore.getMembers();
+            const newMembers = this.isStoreEnabled ? DomainStore.getMembers() : null;
             const errors = [];
             const limit = res.length;
 
@@ -227,7 +235,9 @@ export default class DistributionLists extends React.Component {
                         }
 
                         response.add.forEach((member) => {
-                            DomainStore.addMember(member);
+                            if (this.isStoreEnabled) {
+                                DomainStore.addMember(member);
+                            }
                         });
 
                         res.isCompleted = true;
@@ -253,7 +263,9 @@ export default class DistributionLists extends React.Component {
                         }
 
                         response.remove.forEach((member) => {
-                            DomainStore.removeMember(member);
+                            if (this.isStoreEnabled) {
+                                DomainStore.removeMember(member);
+                            }
                         });
 
                         res.isCompleted = true;
@@ -334,8 +346,10 @@ export default class DistributionLists extends React.Component {
     }
 
     onDeleteMember(member) {
-        DomainStore.removeMember(member);
-        const currentMembers = DomainStore.getMembers();
+        if (this.isStoreEnabled) {
+            DomainStore.removeMember(member);
+        }
+        const currentMembers = this.isStoreEnabled ? DomainStore.getMembers() : null;
 
         this.setState({
             members: currentMembers,
@@ -346,10 +360,12 @@ export default class DistributionLists extends React.Component {
     onCancelMember(response) {
         if (response && response.length > 0) {
             response.forEach((member) => {
-                DomainStore.addMember(member);
+                if (this.isStoreEnabled) {
+                    DomainStore.addMember(member);
+                }
             });
 
-            const newMembers = DomainStore.getMembers();
+            const newMembers = this.isStoreEnabled ? DomainStore.getMembers() : null;
 
             this.setState({
                 members: newMembers,
@@ -361,8 +377,10 @@ export default class DistributionLists extends React.Component {
     }
 
     onDeleteOwner(owner) {
-        DomainStore.removeOwner(owner);
-        const currentOwners = DomainStore.getOwners();
+        if (this.isStoreEnabled) {
+            DomainStore.removeOwner(owner);
+        }
+        const currentOwners = this.isStoreEnabled ? DomainStore.getOwners() : null;
 
         this.setState({
             owners: currentOwners,
@@ -373,10 +391,12 @@ export default class DistributionLists extends React.Component {
     onCancelOwner(response) {
         if (response && response.length > 0) {
             response.forEach((member) => {
-                DomainStore.addOwners(member);
+                if (this.isStoreEnabled) {
+                    DomainStore.addOwners(member);
+                }
             });
 
-            const newOwners = DomainStore.getOwners();
+            const newOwners = this.isStoreEnabled ? DomainStore.getOwners() : null;
 
             this.setState({
                 owners: newOwners,
@@ -581,20 +601,29 @@ export default class DistributionLists extends React.Component {
                 <div className='content animate-panel'>
                     {message}
                     <div className='row'>
-                        <div className='col-md-6 central-content'>
-                            <Panel
-                                title='Información General'
-                                btnsHeader={btnsGeneralInfo}
-                                children={generalData}
-                                classHeader='with-min-height'
-                            />
-                        </div>
-                        <div className='col-md-6 central-content'>
-                            <Panel
-                                title='Dominio'
-                                children={domainInfo}
-                                classHeader='with-min-height'
-                            />
+                        <div className='layout-back clearfix'>
+                            <div className='back-left backstage'>
+                                <div className='backbg'></div>
+                            </div>
+                            <div className='back-right backstage'>
+                                <div className='backbg'></div>
+                            </div>
+
+                            <div className='col-md-6 central-content'>
+                                <Panel
+                                    title='Información General'
+                                    btnsHeader={btnsGeneralInfo}
+                                    children={generalData}
+                                    classHeader='with-min-height'
+                                />
+                            </div>
+                            <div className='col-md-6 central-content'>
+                                <Panel
+                                    title='Dominio'
+                                    children={domainInfo}
+                                    classHeader='with-min-height'
+                                />
+                            </div>
                         </div>
                     </div>
                     <div className='row'>

src/components/domain/add_admin_modal.jsx

@@ -19,6 +19,7 @@ export default class AddAdminModal extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.handleSearch = this.handleSearch.bind(this);
         this.handleAddAdmin = this.handleAddAdmin.bind(this);
 
@@ -45,7 +46,7 @@ export default class AddAdminModal extends React.Component {
                 (data) => {
                     const admins = DomainStore.getAdmins(this.props.domain);
                     let users = [];
-                    if (admins) {
+                    if (this.isStoreEnabled && admins) {
                         if (data.account) {
                             data.account.forEach((u) => {
                                 if (!admins.hasOwnProperty(u.id)) {
@@ -88,15 +89,20 @@ export default class AddAdminModal extends React.Component {
 
                 if (this.props.show) {
                     this.props.onHide();
-                    setTimeout(() => {
-                        GlobalActions.emitMessage({
-                            message: 'Se ha agregado su administrador éxitoxamente.',
-                            type: Constants.MessageType.SUCCESS
-                        });
-                    }, 1000);
+                    GlobalActions.emitToast({
+                        type: 'success',
+                        title: 'Dominio',
+                        body: `Se ha agrega el administrador: ${user}, éxitosamente.`,
+                        options: {
+                            timeOut: 4000,
+                            extendedTimeOut: 2000,
+                            closeButton: true
+                        }
+                    });
                 }
 
-                return DomainStore.addAdmin(user);
+                DomainStore.emitAdminsChange();
+                return this.isStoreEnabled && DomainStore.addAdmin(user) ? DomainStore.addAdmin(user) : true;
             }
         );
     }

src/components/domain/add_distribution_list_modal.jsx

@@ -15,6 +15,7 @@ export default class AddDistributionListModal extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.handleAddList = this.handleAddList.bind(this);
         this.state = {};
     }
@@ -31,7 +32,11 @@ export default class AddDistributionListModal extends React.Component {
                     email,
                     {displayName},
                     (data) => {
-                        DomainStore.addDistributionList(data);
+                        if (this.isStoreEnabled) {
+                            DomainStore.addDistributionList(data);
+                        } else {
+                            DomainStore.emitDistributionListsChange();
+                        }
                         GlobalActions.emitEndLoading();
                         this.props.onHide();
                     },

src/components/domain/antispam.jsx

@@ -16,10 +16,11 @@ export default class AntiSpam extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.handleDelete = this.handleDelete.bind(this);
         this.handleSave = this.handleSave.bind(this);
         this.alterDomain = this.alterDomain.bind(this);
-        this.domain = DomainStore.getCurrent();
+        this.domain = this.isStoreEnabled ? DomainStore.getCurrent() : this.props.data;
         this.blackList = [];
         this.whiteList = [];
 
@@ -141,7 +142,9 @@ export default class AntiSpam extends React.Component {
                 return reject(error);
             });
         }).then((res) => {
-            DomainStore.setCurrent(res);
+            if (this.isStoreEnabled) {
+                DomainStore.setCurrent(res);
+            }
             returns = res.attrs[key] ? res.attrs[key] : [];
             returns = Array.isArray(returns) ? returns : [returns];
 

src/components/domain/domain_admin_list.jsx

@@ -5,6 +5,7 @@ import React from 'react';
 import sweetAlert from 'sweetalert';
 
 import DomainStore from '../../stores/domain_store.jsx';
+import UserStore from '../../stores/user_store.jsx';
 
 import MessageBar from '../message_bar.jsx';
 import Panel from '../panel.jsx';
@@ -19,15 +20,16 @@ export default class DomainAdminList extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getAdmins = this.getAdmins.bind(this);
         this.handleRemoveAdmin = this.handleRemoveAdmin.bind(this);
         this.onAdminsChange = this.onAdminsChange.bind(this);
+        this.isGlobalAdmin = UserStore.isGlobalAdmin();
         this.state = this.getStateFromStores();
     }
 
     getStateFromStores() {
-        //const admins = DomainStore.getAdmins(this.props.domain);
-        const admins = null;
+        const admins = this.isStoreEnabled ? DomainStore.getAdmins(this.props.domain) : null;
         return {
             admins
         };
@@ -37,7 +39,9 @@ export default class DomainAdminList extends React.Component {
         const domain = this.props.domain;
         domain.getAdmins((err, data) => {
             const admins = data.account || [];
-            DomainStore.setAdmins(domain, admins);
+            if (this.isStoreEnabled) {
+                DomainStore.setAdmins(domain, admins);
+            }
             this.setState({admins});
         });
     }
@@ -78,7 +82,9 @@ export default class DomainAdminList extends React.Component {
                                 return sweetAlert(response);
                             }
 
-                            DomainStore.removeAdmin(admin.id);
+                            if (this.isStoreEnabled) {
+                                DomainStore.removeAdmin(admin.id);
+                            }
                             return sweetAlert(response);
                         }
                     );
@@ -88,7 +94,7 @@ export default class DomainAdminList extends React.Component {
     }
 
     onAdminsChange() {
-        const admins = DomainStore.getAdmins(this.props.domain);
+        const admins = this.isStoreEnabled ? DomainStore.getAdmins(this.props.domain) : null;
         if (!admins) {
             return this.getAdmins();
         }
@@ -107,6 +113,7 @@ export default class DomainAdminList extends React.Component {
         DomainStore.removeAdminsChangeListener(this.onAdminsChange);
     }
     render() {
+        let btnAddNewAdmin = null;
         if (!this.state.admins) {
             return <div/>;
         }
@@ -127,6 +134,7 @@ export default class DomainAdminList extends React.Component {
 
         const domain = this.props.domain;
         const adminRows = this.state.admins.map((a) => {
+            const name = a.attrs.displayName || `${a.attrs.givenName || a.attrs.cn} ${a.attrs.sn}`;
             return (
                 <tr
                     key={`admin-${a.id}`}
@@ -136,35 +144,50 @@ export default class DomainAdminList extends React.Component {
                         {a.name}
                     </td>
                     <td className='user-name text-center'>
-                        {a.attrs.displayName}
+                        {name}
                     </td>
                     <td className='user-type text-center'>
                     </td>
-                    <td className='user-actions text-center'>
-                        <ul className='list-inline list-unstyled'>
-                            <li>
-                                <a
-                                    className='btn btn-default btn-xs'
-                                    onClick={(e) => Utils.handleLink(e, `/mailboxes/${a.id}/edit`, this.props.location)}
-                                >
-                                    {'Editar'}
-                                </a>
-                            </li>
-                            <li>
-                                <a
-                                    className='btn btn-danger btn-xs'
-                                    onClick={(e) => this.handleRemoveAdmin(e, a)}
-                                >
-                                    {'Eliminar'}
-                                </a>
-                            </li>
-                        </ul>
-                    </td>
+                    {this.isGlobalAdmin && (
+                        <td className='user-actions text-center'>
+                            <ul className='list-inline list-unstyled'>
+                                <li>
+                                    <a
+                                        className='btn btn-default btn-xs'
+                                        onClick={(e) => Utils.handleLink(e, `/mailboxes/${a.id}/edit`, this.props.location)}
+                                    >
+                                        {'Editar'}
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        className='btn btn-danger btn-xs'
+                                        onClick={(e) => this.handleRemoveAdmin(e, a)}
+                                    >
+                                        {'Eliminar'}
+                                    </a>
+                                </li>
+                            </ul>
+                        </td>
+                    )}
                 </tr>
             );
         });
 
+        if (this.isGlobalAdmin) {
+            btnAddNewAdmin = (
+                <ToggleModalButton
+                    role='button'
+                    className='btn btn-default'
+                    dialogType={AddAdminModal}
+                    dialogProps={{domain}}
+                >
+                    {'Agregar administrador'}
+                </ToggleModalButton>
+            );
+        }
         let adminContent;
+
         if (adminRows.length > 0) {
             adminContent = (
                 <div className='table-responsive'>
@@ -179,21 +202,16 @@ export default class DomainAdminList extends React.Component {
                             <th>{'email'}</th>
                             <th className='text-center'>{'Nombre'}</th>
                             <th></th>
-                            <th className='text-center'>{'Acciones'}</th>
+                            {this.isGlobalAdmin && (
+                                <th className='text-center'>{'Acciones'}</th>
+                            )}
                         </tr>
                         </thead>
                         <tbody>
                         {adminRows}
                         </tbody>
                     </table>
-                    <ToggleModalButton
-                        role='button'
-                        className='btn btn-default'
-                        dialogType={AddAdminModal}
-                        dialogProps={{domain}}
-                    >
-                        {'Agregar administrador'}
-                    </ToggleModalButton>
+                    {btnAddNewAdmin}
                 </div>
             );
         } else {

src/components/domain/domain_details.jsx

@@ -3,6 +3,7 @@
 
 import $ from 'jquery';
 import React from 'react';
+import {browserHistory} from 'react-router';
 
 import MessageBar from '../message_bar.jsx';
 import PageInfo from '../page_info.jsx';
@@ -23,18 +24,26 @@ import DomainStore from '../../stores/domain_store.jsx';
 import * as Client from '../../utils/client.jsx';
 import * as GlobalActions from '../../action_creators/global_actions.jsx';
 
-//import Constants from '../../utils/constants.jsx';
+import Constants from '../../utils/constants.jsx';
+const QueryOptions = Constants.QueryOptions;
 
 export default class DomainDetails extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getDomain = this.getDomain.bind(this);
         this.showMessage = this.showMessage.bind(this);
+        this.handleClickOnTab = this.handleClickOnTab.bind(this);
 
         this.state = {};
     }
 
+    handleClickOnTab(tab) {
+        const path = this.props.location.pathname;
+        browserHistory.push(`${path}?tab=${tab}`);
+    }
+
     showMessage(attrs) {
         this.setState({
             error: {
@@ -45,8 +54,7 @@ export default class DomainDetails extends React.Component {
     }
 
     getDomain() {
-        //const domain = DomainStore.getCurrent();
-        const domain = null;
+        const domain = this.isStoreEnabled ? DomainStore.getCurrent() : null;
         const states = {};
 
         if (domain && domain.id === this.props.params.id) {
@@ -57,13 +65,15 @@ export default class DomainDetails extends React.Component {
             this.setState(states);
 
             Client.getZone(domain.name, (zone) => {
-                DomainStore.setZoneDNS(zone);
+                states.zone = this.isStoreEnabled ? DomainStore.setZoneDNS(zone) : zone;
 
                 this.setState(states);
 
                 GlobalActions.emitEndLoading();
             }, () => {
-                DomainStore.setZoneDNS(null);
+                if (this.isStoreEnabled) {
+                    DomainStore.setZoneDNS(null);
+                }
 
                 this.setState(states);
 
@@ -73,11 +83,13 @@ export default class DomainDetails extends React.Component {
             Client.getDomain(
                 this.props.params.id,
                 (data) => {
-                    DomainStore.setCurrent(data);
+                    if (this.isStoreEnabled) {
+                        DomainStore.setCurrent(data);
+                    }
                     states.domain = data;
 
                     Client.getZone(data.name, (zone) => {
-                        DomainStore.setZoneDNS(zone);
+                        states.zone = this.isStoreEnabled ? DomainStore.setZoneDNS(zone) : zone;
 
                         this.setState(states);
 
@@ -105,6 +117,17 @@ export default class DomainDetails extends React.Component {
             this.props.params.id = nextProps.params.id;
             this.getDomain();
         }
+
+        const isPaging = this.props.location.query.page !== nextProps.location.query.page;
+
+        if (isPaging) {
+            const page = parseInt(nextProps.location.query.page, 10) || 1;
+
+            this.setState({
+                page,
+                offset: ((page - 1) * QueryOptions.DEFAULT_LIMIT)
+            });
+        }
     }
 
     componentDidMount() {
@@ -189,6 +212,7 @@ export default class DomainDetails extends React.Component {
                 <ZonaDNS
                     domain={domain}
                     location={this.props.location}
+                    zone={this.state.zone}
                 />
             );
 
@@ -214,6 +238,7 @@ export default class DomainDetails extends React.Component {
                     tabNames={tabNames}
                     tabs={tabs}
                     location={this.props.location}
+                    onClick={this.handleClickOnTab}
                 />
             );
 

src/components/domain/domain_distribution_list.jsx

@@ -12,36 +12,56 @@ import AddDistributionListModal from './add_distribution_list_modal.jsx';
 
 import * as Client from '../../utils/client.jsx';
 import * as Utils from '../../utils/utils.jsx';
+import Constants from '../../utils/constants.jsx';
+const defaultLimit = Constants.QueryOptions.DEFAULT_LIMIT;
+import Pagination from '../pagination.jsx';
 
 export default class DomainDistributionList extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getLists = this.getLists.bind(this);
         this.handleRemoveAdmin = this.handleRemoveAdmin.bind(this);
         this.onListsChange = this.onListsChange.bind(this);
-        this.state = this.getStateFromStores();
+        this.handleSearchByName = this.handleSearchByName.bind(this);
+        this.listscache = null;
+
+        const page = parseInt(this.props.location.query.page, 10) || 1;
+        this.state = {
+            lists: this.getStateFromStores(),
+            page,
+            offset: ((page - 1) * defaultLimit)
+        };
     }
     getStateFromStores() {
-        const lists = DomainStore.getDistributionLists(this.props.domain);
+        const lists = this.isStoreEnabled ? DomainStore.getDistributionLists(this.props.domain) : null;
 
-        return {
-            lists
-        };
+        return lists;
     }
     getLists() {
         const domain = this.props.domain;
         domain.getAllDistributionLists(
             (err, lists) => {
-                DomainStore.setDistibutionLists(domain, lists);
+                if (this.isStoreEnabled) {
+                    DomainStore.setDistibutionLists(domain, lists);
+                }
+                this.listscache = lists;
                 this.setState({lists});
             }
         );
     }
+    componentWillReceiveProps(nextProps) {
+        const page = parseInt(nextProps.location.query.page, 10) || 1;
+        this.setState({
+            page,
+            offset: ((page - 1) * defaultLimit)
+        });
+    }
     onListsChange() {
-        const lists = DomainStore.getDistributionLists(this.props.domain);
+        const lists = this.isStoreEnabled ? DomainStore.getDistributionLists(this.props.domain) : null;
         if (!lists) {
-            return this.getAdmins();
+            return this.getLists();
         }
 
         return this.setState({lists});
@@ -68,7 +88,11 @@ export default class DomainDistributionList extends React.Component {
                     Client.removeDistributionList(
                         list.id,
                         () => {
-                            DomainStore.removeDistributionList(list.id);
+                            if (this.isStoreEnabled) {
+                                DomainStore.removeDistributionList(list.id);
+                            } else {
+                                DomainStore.emitDistributionListsChange();
+                            }
 
                             return sweetAlert(response);
                         },
@@ -85,6 +109,22 @@ export default class DomainDistributionList extends React.Component {
             }
         );
     }
+    handleSearchByName(e) {
+        const value = e.target.value.trim();
+
+        if (!this.listscache) {
+            return null;
+        }
+
+        const newLists = this.listscache.filter((dl) => {
+            const name = dl.name || dl.id;
+            return name.match(value);
+        });
+
+        this.setState({
+            lists: newLists
+        });
+    }
     componentDidMount() {
         DomainStore.addDistributionListsChangeListener(this.onListsChange);
 
@@ -96,8 +136,18 @@ export default class DomainDistributionList extends React.Component {
         DomainStore.removeDistributionListsChangeListener(this.onListsChange);
     }
     render() {
+        let pagination = null;
+        let filter = null;
         if (!this.state.lists) {
-            return <div/>;
+            return (
+                <div
+                    className='text-center'
+                    key={'dl-loading'}
+                >
+                    <i className='fa fa-spinner fa-spin fa-4x fa-fw'></i>
+                    <p>{'Cargando Listas de Distribución...'}</p>
+                </div>
+            );
         }
 
         const domain = this.props.domain;
@@ -116,7 +166,21 @@ export default class DomainDistributionList extends React.Component {
             )
         }];
 
-        const listsRows = this.state.lists.map((dl) => {
+        let lists = this.state.lists;
+        if (lists.length > defaultLimit) {
+            const totalPages = Math.ceil(lists.length / defaultLimit);
+            lists = lists.slice(this.state.offset, this.state.page * defaultLimit);
+            pagination = (
+                <Pagination
+                    key='DlPagination'
+                    url={this.props.location.pathname}
+                    currentPage={this.state.page}
+                    totalPages={totalPages}
+                />
+            );
+        }
+
+        const listsRows = lists.map((dl) => {
             return (
                 <tr
                     key={`dl-${dl.id}`}
@@ -151,6 +215,29 @@ export default class DomainDistributionList extends React.Component {
 
         let panelBody;
         if (listsRows.length > 0) {
+            filter = (
+                <div className='col-xs-12'>
+                    <div className='input-group'>
+                        <span className='input-group-btn'>
+                            <button
+                                className='btn btn-primary'
+                                type='button'
+                            >
+                                Buscar
+                            </button>
+                        </span>
+                        <input
+                            type='text'
+                            className='form-control'
+                            placeholder='Búsqueda por nombre'
+                            onKeyUp={(e) => {
+                                this.handleSearchByName(e);
+                            }}
+                        />
+                    </div>
+                </div>
+            );
+
             panelBody = (
                 <div className='table-responsive'>
                     <table
@@ -169,6 +256,7 @@ export default class DomainDistributionList extends React.Component {
                         {listsRows}
                         </tbody>
                     </table>
+                    {pagination}
                 </div>
             );
         } else {
@@ -185,6 +273,7 @@ export default class DomainDistributionList extends React.Component {
             <Panel
                 hasHeader={true}
                 btnsHeader={headerButtons}
+                filter={filter}
                 children={panelBody}
             />
         );

src/components/domain/domain_general_info.jsx

@@ -19,6 +19,7 @@ export default class DomainGeneralInfo extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getMXRecord = this.getMXRecord.bind(this);
         this.renovationDate = this.renovationDate.bind(this);
         this.getCompany = this.getCompany.bind(this);
@@ -50,7 +51,7 @@ export default class DomainGeneralInfo extends React.Component {
         });
     }
     getCompany(id) {
-        const company = CompanyStore.getCompanyById(id);
+        const company = this.isStoreEnabled ? CompanyStore.getCompanyById(id) : null;
         if (company) {
             this.setState({
                 company: company.name

src/components/domain/domains.jsx

@@ -26,6 +26,7 @@ export default class Domains extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getDomains = this.getDomains.bind(this);
 
         const page = parseInt(this.props.location.query.page, 10) || 1;
@@ -45,7 +46,7 @@ export default class Domains extends React.Component {
             maxResults: window.manager_config.maxResultOnRequestZimbra
         };
 
-        /*if (DomainStore.getDomains()) {
+        if (this.isStoreEnabled && DomainStore.getDomains()) {
             const data = DomainStore.getDomains();
 
             GlobalActions.emitEndLoading();
@@ -54,7 +55,7 @@ export default class Domains extends React.Component {
                 data,
                 loading: false
             });
-        }*/
+        }
 
         const attrneeded = Utils.getAttrsBySectionFromConfig('domains');
         attrs.attrs = attrneeded;

src/components/domain/edit_domain.jsx

@@ -21,6 +21,7 @@ export default class EditDomain extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getDomain = this.getDomain.bind(this);
         this.getCompanies = this.getCompanies.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
@@ -33,9 +34,8 @@ export default class EditDomain extends React.Component {
     }
 
     getDomain() {
-        //const domain = DomainStore.getCurrent();
+        const domain = this.isStoreEnabled ? DomainStore.getCurrent() : null;
         const domainId = this.props.params.id;
-        const domain = null;
 
         if (domain && domain.id === domainId) {
             return this.getCompanies(domain);
@@ -54,7 +54,7 @@ export default class EditDomain extends React.Component {
     }
 
     getCompanies(domain) {
-        const companies = CompanyStore.getCompanies();
+        const companies = this.isStoreEnabled ? CompanyStore.getCompanies() : null;
 
         if (companies) {
             this.setState({
@@ -115,8 +115,10 @@ export default class EditDomain extends React.Component {
             Client.modifyDomain(
                 domain,
                 (data) => {
-                    CompanyStore.modifyDomain(prevCompanyId, data);
-                    DomainStore.setCurrent(data);
+                    if (this.isStoreEnabled) {
+                        CompanyStore.modifyDomain(prevCompanyId, data);
+                        DomainStore.setCurrent(data);
+                    }
                     browserHistory.push(`/domains/${data.id}`);
                 },
                 (error) => {

src/components/domain/multiform/create_domain_form.jsx

@@ -17,6 +17,7 @@ export default class CreateDomainForm extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.planSize = this.planSize.bind(this);
         this.getCompanies = this.getCompanies.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
@@ -40,7 +41,7 @@ export default class CreateDomainForm extends React.Component {
         const companyId = this.props.params.id;
         const companies = CompanyStore.getCompanies();
 
-        if (companies) {
+        if (this.isStoreEnabled && companies) {
             this.setState({
                 plans: Utils.getEnabledPlansByCos(ZimbraStore.getAllCos()),
                 companies,
@@ -114,8 +115,10 @@ export default class CreateDomainForm extends React.Component {
             Client.createDomain(
                 domain,
                 (data) => {
-                    CompanyStore.addDomain(businessCategory, data);
-                    DomainStore.setCurrent(data);
+                    if (this.isStoreEnabled) {
+                        CompanyStore.addDomain(businessCategory, data);
+                        DomainStore.setCurrent(data);
+                    }
 
                     if (this.props.state.total === this.props.state.step) {
                         browserHistory.push(`/domains/${data.id}`);

src/components/mailbox/confirm_delete_modal.jsx

@@ -15,6 +15,7 @@ export default class ConfirmDeleteModal extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.handleDelete = this.handleDelete.bind(this);
         this.handleKeyUp = this.handleKeyUp.bind(this);
         this.redirect = this.redirect.bind(this);
@@ -47,7 +48,9 @@ export default class ConfirmDeleteModal extends React.Component {
                 }
             );
         }).then(() => {
-            MailboxStore.removeAccount(this.props.data);
+            if (this.isStoreEnabled) {
+                MailboxStore.removeAccount(this.props.data);
+            }
             this.setState(
                 {
                     alert: true,

src/components/mailbox/create_mailbox.jsx

@@ -84,6 +84,7 @@ export default class CreateMailBox extends React.Component {
             const attrs = {
                 givenName: this.refs.givenName.value,
                 sn: this.refs.sn.value,
+                displayName: `${this.refs.givenName.value} ${this.refs.sn.value}`,
                 description: this.refs.description.value,
                 zimbraCOSId: this.refs.zimbraCOSId.value,
                 zimbraAccountStatus: this.refs.zimbraAccountStatus.value,

src/components/mailbox/edit_mailbox.jsx

@@ -31,6 +31,7 @@ export default class EditMailBox extends React.Component {
         this.fillForm = this.fillForm.bind(this);
         this.showMessage = this.showMessage.bind(this);
         this.handleRenameAccount = this.handleRenameAccount.bind(this);
+        this.editUrlFromParams = this.props.params.domain_id ? `/domains/${this.props.params.domain_id}/mailboxes/` : '/mailboxes/';
 
         this.state = {};
     }
@@ -82,10 +83,11 @@ export default class EditMailBox extends React.Component {
                     }).then(() => {
                         MailboxStore.removeAccount(account);
                         response.text = 'Será redireccionado a Casillas.';
+                        this.editUrlFromParams = this.props.params.domain_id ? `/domains/${this.props.params.domain_id}/mailboxes/` : '/mailboxes/';
                         return sweetAlert(
                             response,
                             () => {
-                                Utils.handleLink(event, '/mailboxes/', this.props.location);
+                                Utils.handleLink(event, `${this.editUrlFromParams}`, this.props.location);
                             }
                         );
                     }).catch((error) => {
@@ -223,7 +225,8 @@ export default class EditMailBox extends React.Component {
                 sn: this.refs.sn.value,
                 description: this.refs.description.value,
                 zimbraCOSId: this.refs.zimbraCOSId.value,
-                zimbraAccountStatus: this.refs.zimbraAccountStatus.value
+                zimbraAccountStatus: this.refs.zimbraAccountStatus.value,
+                displayName: `${this.refs.givenName.value} ${this.refs.sn.value}`
             };
 
             GlobalActions.emitStartLoading();
@@ -643,7 +646,7 @@ export default class EditMailBox extends React.Component {
                                 {
                                     className: 'btn btn-default action-button',
                                     onClick: (e) => {
-                                        Utils.handleLink(e, '/mailboxes', this.props.location);
+                                        Utils.handleLink(e, `${this.editUrlFromParams}${this.props.params.id}`, this.props.location);
                                     }
                                 }
                             }
@@ -661,7 +664,7 @@ export default class EditMailBox extends React.Component {
                 props: {
                     className: 'btn btn-default btn-xs action-button',
                     onClick: (e) => {
-                        Utils.handleLink(e, `/mailboxes/${this.props.params.id}`, this.props.location);
+                        Utils.handleLink(e, `${this.editUrlFromParams}${this.props.params.id}`, this.props.location);
                     }
                 }
             },

src/components/mailbox/info_general_mailbox.jsx

@@ -57,7 +57,7 @@ export default class BlockGeneralInfoMailbox extends React.Component {
         if (this.state.hasDomain) {
             const data = this.props.data;
             const attrs = this.props.data.attrs;
-            const owner = (!attrs.givenName || !attrs.sn) ? null : attrs.givenName + ' ' + attrs.sn;
+            const owner = attrs.displayName ? attrs.displayName : `${attrs.givenName || attrs.cn} ${attrs.sn}`;
             const mail = data.name;
 
             //properties

src/components/mailbox/mailbox.jsx

@@ -35,11 +35,13 @@ export default class Mailboxes extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.showMessage = this.showMessage.bind(this);
         this.refreshAllAccounts = this.refreshAllAccounts.bind(this);
         this.handleChangeFilter = this.handleChangeFilter.bind(this);
         this.handleTabChanged = this.handleTabChanged.bind(this);
         this.makeFilter = this.makeFilter.bind(this);
+        this.c = 0;
 
         const page = parseInt(this.props.location.query.page, 10) || 1;
         this.mailboxes = null;
@@ -124,8 +126,10 @@ export default class Mailboxes extends React.Component {
 
     handleExportAsCSV(e) {
         e.preventDefault();
-        if (MailboxStore.getMailboxByDomainId(this.domainId)) {
-            const accounts = MailboxStore.getMailboxByDomainId(this.domainId);
+        const mailboxesByDomainId = this.isStoreEnabled ? MailboxStore.getMailboxByDomainId(this.domainId) : null;
+        const accountsFromState = this.state.accounts;
+        if (mailboxesByDomainId || accountsFromState) {
+            const accounts = mailboxesByDomainId || accountsFromState;
             const title = `Casillas de ${accounts.account[0].domain}`;
             return Utils.exportAsCSV(accounts.account, 'domain', title, true);
         }
@@ -169,7 +173,7 @@ export default class Mailboxes extends React.Component {
     domainInfo(domainId) {
         return new Promise(
             (resolve, reject) => {
-                const domain = DomainStore.getCurrent();
+                const domain = this.isStoreEnabled ? DomainStore.getCurrent() : null;
                 if (domain && domainId === domain.id) {
                     return resolve();
                 }
@@ -177,11 +181,13 @@ export default class Mailboxes extends React.Component {
                 return Client.getDomain(
                     domainId,
                     (data) => {
-                        DomainStore.setCurrent(data);
-                        return resolve();
+                        if (this.isStoreEnabled) {
+                            DomainStore.setCurrent(data);
+                        }
+                        return resolve(data);
                     },
-                    () => {
-                        return reject();
+                    (error) => {
+                        return reject(error);
                     }
                 );
             }
@@ -208,7 +214,7 @@ export default class Mailboxes extends React.Component {
 
         new Promise((resolve, reject) => {
             if (domainName) {
-                const hasMailboxForDomain = MailboxStore.getMailboxByDomainId(this.domainId);
+                const hasMailboxForDomain = this.isStoreEnabled ? MailboxStore.getMailboxByDomainId(this.domainId) : null;
 
                 if (hasMailboxForDomain) {
                     return resolve(hasMailboxForDomain);
@@ -216,7 +222,13 @@ export default class Mailboxes extends React.Component {
 
                 return Client.getAllAccounts(attrs, (success) => {
                     const data = Utils.extractLockOuts(success);
-                    MailboxStore.setMailboxesByDomain(this.domainId, data);
+                    if (this.isStoreEnabled) {
+                        MailboxStore.setMailboxesByDomain(this.domainId, data);
+                    } else {
+                        this.setState({
+                            accounts: data
+                        });
+                    }
 
                     return resolve(success);
                 }, (error) => {
@@ -224,13 +236,16 @@ export default class Mailboxes extends React.Component {
                 });
             }
 
-            if (MailboxStore.hasMailboxes()) {
+            const hasMailboxes = this.isStoreEnabled ? MailboxStore.hasMailboxes() : null;
+            if (hasMailboxes) {
                 return resolve(MailboxStore.getMailboxes());
             }
 
             return Client.getAllAccounts(attrs, (success) => {
                 const data = Utils.extractLockOuts(success);
-                MailboxStore.setMailboxes(data);
+                if (this.isStoreEnabled) {
+                    MailboxStore.setMailboxes(data);
+                }
 
                 return resolve(data);
             }, (error) => {
@@ -285,8 +300,8 @@ export default class Mailboxes extends React.Component {
 
     getAllMailboxes(domainId) {
         if (domainId) {
-            return this.domainInfo(domainId).then(() => {
-                const domain = DomainStore.getCurrent();
+            return this.domainInfo(domainId).then((data) => {
+                const domain = this.isStoreEnabled ? DomainStore.getCurrent() : data;
                 this.getAccounts(domain.name, window.manager_config.maxResultOnRequestZimbra);
             });
         }
@@ -295,7 +310,7 @@ export default class Mailboxes extends React.Component {
     }
 
     refreshAllAccounts() {
-        const mailboxes = MailboxStore.getMailboxes();
+        const mailboxes = this.isStoreEnabled ? MailboxStore.getMailboxes() : null;
         const tables = this.buildTableFromData(mailboxes, ['Todas', 'Bloqueadas']);
 
         if (tables.lockedAlert) {
@@ -343,13 +358,9 @@ export default class Mailboxes extends React.Component {
             tipo = 'Desconocido';
         }
 
-        if (attrs.displayName) {
-            displayName = attrs.displayName.trim();
-        } else if (attrs.cn || attrs.sn) {
-            const cn = attrs.cn || '';
-            const sn = attrs.sn || '';
-            displayName = `${cn.trim()} ${sn.trim()}`;
-        }
+        displayName = attrs.displayName || `${attrs.givenName || attrs.cn} ${attrs.sn}`;
+
+        const editUrlFromParams = this.props.params.domain_id ? `/domains/${this.props.params.domain_id}/mailboxes/` : '/mailboxes/';
 
         return (
             <tr
@@ -363,7 +374,7 @@ export default class Mailboxes extends React.Component {
                         btnAttrs={
                             {
                                 className: 'mailbox-link',
-                                onClick: (e) => Utils.handleLink(e, 'mailboxes/' + id)
+                                onClick: (e) => Utils.handleLink(e, `${editUrlFromParams}${id}`)
                             }
                         }
                     >
@@ -384,7 +395,7 @@ export default class Mailboxes extends React.Component {
                         btnAttrs={
                             {
                                 className: 'btn btn-xs btn-default',
-                                onClick: (e) => Utils.handleLink(e, '/mailboxes/' + id + '/edit')
+                                onClick: (e) => Utils.handleLink(e, `${editUrlFromParams}${id}/edit`)
                             }
                         }
                     >
@@ -664,7 +675,10 @@ export default class Mailboxes extends React.Component {
 
         if (this.state.loading) {
             content = (
-                <div className='text-center'>
+                <div
+                    className='text-center'
+                    key={'mailboxes-loading'}
+                >
                     <i className='fa fa-spinner fa-spin fa-4x fa-fw'></i>
                     <p>{'Cargando Casillas...'}</p>
                 </div>

src/components/mailbox/mailbox_details.jsx

@@ -31,6 +31,7 @@ export default class MailboxDetails extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getMailbox = this.getMailbox.bind(this);
         this.handleEdit = this.handleEdit.bind(this);
         this.showMessage = this.showMessage.bind(this);
@@ -84,7 +85,8 @@ export default class MailboxDetails extends React.Component {
     }
 
     getMailbox(id) {
-        if (MailboxStore.hasMailboxes()) {
+        const hasMailboxes = this.isStoreEnabled ? MailboxStore.hasMailboxes() : null;
+        if (hasMailboxes) {
             const account = MailboxStore.getMailboxById(id);
             MailboxStore.setCurrent(account);
             let items = account.attrs.zimbraMailAlias;
@@ -122,6 +124,7 @@ export default class MailboxDetails extends React.Component {
                 });
             }).then((result) => {
                 MailboxStore.setCurrent(result);
+
                 let items = result.attrs.zimbraMailAlias;
 
                 if (items) {
@@ -318,12 +321,14 @@ export default class MailboxDetails extends React.Component {
                 />
             );
 
+            const editUrlFromParams = this.props.params.domain_id ? `/domains/${this.props.params.domain_id}/mailboxes/` : '/mailboxes/';
+
             btnsGeneralInfo = [
                 {
                     props: {
                         className: 'btn btn-xs btn-default action-info-btns',
                         onClick: (e) => {
-                            this.handleEdit(e, `/mailboxes/${this.state.data.id}/edit`, this.props.location);
+                            this.handleEdit(e, `${editUrlFromParams}${this.state.data.id}/edit`, this.props.location);
                         }
                     },
                     label: 'Editar'

src/components/panel_actions.jsx

@@ -55,6 +55,10 @@ export default class PanelActions extends React.Component {
     onSearch() {
         const search = this.refs.search.value;
 
+        if (!this.props.data) {
+            return null;
+        }
+
         const arrayFiltered = this.props.data.filter((strArray) => {
             if (strArray.match(search)) {
                 return strArray;
@@ -209,11 +213,10 @@ export default class PanelActions extends React.Component {
     handleChangeLimit() {
         const limit = this.refs.countItems.value;
         this.pagination.setLimit(limit);
-        this.pagination.reset();
 
         const states = {};
 
-        states['items' + this.props.name] = this.pagination.init();
+        states['items' + this.props.name] = this.pagination.reset();
         states['pagination' + this.props.name] = this.pagination.getResults();
 
         this.setState(states);

src/components/panel_actions_allows.jsx

@@ -55,6 +55,10 @@ export default class PanelActions extends React.Component {
     onSearch() {
         const search = this.refs.search.value;
 
+        if (!this.props.data) {
+            return null;
+        }
+
         const arrayFiltered = this.props.data.filter((strArray) => {
             const strToTest = typeof strArray.name === 'string' ? strArray.name : strArray.id;
             return strToTest.match(search);

src/config/config.json

 {
     "debug": true,
+    "enableStores" : false,
     "zimbraUrl": "http://zimbra.zboxapp.dev:9081/zimbra_proxy/service/admin/soap",
     "zimbraProxy": "https://192.168.1.8:7071",
     "dnsApiUrl": "http://zimbra.zboxapp.dev:3000",
     "webMailUrl": "https://192.168.1.8:8443",
     "dns": {
         "url": "http://zimbra.zboxapp.dev:9081/powerdns_proxy",
-        "token": "otto"
+        "token": "otto",
+        "inmutable": ["mx", "soa", "ns", "spf"]
     },
     "maxResultOnRequestZimbra": 3000,
     "autoincrementOnFailRequestZimbra": 500,

src/index.jsx

@@ -148,6 +148,14 @@ function renderRootComponent() {
                             path='domains/:domain_id/mailboxes'
                             component={Mailboxes}
                         />
+                        <Route
+                            path='domains/:domain_id/mailboxes/:id'
+                            component={MailboxDetails}
+                        />
+                        <Route
+                            path='domains/:domain_id/mailboxes/:id/edit'
+                            component={EditMailBox}
+                        />
                         <Route
                             path='domains/:domain_id/distribution_lists/:id'
                             component={DistributionLists}

src/sass/components/_panels.scss

@@ -21,6 +21,10 @@
     font-weight: 600;
     padding: 10px 4px;
     transition: all .3s;
+
+    .heading-buttons {
+      max-width: 50%;
+    }
   }
 
   .hbuilt {

src/sass/layout/_layout.scss

@@ -13,11 +13,30 @@ html {
 body {
   background-color: $white;
   color: $color-text;
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Open Sans", "Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 13px;
   height: 100%;
   margin: 0;
   padding: 0;
+
+  &::after {
+    background: $bg-beta;
+    color: $white;
+    content: 'Beta';
+    font-family: sans-serif;
+    font-size: 13px;
+    font-weight: bold;
+    height: 25px;
+    left: -20px;
+    line-height: 27px;
+    position: fixed;
+    text-align: center;
+    text-shadow: 0 3px 1px $black;
+    text-transform: uppercase;
+    top: 7px;
+    transform: rotate(-45deg);
+    width: 80px;
+  }
 }
 
 #header {

src/sass/utils/_variables.scss

@@ -122,3 +122,6 @@ $sweet-green:   #a5dc86;
 $keyframe-bg-color: #f8d486;
 $keyframe-bg-color2: #f8bb86;
 $la-dark-color: #333;
+
+//beta style
+$bg-beta: #ee8e4a;