Merge pull request #227 from ZBoxApp/issues_beta_v1

fix massixe setter message vacation, alias add and remove, edit mailb…

.vagrant/machines/default/virtualbox/action_set_name

-1466524663
+1466617142
\ No newline at end of file

path.json

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

src/components/domain/multiple_task_modal.jsx

@@ -17,26 +17,50 @@ export default class MultipleTaskModal extends React.Component {
         this.onSubmit = this.onSubmit.bind(this);
         this.getOwnAccounts = this.getOwnAccounts.bind(this);
         this.handleChangeDate = this.handleChangeDate.bind(this);
+        this.handleBlurTextAreaMessage = this.handleBlurTextAreaMessage.bind(this);
+        this.handleEnabledReplay = this.handleEnabledReplay.bind(this);
+
         this.allAccounts = [];
         this.loop = 0;
         this.range = 200;
         this.initialDate = Utils.setInitialDate();
 
-        this.dateStart = this.initialDate.formatted;
-        this.dateEnd = this.initialDate.formatted;
-        this.timestampStart = this.initialDate.timestamp;
-        this.timestampEnd = this.initialDate.timestamp;
-
         this.state = {
-            loaded: false
+            loaded: false,
+            zimbraPrefOutOfOfficeFromDate: this.initialDate.timestamp,
+            zimbraPrefOutOfOfficeUntilDate: this.initialDate.timestamp,
+            zimbraPrefOutOfOfficeReplyEnabled: false,
+            zimbraPrefOutOfOfficeReply: '',
+            zimbraPrefOutOfOfficeFromDateInput: this.initialDate.formatted,
+            zimbraPrefOutOfOfficeUntilDateInput: this.initialDate.formatted
         };
     }
 
     handleChangeDate(x, from) {
-        const ref = this.refs[from];
         const timestamp = Utils.getInitialDateFromTimestamp(x);
+        const date = Utils.timestampToDate(timestamp);
+        const states = {};
+
+        states[from] = timestamp;
+        states[`${from}Input`] = date;
+
+        this.setState(states);
+    }
+
+    handleBlurTextAreaMessage(e) {
+        const zimbraPrefOutOfOfficeReply = e.target.value.trim();
+
+        if (zimbraPrefOutOfOfficeReply.length > 0) {
+            this.setState({
+                zimbraPrefOutOfOfficeReply
+            });
+        }
+    }
 
-        ref.value = timestamp;
+    handleEnabledReplay(e) {
+        this.setState({
+            zimbraPrefOutOfOfficeReplyEnabled: e.target.checked
+        });
     }
 
     onSubmit() {
@@ -44,13 +68,17 @@ export default class MultipleTaskModal extends React.Component {
         const domain = this.props.data;
         const total = accounts.length;
         const collection = [];
-        const refs = this.refs;
         let message = null;
         let err = false;
-        const isEnabled = refs.zimbraPrefOutOfOfficeReplyEnabled.checked;
+        const isEnabled = this.state.zimbraPrefOutOfOfficeReplyEnabled;
+        const responseText = this.state.zimbraPrefOutOfOfficeReply;
 
-        const start = refs.zimbraPrefOutOfOfficeFromDate.value;
-        const end = refs.zimbraPrefOutOfOfficeUntilDate.value;
+        const start = this.state.zimbraPrefOutOfOfficeFromDate;
+        const end = this.state.zimbraPrefOutOfOfficeUntilDate;
+
+        if (this.props.show) {
+            this.props.onHide();
+        }
 
         if ((start > end) && isEnabled) {
             message = 'La fecha en la que termina su respuesta automática, debe ser mayor que en la que comienza.';
@@ -83,11 +111,11 @@ export default class MultipleTaskModal extends React.Component {
         const attrs = {};
 
         if (isEnabled) {
-            const formatedStart = document.getElementById('zimbraPrefOutOfOfficeFromDate').value.split('/').reverse().join('') + '000000Z';
-            const formatedEnd = document.getElementById('zimbraPrefOutOfOfficeUntilDate').value.split('/').reverse().join('') + '000000Z';
+            const formatedStart = this.state.zimbraPrefOutOfOfficeFromDateInput.split('/').reverse().join('') + '000000Z';
+            const formatedEnd = this.state.zimbraPrefOutOfOfficeUntilDateInput.split('/').reverse().join('') + '000000Z';
 
             attrs.zimbraPrefOutOfOfficeReplyEnabled = isEnabled.toString().toUpperCase();
-            attrs.zimbraPrefOutOfOfficeReply = refs.zimbraPrefOutOfOfficeReply.value;
+            attrs.zimbraPrefOutOfOfficeReply = responseText;
             attrs.zimbraPrefOutOfOfficeFromDate = formatedStart;
             attrs.zimbraPrefOutOfOfficeUntilDate = formatedEnd;
         } else {
@@ -122,6 +150,7 @@ export default class MultipleTaskModal extends React.Component {
                 return true;
             }
 
+            this.loop++;
             setTimeout(() => {
                 this.onSubmit();
             }, 200);
@@ -203,6 +232,7 @@ export default class MultipleTaskModal extends React.Component {
         let content = null;
         let messageLoading = 'Cargando...';
         let labelError = null;
+        const {zimbraPrefOutOfOfficeFromDate, zimbraPrefOutOfOfficeUntilDate, zimbraPrefOutOfOfficeReplyEnabled, zimbraPrefOutOfOfficeFromDateInput, zimbraPrefOutOfOfficeUntilDateInput} = this.state;
 
         if (this.state.loading) {
             const message = this.state.messageLoading;
@@ -232,7 +262,8 @@ export default class MultipleTaskModal extends React.Component {
                                     <input
                                         type='checkbox'
                                         className='pretty'
-                                        ref='zimbraPrefOutOfOfficeReplyEnabled'
+                                        defultChecked={zimbraPrefOutOfOfficeReplyEnabled}
+                                        onChange={this.handleEnabledReplay}
                                     />
                                     <span></span>
                                 </div>
@@ -257,13 +288,12 @@ export default class MultipleTaskModal extends React.Component {
                                 onChange={(x) => {
                                     this.handleChangeDate(x, 'zimbraPrefOutOfOfficeFromDate');
                                 }}
-                                defaultText={this.dateStart}
+                                defaultText={zimbraPrefOutOfOfficeFromDateInput}
                                 mode={'date'}
                             />
                             <input
                                 type='hidden'
-                                ref='zimbraPrefOutOfOfficeFromDate'
-                                value={this.timestampStart}
+                                value={zimbraPrefOutOfOfficeFromDate}
                             />
                         </div>
                     </div>
@@ -282,7 +312,7 @@ export default class MultipleTaskModal extends React.Component {
                                         readOnly: 'readOnly'
                                     }
                                 }
-                                defaultText={this.dateEnd}
+                                defaultText={zimbraPrefOutOfOfficeUntilDateInput}
                                 onChange={(x) => {
                                     this.handleChangeDate(x, 'zimbraPrefOutOfOfficeUntilDate');
                                 }}
@@ -290,8 +320,7 @@ export default class MultipleTaskModal extends React.Component {
                             />
                             <input
                                 type='hidden'
-                                ref='zimbraPrefOutOfOfficeUntilDate'
-                                value={this.timestampEnd}
+                                value={zimbraPrefOutOfOfficeUntilDate}
                             />
                         </div>
                     </div>
@@ -307,7 +336,7 @@ export default class MultipleTaskModal extends React.Component {
                                 id='responseBox'
                                 className='form-control'
                                 rows='4'
-                                        ref='zimbraPrefOutOfOfficeReply'
+                                onBlur={this.handleBlurTextAreaMessage}
                             >
                             </textarea>
                         </div>

src/components/import_massive_modal.jsx

@@ -106,19 +106,19 @@ export default class ImportMassiveModal extends React.Component {
         return null;
     }
 
-    onChangeColumn(e, option, key) {
+    onChangeColumn(e, current, selected, key) {
         const parent = e.target.parentNode;
+        Reflect.deleteProperty(this.disabled, current);
 
-        if (option.restart) {
+        if (selected.restart) {
             parent.classList.remove('ok-option');
             parent.classList.add('missing-option');
-            Reflect.deleteProperty(this.disabled, option.restart);
         }
 
-        if (option && !option.restart) {
+        if (selected && !selected.restart) {
             parent.classList.remove('missing-option');
             parent.classList.add('ok-option');
-            this.disabled[option] = {
+            this.disabled[selected] = {
                 col: key
             };
         }
@@ -423,8 +423,8 @@ export default class ImportMassiveModal extends React.Component {
                                         className: 'form-control'
                                     }}
                                     id={key}
-                                    onSelected={(e, option, id) => {
-                                        this.onChangeColumn(e, option, id);
+                                    onSelected={(e, current, selected, id) => {
+                                        this.onChangeColumn(e, current, selected, id);
                                     }}
                                     disabledOptions={this.disabled}
                                     selected={selected}

src/components/mailbox/create_mailbox.jsx

@@ -58,18 +58,10 @@ export default class CreateMailBox extends React.Component {
         const parent = document.getElementById('add-mailbox');
 
         if (parent) {
-            this.addEventListenerFixed(parent, 'blur', this.getEnableAccountsFromDomain);
+            Utils.addEventListenerFixed(parent, 'blur', this.getEnableAccountsFromDomain);
         }
     }
 
-    addEventListenerFixed(element, type, callback) {
-        const fixEvents = {
-            blur: 'focusout'
-        };
-
-        element.addEventListener(type, callback, typeof (fixEvents[type]) !== 'undefined');
-    }
-
     getEnableAccountsFromDomain(e, currentDomain) {
         const target = 'react-datalist-input';
         const hasEvent = e;
@@ -383,7 +375,10 @@ export default class CreateMailBox extends React.Component {
         let enableAccounts;
         if (this.state.loadingEnableAccounts) {
             enableAccounts = (
-                <div className='text-center'>
+                <div
+                    className='text-center'
+                    key={'loader-plans'}
+                >
                     <i className='fa fa-refresh fa-spin fa-2x'></i>
                     <p>Cargando casillas disponibles</p>
                 </div>
@@ -500,6 +495,7 @@ export default class CreateMailBox extends React.Component {
                         this.handleSubmit(e);
                     }}
                     id='createAccount'
+                    key={'form-create-mailbox'}
                 >
                     <div className='form-group string required'>
                         <label className='string required col-sm-3 control-label'>

src/components/mailbox/edit_mailbox.jsx

@@ -34,6 +34,10 @@ 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.addBlurListeneronInput = this.addBlurListeneronInput.bind(this);
+        this.getEnableAccountsFromDomain = this.getEnableAccountsFromDomain.bind(this);
+
+        this.cos = Utils.getEnabledPlansByCos(ZimbraStore.getAllCos());
         this.editUrlFromParams = this.props.params.domain_id ? `/domains/${this.props.params.domain_id}/mailboxes/` : '/mailboxes/';
         this.domainId = null;
 
@@ -223,11 +227,122 @@ export default class EditMailBox extends React.Component {
         }
     }
 
+    getEnableAccountsFromDomain(e, currentDomain) {
+        const target = 'react-datalist-input';
+        const hasEvent = e;
+        let rightInput = null;
+        let value = currentDomain || null;
+        if (hasEvent) {
+            rightInput = e.target;
+            value = rightInput.value.trim();
+        }
+
+        const classesList = [];
+        if (value.length > 0) {
+            if (hasEvent) {
+                Array.prototype.push.apply(classesList, rightInput.classList);
+            }
+            if (classesList.includes(target) || currentDomain) {
+                const domains = this.state.domains;
+                const thatDomainExists = domains.find((domain) => {
+                    const domainName = domain.name;
+                    return domainName.includes(value) && domainName.length === value.length;
+                });
+
+                if (thatDomainExists && this.cacheDomain && thatDomainExists.name === this.cacheDomain.name) {
+                    return null;
+                }
+
+                if (thatDomainExists) {
+                    this.cacheDomain = thatDomainExists;
+                    const maxCosAccounts = Utils.parseMaxCOSAccounts(thatDomainExists.attrs.zimbraDomainCOSMaxAccounts);
+                    this.setState({
+                        loadingEnableAccounts: true,
+                        error: false
+                    });
+
+                    return Client.batchCountAccount([thatDomainExists.name],
+                        (s) => {
+                            const usedAccounts = s.pop();
+                            const plansName = Object.keys(usedAccounts);
+                            const response = [];
+                            const plans = window.manager_config.plans;
+                            if (!maxCosAccounts) {
+                                this.setState({
+                                    loadingEnableAccounts: false,
+                                    enabledAccounts: false
+                                });
+
+                                return GlobalActions.emitMessage({
+                                    message: `El dominio: ${value}, no tiene plan, afíliese a un plan por favor.`,
+                                    typeError: messageType.ERROR
+                                });
+                            }
+                            plansName.forEach((plan) => {
+                                const item = usedAccounts[plan];
+                                if (maxCosAccounts[item.id]) {
+                                    const used = parseInt(item.used, 10);
+                                    const total = parseInt(maxCosAccounts[item.id], 10);
+                                    const enabled = (total - used);
+                                    const error = enabled < 0 ? `${enabled}` : null;
+                                    const classCss = plans[plan].statusCos;
+
+                                    response.push(
+                                        {
+                                            plan,
+                                            enabled,
+                                            error,
+                                            total,
+                                            used,
+                                            classCss,
+                                            cosId: item.id
+                                        }
+                                    );
+                                }
+
+                                return false;
+                            });
+
+                            return this.setState({
+                                loadingEnableAccounts: false,
+                                enabledAccounts: response
+                            });
+                        },
+                        (err) => {
+                            this.setState({
+                                loadingEnableAccounts: false,
+                                enabledAccounts: false
+                            });
+
+                            return GlobalActions.emitMessage({
+                                message: err.message,
+                                typeError: messageType.ERROR
+                            });
+                        });
+                }
+
+                this.cacheDomain = null;
+                return GlobalActions.emitMessage({
+                    message: `El dominio: ${value}, no existe, por favor verifíque.`,
+                    typeError: messageType.ERROR
+                });
+            }
+        }
+    }
+
+    addBlurListeneronInput() {
+        const parent = document.getElementById('edit-mailbox');
+
+        if (parent) {
+            Utils.addEventListenerFixed(parent, 'blur', this.getEnableAccountsFromDomain);
+        }
+    }
+
     handleEdit(e) {
         e.preventDefault();
         let shouldEnableArchiving = false;
         let shouldDisabledArchiving = false;
-        const plans = this.state.cos;
+        const {cos} = this.state;
         const mailbox = this.state.data;
         let p;
         Utils.toggleStatusButtons('.action-button', true);
@@ -243,10 +358,10 @@ export default class EditMailBox extends React.Component {
                 displayName: `${this.refs.givenName.value} ${this.refs.sn.value}`
             };
 
-            const keysPlans = Object.keys(this.state.cos);
+            const keysPlans = Object.keys(cos);
             const plansConfig = window.manager_config.plans;
             keysPlans.forEach((plan) => {
-                if (plans[plan] === attrs.zimbraCOSId && plansConfig[plan].archiving) {
+                if (cos[plan] === attrs.zimbraCOSId && plansConfig[plan].archiving) {
                     shouldEnableArchiving = !shouldEnableArchiving;
                     p = plansConfig[plan].refer || plan;
                 }
@@ -274,8 +389,6 @@ export default class EditMailBox extends React.Component {
                     MailboxStore.updateMailbox(account.id, account, this.domainId);
                 }
 
-                console.log(account); //eslint-disable-line no-console
-
                 if (shouldDisabledArchiving && !shouldEnableArchiving) {
                     account.disableArchiving((err) => {
                         if (err) {
@@ -322,7 +435,6 @@ export default class EditMailBox extends React.Component {
         let data = null;
         const max = 200;
         Utils.toggleStatusButtons('.action-save', true);
-        const cos = Utils.getEnabledPlansByCos(ZimbraStore.getAllCos());
         const hasMailboxes = this.isStoreEnabled ? MailboxStore.hasMailboxes() : null;
 
         if (hasMailboxes) {
@@ -345,16 +457,20 @@ export default class EditMailBox extends React.Component {
             promises.push(domains);
 
             Promise.all(promises).then((result) => {
-                if (this.isStoreEnabled) {
-                    MailboxStore.setCurrent(data);
-                }
+                const domains = Utils.getDomainsCleaned(result.shift().domain);
+                const currentDomain = Utils.findDomaindIdFromAccount(data, domains);
+
                 this.setState({
                     data,
                     zimbraCOSId: data.attrs.zimbraCOSId,
-                    domains: result.shift().domain,
-                    cos
+                    domains,
+                    cos: this.cos
                 });
-                Utils.toggleStatusButtons('.action-save', false);
+
+                if (currentDomain) {
+                    this.domainId = currentDomain.id;
+                    return this.getEnableAccountsFromDomain(null, currentDomain.name);
+                }
             }).catch((error) => {
                 GlobalActions.emitMessage({
                     message: error.message,
@@ -362,6 +478,7 @@ export default class EditMailBox extends React.Component {
                 });
             }).finally(() => {
                 GlobalActions.emitEndLoading();
+                Utils.toggleStatusButtons('.action-save', false);
             });
         } else {
             const mailbox = new Promise((resolve, reject) => {
@@ -396,18 +513,18 @@ export default class EditMailBox extends React.Component {
                 const account = result.shift();
                 const domains = Utils.getDomainsCleaned(result.shift().domain);
 
-                this.domainId = Utils.findDomaindIdFromAccount(account, domains);
+                const currentDomain = Utils.findDomaindIdFromAccount(account, domains);
 
                 this.setState({
                     data: account,
                     zimbraCOSId: account.attrs.zimbraCOSId,
                     domains,
-                    cos
+                    cos: this.cos
                 });
 
-                Utils.toggleStatusButtons('.action-save', false);
-                if (this.isStoreEnabled) {
-                    MailboxStore.setCurrent(account);
+                if (currentDomain) {
+                    this.domainId = currentDomain.id;
+                    return this.getEnableAccountsFromDomain(null, currentDomain.name);
                 }
             }).catch((error) => {
                 GlobalActions.emitMessage({
@@ -416,6 +533,7 @@ export default class EditMailBox extends React.Component {
                 });
             }).finally(() => {
                 GlobalActions.emitEndLoading();
+                Utils.toggleStatusButtons('.action-save', false);
             });
         }
     }
@@ -424,6 +542,7 @@ export default class EditMailBox extends React.Component {
         $('#sidebar-mailboxes').addClass('active');
         EventStore.addMessageListener(this.showMessage);
         this.getMailbox(this.props.params.id);
+        this.addBlurListeneronInput();
     }
 
     componentWillUnmount() {
@@ -446,10 +565,15 @@ export default class EditMailBox extends React.Component {
         let data;
         let actions;
         let form;
+        let options;
         const domains = [];
         let currentDomain = '';
         const cosElements = [];
+        const {cos} = this.state;
         const {zimbraCOSId} = this.state;
+        let enableAccounts;
+        let counterPlans = 9999;
+
         let datalist = (
             <input
                 type='text'
@@ -458,6 +582,36 @@ export default class EditMailBox extends React.Component {
             />
         );
 
+        if (this.state.loadingEnableAccounts) {
+            enableAccounts = (
+                <div
+                    className='text-center'
+                    key={'loader-plans'}
+                >
+                    <i className='fa fa-refresh fa-spin fa-2x'></i>
+                    <p>Cargando casillas disponibles</p>
+                </div>
+            );
+
+            cosElements.push(
+                <div
+                    key={'loader-checkboxes'}
+                >
+                    <i className='fa fa-spinner fa-pulse fa-2x fa-fw'></i>
+                </div>
+            );
+        }
+
+        if (this.state.enabledAccounts) {
+            const accounts = this.state.enabledAccounts;
+            counterPlans = accounts.length;
+            accounts.forEach((plan) => {
+                if (plan.enabled <= 0) {
+                    counterPlans--;
+                }
+            });
+        }
+
         if (this.state.error) {
             message = (
                 <MessageBar
@@ -468,24 +622,11 @@ export default class EditMailBox extends React.Component {
             );
         }
 
-        if (this.state.data) {
+        if (this.state.data && !this.state.loadingEnableAccounts) {
             data = this.state.data;
             const doms = this.state.domains;
-            const cos = this.state.cos;
             currentDomain = data.name.split('@').pop();
 
-            /*buttonDelete = (
-                <ToggleModalButton
-                    role='button'
-                    className='btn btn-xs btn-danger action-button'
-                    dialogType={ConfirmDeleteModal}
-                    dialogProps={{data}}
-                    key='delete-mailbox'
-                >
-                    {'Eliminar'}
-                </ToggleModalButton>
-            );*/
-
             buttonDelete = (
                 <a
                     className='btn btn-danger btn-xs action-button'
@@ -505,40 +646,83 @@ export default class EditMailBox extends React.Component {
                 domains.push(doms[i].name);
             }
 
-            for (let cosName in cos) {
-                if (cos.hasOwnProperty(cosName)) {
-                    let isChecked = false;
+            const keyPlans = Object.keys(cos);
             const id = data.attrs.zimbraCOSId;
 
+            keyPlans.forEach((plan) => {
+                if (cos[plan]) {
+                    let isChecked = false;
+                    let isDisabled = null;
+                    let classCss = null;
+                    let info = null;
+                    let hasPlan = false;
                     if (id) {
-                        if (cos[cosName] === id) {
+                        if (cos[plan] === id) {
                             isChecked = 'checked';
                         }
                     }
+                    if (this.state.enabledAccounts) {
+                        this.state.enabledAccounts.forEach((p) => {
+                            if (cos[plan] === p.cosId) {
+                                hasPlan = true;
+                                isDisabled = p.enabled < 1 ? true : null;
+                                classCss = p.classCss;
+                                info = (
+                                    <div>
+                                        <span>
+                                            Usadas: {p.used}
+                                        </span>
+                                        <span> - </span>
+                                        <span className={p.enabled <= 0 ? 'text-danger' : 'text-success'}>
+                                            Libres: {p.enabled}
+                                        </span>
+                                    </div>
+                                );
+                            }
+                        });
+                    }
+
+                    if (this.state.enabledAccounts && !hasPlan && null) {
+                        isDisabled = true;
+                        info = (
+                            <div>
+                                <span className='text-danger'>
+                                    Este plan no esta contratado
+                                </span>
+                            </div>
+                        );
+                    }
+
+                    let disabledCss = isDisabled ? 'disabled' : '';
 
-                    const checkbox = (
+                    const item = (
                         <label
-                            key={cos[cosName]}
-                            className='radio radio-info radio-inline pretty-input'
+                            className={`radio radio-info radio-inline pretty-input ${disabledCss}`}
+                            key={plan}
                         >
                             <div className='pretty-radio'>
                                 <input
                                     type='radio'
-                                    className='pretty'
+                                    className={`pretty ${disabledCss}`}
                                     name='mailbox'
-                                    defaultChecked={isChecked}
                                     onChange={() => {
-                                        this.handleRadioChanged(cos[cosName]);
+                                        this.handleRadioChanged(cos[plan]);
                                     }}
+                                    disabled={isDisabled}
+                                    defaultChecked={isChecked}
                                 />
                                 <span></span>
                             </div>
-                            {Utils.titleCase(cosName)}
+
+                            <span className={`${classCss} status-plan`}>
+                                {Utils.titleCase(plan)}
+                            </span>
+                            {info}
                         </label>
                     );
-                    cosElements.push(checkbox);
-                }
+                    cosElements.push(item);
                 }
+            });
 
             if (UserStore.getCurrentUser().name === data.name) {
                 buttonDelete = null;
@@ -554,6 +738,21 @@ export default class EditMailBox extends React.Component {
                     initialFilter={currentDomain}
                 />
             );
+
+            options = Object.keys(Constants.status).map((option, i) => {
+                if (Constants.status[option].isEnabledOnEdit) {
+                    return (
+                        <option
+                            value={option}
+                            key={`option-plan-${i}`}
+                        >
+                            {Constants.status[option].label}
+                        </option>
+                    );
+                }
+
+                return null;
+            });
         }
 
         form = (
@@ -563,6 +762,7 @@ export default class EditMailBox extends React.Component {
                 onSubmit={(e) => {
                     this.handleEdit(e);
                 }}
+                key={'form-edit'}
             >
                 <div className='form-group string required'>
                     <label className='string required col-sm-3 control-label'>
@@ -653,9 +853,7 @@ export default class EditMailBox extends React.Component {
                             className='form-control'
                             ref='zimbraAccountStatus'
                         >
-                            <option value='active'>Activa</option>
-                            <option value='closed'>Cerrada</option>
-                            <option value='locked'>Bloqueada</option>
+                            {options}
                         </select>
                     </div>
                 </div>
@@ -725,13 +923,16 @@ export default class EditMailBox extends React.Component {
                 <div className='content animate-panel'>
                     {message}
                     <div className='row'>
-                        <div className='col-md-12 central-content'>
+                        <div
+                            className='col-md-12 central-content'
+                            id='edit-mailbox'
+                        >
                             <Panel
                                 title={'Editar Casilla'}
                                 btnsHeader={actions}
                                 classHeader={'forum-box'}
                             >
-                                {form}
+                                {[enableAccounts, form]}
                             </Panel>
                         </div>
                     </div>

src/components/mailbox/mailbox.jsx

@@ -348,7 +348,7 @@ export default class Mailboxes extends React.Component {
 
     componentWillUnmount() {
         EventStore.removeMessageListener(this.showMessage);
-        MailboxStore.removeListenerAddMassive(this.showMessage);
+        MailboxStore.removeListenerAddMassive(this.refreshAllAccounts);
         $('#sidebar-mailboxes').removeClass('active');
         this.domainName = null;
         //this.isMounted = false;

src/components/mailbox/mailbox_details.jsx

@@ -118,7 +118,7 @@ export default class MailboxDetails extends React.Component {
             });
         }).then((mailbox) => {
             MailboxStore.setCurrent(mailbox);
-            let items = mailbox.attrs.zimbraMailAlias || null;
+            let items = mailbox.attrs.zimbraMailAlias || [];
 
             if (items) {
                 if (!Array.isArray(items)) {

src/components/select-col.jsx

@@ -14,6 +14,7 @@ export default class SelectCol extends React.Component {
     }
 
     handleSelectChange(e, id) {
+        const current = this.current;
         e.preventDefault();
         if (this.props.onSelected) {
             const option = e.target;
@@ -28,7 +29,7 @@ export default class SelectCol extends React.Component {
                 } else {
                     this.current = selected;
                 }
-                return this.props.onSelected(e, selected, id);
+                return this.props.onSelected(e, current, selected, id);
             }
             return null;
         }

src/config/config.json

 {
     "debug": true,
     "DEV": true,
-    "enableStores" : 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",
+    "timeoutRequest": 60000,
     "dns": {
         "url": "http://zimbra.zboxapp.dev:9081/powerdns_proxy",
         "token": "otto",

src/utils/client.jsx

@@ -57,6 +57,7 @@ function initZimbra() {
                 zimbra = new ZimbraAdminApi({
                     url: config.zimbraUrl
                 });
+                zimbra.client.options.timeout = config.timeoutRequest;
                 zimbra.client.token = token;
                 zimbra.client.session = { id: sessionId };
                 ZimbraStore.setCurrent(zimbra);

src/utils/constants.jsx

@@ -113,21 +113,25 @@ export default {
         active: {
             label: 'Activa',
             isEnabledOnCreate: true,
+            isEnabledOnEdit: true,
             classes: 'label-success mailbox-status'
         },
         locked: {
             label: 'Inactiva',
             isEnabledOnCreate: true,
+            isEnabledOnEdit: true,
             classes: 'label-warning mailbox-status'
         },
         lockout: {
             label: 'Bloqueada',
             isEnabledOnCreate: false,
+            isEnabledOnEdit: false,
             classes: 'label-warning mailbox-status'
         },
         closed: {
             label: 'Cerrada',
             isEnabledOnCreate: true,
+            isEnabledOnEdit: true,
             classes: 'label-default mailbox-status'
         }
     }

src/utils/utils.jsx

@@ -612,6 +612,23 @@ export function forceTimestampFromHumanDate(date) {
     return formattedTimeStamp;
 }
 
+export function timestampToDate(timestamp) {
+    const time = parseInt(timestamp, 10);
+    const generatedDate = new Date(time).toLocaleString();
+    const date = generatedDate.split(/\s/).shift();
+    const dateArr = date.split('/');
+    const dateParts = dateArr.map((item) => {
+        if (item.length < 2) {
+            return '0' + item;
+        }
+
+        return item;
+    });
+    const newDate = dateParts.join('/');
+
+    return newDate;
+}
+
 export function setInitialDate() {
     const dateInstance = new Date();
     const day = dateInstance.getDate().toString().length < 2 ? '0' + dateInstance.getDate().toString() : dateInstance.getDate();
@@ -702,14 +719,14 @@ export function getDomainsCleaned(domains) {
 }
 
 export function findDomaindIdFromAccount(account, domains) {
-    const name = account === 'object' ? account.domain : account;
+    const name = typeof account === 'object' ? account.domain : account;
     const rightsDomains = domains.filter((domain) => {
         return name === domain.name;
     });
 
     const domainReturned = rightsDomains.length === 1 ? rightsDomains.pop() : null;
 
-    return domainReturned ? domainReturned.id : null;
+    return domainReturned;
 }
 
 export function sortByNames(a, b) {
@@ -778,3 +795,11 @@ export function makeRequest(response, dl, resolve, returnAPI, store) {
     res.data = dl;
     return resolve(res);
 }
+
+export function addEventListenerFixed(element, type, callback) {
+    const fixEvents = {
+        blur: 'focusout'
+    };
+
+    element.addEventListener(type, callback, typeof (fixEvents[type]) !== 'undefined');
+}