SHARE
TWEET

Untitled

a guest May 21st, 2019 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import KMBLoader from 'components/layout/KMBLoader';
  4. import Table from 'components/layout/Table';
  5. import Confirm from 'components/layout/Confirm';
  6. import { connect } from 'react-redux';
  7. import { hideModal, addNotification } from 'actions';
  8.  
  9. import Confirmer from 'components/layout/Confirmer';
  10. import { OverlayTrigger, Tooltip } from 'react-bootstrap';
  11. import { getPresetEmails, deletePresetEmail, updatePresetEmailPublicStatus, deleteContact, updatePresetEmail, createPresetEmail, createCustomEmail } from "actions/presetEmails"
  12.  
  13.  
  14. import KMBEditor from 'components/layout/KMBEditor';
  15.  
  16. class EmailHooks extends React.Component {
  17.  
  18.     constructor( props ) {
  19.         super( props );
  20.         this.state = {
  21.             wordConfirmed: null,
  22.             toggledCells: [],
  23.             ready: false,
  24.             disableSave: null,
  25.             emailValue : "",
  26.             contacts : this.props.mode === "edit" && this.props.emails.data[ 0 ].contacts,
  27.             subjectEditPreset : this.props.isHook === false && this.props.emails.data[ 0 ] && this.props.emails.data[ 0 ].template.subject,
  28.             newPresetSubject : ""
  29.         }
  30.         this.handleBody = this.handleBody.bind( this );
  31.         this.onRender = this.onRender.bind( this );
  32.         this.toggleActions = this.toggleActions.bind( this );
  33.         this.deleteContact = this.deleteContact.bind( this );
  34.         this.prepareVars = this.prepareVars.bind( this );
  35.         this.prepareSpecificVars = this.prepareSpecificVars.bind( this );
  36.         this.submitEmails = this.submitEmails.bind( this );
  37.         this.cancelEdit = this.cancelEdit.bind( this );
  38.         this.emailTemplateChanged = this.emailTemplateChanged.bind( this );
  39.         this.createEmail = this.createEmail.bind( this );
  40.         this.createDefaultEmail = this.createDefaultEmail.bind( this );
  41.         this.createNewPresetEmail = this.createNewPresetEmail.bind( this )
  42.         this.excludedArea = null;
  43.         this.emails = null;
  44.         this.array = [];
  45.     }
  46.  
  47.  
  48.     componentWillUnmount() {
  49.         document.body.removeEventListener( 'click', this.handleBody );
  50.     }
  51.    
  52.     componentDidMount() {
  53.         document.body.addEventListener( 'click', this.handleBody );
  54.         const { getHookEmails, event, hook } = this.props;
  55.        
  56.         if( this.props.isHook ){
  57.             getHookEmails( event.id, hook.id )
  58.             .then( ( emails ) => {
  59.                 this.emails= JSON.parse( JSON.stringify( emails ) );
  60.                 this.setState( {
  61.                     ready: true,
  62.                     disableSave: new Array( emails.data.length ).fill( true )
  63.                 } )
  64.             } );
  65.         }else{
  66.             this.emails = this.props.emails
  67.  
  68.             this.setState( {
  69.                 ready: true,
  70.             } )
  71.         }
  72.     }
  73.  
  74.     toggleActions( e, id ) {
  75.  
  76.         this.excludedArea = e.target.parentNode;
  77.  
  78.         let toggledCells = [ id ];
  79.  
  80.         this.setState( { toggledCells } );
  81.  
  82.     }
  83.  
  84.     handleBody( e ) {
  85.         if( this.state.toggledCells.length > 0 && ! this.excludedArea.contains( e.target ) ) {
  86.             this.setState( { toggledCells: [] } );
  87.         }
  88.  
  89.     }
  90.  
  91.     deleteContact( emailId, contacts ) {
  92.         if( this.props.mode ==="edit" ){
  93.             this.editPresetEmail( this.props.orgId, this.props.hook.id, contacts )
  94.         }else{
  95.             this.props.saveEmail( this.props.eventId, this.props.hook.id, emailId, "edit", { data: { contacts, action: "deleteContact" } } )
  96.             .then( email=>{
  97.  
  98.                 const newData = this.emails.data.map( x => {
  99.                     if ( x.id === email.data.id ) {
  100.                         return email.data;
  101.                     }
  102.                     return x;
  103.                 } )
  104.                 this.emails.data = newData;
  105.             } )
  106.         }
  107.     }
  108.    
  109.     onRender( col, item ) {
  110.  
  111.         switch( col.key ) {
  112.             case 'cosmetic': {
  113.                 return(
  114.                     <span className="icon-users"></span>
  115.                 )
  116.             }
  117.  
  118.             case 'actions': {
  119.                 if( this.props.mode === "edit" && this.props.isHook === false ){
  120.                     let editTt = <Tooltip id={`tooltip-edit-${item.id}`}>Edit</Tooltip>
  121.                     let tooltip = <Tooltip className="delete-tooltip" id={`tooltip-delete-${item.id}`}>Delete</Tooltip>;
  122.  
  123.                     let deleteBody = (
  124.                         <div>
  125.                             <p>This action will permanently delete the contact with ID: <strong>{item.id}</strong></p>
  126.                             <p><span>{item.name}</span></p>
  127.                             <p>Are you sure that you want to delete this contact?</p>
  128.                             <p>If yes, then please type: CONFIRM DELETE</p>
  129.                             <Confirmer
  130.                                 word="confirm delete"
  131.                                 onSuccess={ () => {
  132.                                     this.setState( { wordConfirmed: true } )
  133.                                 }}
  134.                                 onFail={ () => {
  135.                                     if( this.state.wordConfirmed ) {
  136.                                         this.setState( { wordConfirmed: false } );
  137.                                     }
  138.                                 }}
  139.                             />
  140.                         </div>
  141.                     );
  142.  
  143.                     let deleteTd =
  144.                         <OverlayTrigger placement="top" overlay={tooltip}>
  145.                             <span className="confirm-holder">
  146.                                 <Confirm
  147.                                     onConfirm={ () => {
  148.  
  149.                                         this.setState( {
  150.                                             wordConfirmed: false
  151.                                         }, () => {
  152.                                             let contacts = [];
  153.                                             this.props.emails.data.map( email => {
  154.                                                 email.contacts.map( ( contact, index ) => {
  155.                                                     if( contact.id ===item.id ){
  156.                                                         email.contacts.splice( index, 1 )
  157.                                                         contacts = email.contacts
  158.                                                     }
  159.                                                 } )
  160.  
  161.                                             } )
  162.                                            
  163.                                             this.deleteContact( item.emailId, contacts );
  164.                                         } )
  165.                                     }}
  166.                                     body={ deleteBody }
  167.                                     className="delete-event"
  168.                                     confirmText="Confirm Delete"
  169.                                     disabled={ this.state.wordConfirmed ? false : true }
  170.                                     title="Delete Action! Are you sure?"
  171.                                     onClose={
  172.                                         () => {
  173.                                             this.setState( { wordConfirmed: false } );
  174.                                         }
  175.                                     }
  176.                                 >
  177.                                     <button type="button" className="btn circle">
  178.                                         <span className="icon-delete"></span>
  179.                                     </button>
  180.                                 </Confirm>
  181.                             </span>
  182.                         </OverlayTrigger>
  183.                     const emails  = this.emails.data;
  184.                     let index = emails.map( x => x.id ).indexOf( Number( item.emailId ) );
  185.                     const template = JSON.stringify( { html : this.state.emailValue } )
  186.  
  187.                     let editTd = (
  188.                         <OverlayTrigger placement="top" overlay={editTt}>
  189.                             <button
  190.                                 type="button"
  191.                                 className="btn circle"
  192.                                 onClick={ () => {return this.props.contactModal( this.props.orgId, this.props.hook.id, this.props.emails.data[ 0 ].id, { template, contacts :this.state.contacts }, "editContact", item, this.props.innerHook, false, "edit", null, null, null, item.id );} }
  193.                             >
  194.                                 <span className="icon-edit">
  195.                                 </span>
  196.                             </button>
  197.                         </OverlayTrigger>
  198.                     );
  199.  
  200.                     return(
  201.                         <div className="clearfix">
  202.                             <div className="event-actions" onClick={ ( e ) => this.toggleActions( e, item.id ) }>
  203.                                 <span className="toggle-actions"></span>
  204.                             </div>
  205.                             <div className={`actions-wrapper${this.state.toggledCells.includes( item.id ) ? '' : ' hidden'}`}>
  206.                                 { editTd }
  207.                                 { deleteTd }
  208.                             </div>
  209.                         </div>
  210.                     )
  211.                 }
  212.                 if( this.props.mode !== "create" && this.props.mode !== "custom" ){
  213.                     let editTt = <Tooltip id={`tooltip-edit-${item.id}`}>Edit</Tooltip>
  214.                     let tooltip = <Tooltip className="delete-tooltip" id={`tooltip-delete-${item.id}`}>Delete</Tooltip>;
  215.  
  216.                     let deleteBody = (
  217.                         <div>
  218.                             <p>This action will permanently delete the contact with ID: <strong>{item.id}</strong></p>
  219.                             <p><span>{item.name}</span></p>
  220.                             <p>Are you sure that you want to delete this contact?</p>
  221.                             <p>If yes, then please type: CONFIRM DELETE</p>
  222.                             <Confirmer
  223.                                 word="confirm delete"
  224.                                 onSuccess={ () => {
  225.                                     this.setState( { wordConfirmed: true } )
  226.                                 }}
  227.                                 onFail={ () => {
  228.                                     if( this.state.wordConfirmed ) {
  229.                                         this.setState( { wordConfirmed: false } );
  230.                                     }
  231.                                 }}
  232.                             />
  233.                         </div>
  234.                     );
  235.  
  236.                     let deleteTd =
  237.                         <OverlayTrigger placement="top" overlay={tooltip}>
  238.                             <span className="confirm-holder">
  239.                                 <Confirm
  240.                                     onConfirm={ () => {
  241.  
  242.                                         this.setState( {
  243.                                             wordConfirmed: false
  244.                                         }, () => {
  245.                                             let contacts = [];
  246.                                             this.props.innerHook.emails.data.map( ( v/*, i*/ ) => {
  247.                                                 let index;
  248.                                                 if ( v.id == item.emailId ) {
  249.                                                     index = v.contacts.map( x => x.id ).indexOf( item.id )
  250.                                                     v.contacts.splice( index, 1 );
  251.                                                     contacts = v.contacts
  252.                                                 }
  253.                                             } )
  254.                                             this.deleteContact( item.emailId, contacts );
  255.                                         } )
  256.                                     }}
  257.                                     body={ deleteBody }
  258.                                     className="delete-event"
  259.                                     confirmText="Confirm Delete"
  260.                                     disabled={ this.state.wordConfirmed ? false : true }
  261.                                     title="Delete Action! Are you sure?"
  262.                                     onClose={
  263.                                         () => {
  264.                                             this.setState( { wordConfirmed: false } );
  265.                                         }
  266.                                     }
  267.                                 >
  268.                                     <button type="button" className="btn circle">
  269.                                         <span className="icon-delete"></span>
  270.                                     </button>
  271.                                 </Confirm>
  272.                             </span>
  273.                         </OverlayTrigger>
  274.                     const emails  = this.emails.data;
  275.                     let index = emails.map( x => x.id ).indexOf( Number( item.emailId ) );
  276.                     let editTd = (
  277.                         <OverlayTrigger placement="top" overlay={editTt}>
  278.                             <button
  279.                                 type="button"
  280.                                 className="btn circle"
  281.                                 onClick={ () => {return this.props.contactModal( this.props.eventId, this.props.hook.id, Number( item.emailId ), this.emails.data[ index ], "editContact", item, this.props.innerHook );} }
  282.                             >
  283.                                 <span className="icon-edit">
  284.                                 </span>
  285.                             </button>
  286.                         </OverlayTrigger>
  287.                     );
  288.  
  289.                     return(
  290.                         <div className="clearfix">
  291.                             <div className="event-actions" onClick={ ( e ) => this.toggleActions( e, item.id ) }>
  292.                                 <span className="toggle-actions"></span>
  293.                             </div>
  294.                             <div className={`actions-wrapper${this.state.toggledCells.includes( item.id ) ? '' : ' hidden'}`}>
  295.                                 { editTd }
  296.                                 { deleteTd }
  297.                             </div>
  298.                         </div>
  299.                     )
  300.                 }else if( this.props.mode === "custom" ){
  301.                    
  302.                     let editTt = <Tooltip id={`tooltip-edit-${item.id}`}>Edit</Tooltip>
  303.                     let tooltip = <Tooltip className="delete-tooltip" id={`tooltip-delete-${item.id}`}>Delete</Tooltip>;
  304.  
  305.                     let deleteBody = (
  306.                         <div>
  307.                             <p>This action will permanently delete the contact with ID: <strong>{item.id}</strong></p>
  308.                             <p><span>{item.name}</span></p>
  309.                             <p>Are you sure that you want to delete this contact?</p>
  310.                             <p>If yes, then please type: CONFIRM DELETE</p>
  311.                             <Confirmer
  312.                                 word="confirm delete"
  313.                                 onSuccess={ () => {
  314.                                     this.setState( { wordConfirmed: true } )
  315.                                 }}
  316.                                 onFail={ () => {
  317.                                     if( this.state.wordConfirmed ) {
  318.                                         this.setState( { wordConfirmed: false } );
  319.                                     }
  320.                                 }}
  321.                             />
  322.                         </div>
  323.                     );
  324.  
  325.                     let deleteTd =
  326.                         <OverlayTrigger placement="top" overlay={tooltip}>
  327.                             <span className="confirm-holder">
  328.                                 <Confirm
  329.                                     onConfirm={ () => {
  330.  
  331.                                         this.setState( {
  332.                                             wordConfirmed: false
  333.                                         }, () => {
  334.                                            
  335.                                             this.props.deleteContact( item.id, "custom" )
  336.                                         } )
  337.                                     }}
  338.                                     body={ deleteBody }
  339.                                     className="delete-event"
  340.                                     confirmText="Confirm Delete"
  341.                                     disabled={ this.state.wordConfirmed ? false : true }
  342.                                     title="Delete Action! Are you sure?"
  343.                                     onClose={
  344.                                         () => {
  345.                                             this.setState( { wordConfirmed: false } );
  346.                                         }
  347.                                     }
  348.                                 >
  349.                                     <button type="button" className="btn circle">
  350.                                         <span className="icon-delete"></span>
  351.                                     </button>
  352.                                 </Confirm>
  353.                             </span>
  354.                         </OverlayTrigger>
  355.                     let editTd = (
  356.                         <OverlayTrigger placement="top" overlay={editTt}>
  357.                             <button
  358.                                 type="button"
  359.                                 className="btn circle"
  360.                                 onClick={ () => {return this.props.contactModal( this.props.eventId, 1, item.id, { id :1, contacts:[] }, "editContact", item, this.props.innerHook, false, "create", this.props.eventId, this.props.mode );} }
  361.                             >
  362.                                 <span className="icon-edit">
  363.                                 </span>
  364.                             </button>
  365.                         </OverlayTrigger>
  366.                     );
  367.                     return(
  368.                         <div className="clearfix">
  369.                             <div className="event-actions" onClick={ ( e ) => this.toggleActions( e, item.id ) }>
  370.                                 <span className="toggle-actions"></span>
  371.                             </div>
  372.                             <div className={`actions-wrapper${this.state.toggledCells.includes( item.id ) ? '' : ' hidden'}`}>
  373.                                 { editTd }
  374.                                 { deleteTd }
  375.                             </div>
  376.                         </div>
  377.                     )
  378.                 }else if( this.props.mode === "create" ){
  379.                
  380.                     let editTt = <Tooltip id={`tooltip-edit-${item.id}`}>Edit</Tooltip>
  381.                     let tooltip = <Tooltip className="delete-tooltip" id={`tooltip-delete-${item.id}`}>Delete</Tooltip>;
  382.  
  383.                     let deleteBody = (
  384.                         <div>
  385.                             <p>This action will permanently delete the contact with ID: <strong>{item.id}</strong></p>
  386.                             <p><span>{item.name}</span></p>
  387.                             <p>Are you sure that you want to delete this contact?</p>
  388.                             <p>If yes, then please type: CONFIRM DELETE</p>
  389.                             <Confirmer
  390.                                 word="confirm delete"
  391.                                 onSuccess={ () => {
  392.                                     this.setState( { wordConfirmed: true } )
  393.                                 }}
  394.                                 onFail={ () => {
  395.                                     if( this.state.wordConfirmed ) {
  396.                                         this.setState( { wordConfirmed: false } );
  397.                                     }
  398.                                 }}
  399.                             />
  400.                         </div>
  401.                     );
  402.  
  403.                     let deleteTd =
  404.                         <OverlayTrigger placement="top" overlay={tooltip}>
  405.                             <span className="confirm-holder">
  406.                                 <Confirm
  407.                                     onConfirm={ () => {
  408.  
  409.                                         this.setState( {
  410.                                             wordConfirmed: false
  411.                                         }, () => {
  412.                                            
  413.                                             this.props.deleteContact( item.id, "create" )
  414.                                         } )
  415.                                     }}
  416.                                     body={ deleteBody }
  417.                                     className="delete-event"
  418.                                     confirmText="Confirm Delete"
  419.                                     disabled={ this.state.wordConfirmed ? false : true }
  420.                                     title="Delete Action! Are you sure?"
  421.                                     onClose={
  422.                                         () => {
  423.                                             this.setState( { wordConfirmed: false } );
  424.                                         }
  425.                                     }
  426.                                 >
  427.                                     <button type="button" className="btn circle">
  428.                                         <span className="icon-delete"></span>
  429.                                     </button>
  430.                                 </Confirm>
  431.                             </span>
  432.                         </OverlayTrigger>
  433.                     let editTd = (
  434.                         <OverlayTrigger placement="top" overlay={editTt}>
  435.                             <button
  436.                                 type="button"
  437.                                 className="btn circle"
  438.                                 onClick={ () => {return this.props.contactModal( this.props.eventId, 1, item.id, { id :1, contacts:[] }, "editContact", item, this.props.innerHook, false, "create", this.props.eventId, this.props.mode );} }
  439.                             >
  440.                                 <span className="icon-edit">
  441.                                 </span>
  442.                             </button>
  443.                         </OverlayTrigger>
  444.                     );
  445.                     return(
  446.                         <div className="clearfix">
  447.                             <div className="event-actions" onClick={ ( e ) => this.toggleActions( e, item.id ) }>
  448.                                 <span className="toggle-actions"></span>
  449.                             </div>
  450.                             <div className={`actions-wrapper${this.state.toggledCells.includes( item.id ) ? '' : ' hidden'}`}>
  451.                                 { editTd }
  452.                                 { deleteTd }
  453.                             </div>
  454.                         </div>
  455.                     )
  456.                 }
  457.             }
  458.         }
  459.     }
  460.  
  461.     prepareVars() {
  462.         const { hook } = this.props;
  463.         let _r = '';
  464.         hook.available_vars.forEach( v => _r += `${ v.value }, ` );
  465.         return _r.trim().slice( 0, -1 );
  466.     }
  467.     prepareVarsFromProps() {
  468.         const { globalVars } = this.props;
  469.         let _r = '';
  470.         globalVars.forEach( v => _r += `${ v.value }, ` );
  471.         return _r.trim().slice( 0, -1 );
  472.     }
  473.  
  474.     prepareSpecificVars( e ){
  475.         if ( e.available_vars.length ) {
  476.             let _r = '';
  477.             e.available_vars.forEach( v => _r += `${ v.value }, ` );
  478.             return <p>Specific Variables: <span className="kmb-hooks-actions-available-variables">{_r.trim().slice( 0, -1 )}</span></p>;
  479.         }
  480.     }
  481.     cancelEdit() {
  482.         this.props.cancelEdit();
  483.     }
  484.  
  485.     deleteEmail( item, index ) {
  486.         let deleteSpan = <Tooltip id={`tooltip-deleteemail-${item.id}`}>Delete Email</Tooltip>
  487.         const deleteBody = (
  488.             <div>
  489.                 <p>This action will permanently delete the email with ID: <strong>{item.id}</strong></p>
  490.                 <p>Are you sure that you want to delete this email?</p>
  491.                 <p>If yes, then please type: CONFIRM DELETE</p>
  492.                 <Confirmer
  493.                     word="confirm delete"
  494.                     onSuccess={ () => {
  495.                         this.setState( { wordConfirmed: true } )
  496.                     }}
  497.                     onFail={ () => {
  498.                         if( this.state.wordConfirmed ) {
  499.                             this.setState( { wordConfirmed: false } );
  500.                         }
  501.                     }}
  502.                 />
  503.             </div>
  504.         );
  505.         const deletedItem =
  506.             <OverlayTrigger
  507.                 placement="top"
  508.                 overlay={deleteSpan}
  509.             >
  510.                 <span className="confirm-holder">
  511.                     <Confirm
  512.                         onConfirm={ () => {
  513.  
  514.                             this.setState( {
  515.                                 wordConfirmed: false
  516.                             }, () => {
  517.                                 this.props.deleteItem( {
  518.                                     emailId: item.id,
  519.                                     hookId: this.props.hook.id,
  520.                                     eventId: this.props.eventId
  521.                                 }
  522.                                 , "hookEmails" ).then( () => {
  523.                                     const newState = this.state.disableSave;
  524.                                     newState.splice( index, 1 );
  525.                                     this.emails.data.splice( index, 1 );
  526.                                     const el = document.querySelector( `#tooltip-deleteemail-${item.id}` ) || {};
  527.                                     ( el.style ||{} ).display="none";
  528.                                     this.setState( { disableSave: newState } );
  529.                                 } )
  530.                             } )
  531.                         }}
  532.                         body={ deleteBody }
  533.                         className="delete-event"
  534.                         confirmText="Confirm Delete"
  535.                         disabled={ this.state.wordConfirmed ? false : true }
  536.                         title="Delete Action! Are you sure?"
  537.                         onClose={
  538.                             () => {
  539.                                 this.setState( { wordConfirmed: false } );
  540.                                 const el = document.querySelector( `#tooltip-deleteemail-${item.id}` ) || {};
  541.                                 ( el.style ||{} ).display="none";
  542.                             }
  543.                         }
  544.                     >
  545.                         <span className="icon-close"
  546.                             onMouseOver={() => {
  547.                                 if ( !document.querySelector( `#tooltip-deleteemail-${item.id}` ) ){
  548.                                     return false;
  549.                                 }
  550.                                 const el = document.querySelector( `#tooltip-deleteemail-${item.id}` ) || {};
  551.                                 ( el.style ||{} ).display="block";
  552.                             }}></span>
  553.                     </Confirm>
  554.                 </span>
  555.             </OverlayTrigger>
  556.  
  557.         return deletedItem;
  558.     }
  559.     submitEmails( emailId, index ) {
  560.         this.props.saveEmail( this.props.eventId, this.props.hook.id, emailId, "edit", { data: { template:JSON.stringify( this.emails.data[ index ].template ) } } )
  561.         .then( () => {
  562.             const newState = this.state.disableSave
  563.             newState[ index ] = true;
  564.             this.setState( { disableSave: newState } );
  565.         } );
  566.  
  567.  
  568.     }
  569.     handleChange = ( event, e ) => {
  570.         this.setState( prevState => ( {
  571.             emailSubject: {
  572.                 ...prevState.emailSubject,
  573.                 [ e.id ]: event.target.value,
  574.             },
  575.         } ) );
  576.     }
  577.     reseToDefault( emailId, index ) {
  578.         this.props.resetEmail( this.props.eventId, this.props.hook.id, emailId, "edit", { data: { resetTemplate: true } } )
  579.         .then( ( email ) => {
  580.             this.emails.data[ index ] = JSON.parse( JSON.stringify( email.data ) );
  581.             const newState = this.state.disableSave
  582.             newState[ index ] = true;
  583.             this.setState( { disableSave: newState } );
  584.         } );
  585.     }
  586.     presetEmailChanged( data ){
  587.         this.setState( { emailValue : data } )
  588.  
  589.     }
  590.     emailTemplateChanged( index, data ){
  591.         if( !this.state.ready ) return;
  592.         let expectedEmail = this.props.innerHook.emails.data[ index ].template.html
  593.         .replace( /\n/gm, "" )
  594.         .replace( /(\s*style=\s*"[^"]+"\s*)|(\s*style=\s*'[^']+'\s*)/gm, "" )
  595.         // .replace( /(?<=<)\s+|\s+(?=>)|((?<=>)\s+\s+(?=<))|(?<=<\/)\s+|((?<=<)\s+\s+(?=\/))/gm, "" )
  596.         .trim();
  597.         let actualEmail = data
  598.         .replace( /\n/gm, "" )
  599.         .replace( /(\s*style=\s*"[^"]+"\s*)|(\s*style=\s*'[^']+'\s*)/gm, "" )
  600.         // .replace( /(?<=<)\s+|\s+(?=>)|((?<=>)\s+\s+(?=<))|(?<=<\/)\s+|((?<=<)\s+\s+(?=\/))/gm, "" )
  601.         .trim();
  602.        
  603.         if ( expectedEmail !== actualEmail ){
  604.             const newState = this.state.disableSave
  605.             newState[ index ] = false;
  606.             this.emails.data[ index ].template.html = data;
  607.             this.setState( { disableSave: newState } )
  608.         } else {
  609.             const newState = this.state.disableSave
  610.             newState[ index ] = true;
  611.             this.emails.data[ index ].template.html = data;
  612.             this.setState( { disableSave: newState } )
  613.         }
  614.     }
  615.  
  616.     createEmail() {
  617.         this.setState( { ready: false } );
  618.         this.props.createEmail( this.props.eventId, this.props.hook.id )
  619.         .then( r =>  {
  620.             const newState = [ ...this.state.disableSave ];
  621.             newState.unshift( true );
  622.             this.emails.data.unshift( JSON.parse( JSON.stringify( r.data ) ) );
  623.             this.setState( { disableSave: newState, ready:true } )
  624.         } )
  625.     }
  626.     createNewPresetEmail() {
  627.         const template = JSON.stringify( { subject : this.state.newPresetSubject, html : this.state.emailValue } )
  628.         const data = {
  629.             public : 1,
  630.             name : this.state.titleValue,
  631.             template,
  632.             contacts : this.props.tempContacts
  633.         }
  634.         this.props.createPresetEmail( this.props.orgId, data )
  635.     }
  636.     createCustomEmail(  ) {
  637.        
  638.         const template = JSON.stringify( { subject : this.state.newPresetSubject, html : this.state.emailValue } )
  639.         const data = {
  640.             template,
  641.             contacts : this.props.tempCustomContacts
  642.  
  643.         }
  644.         this.props.createCustomEmail( this.props.eventId, data )
  645.     }
  646.     editPresetEmail( orgId, emailId, contacts ){
  647.         const template = JSON.stringify( { subject : this.state.subjectEditPreset, html : this.state.emailValue } )
  648.         let data ={}
  649.         if( contacts ){
  650.             data = {
  651.                 template,
  652.                 contacts
  653.             }
  654.         }else{
  655.             data = {
  656.                 template,
  657.  
  658.             }
  659.         }
  660.         this.props.updateEmail( orgId, emailId, data )
  661.         .then( ( email ) => {
  662.             this.setState( { contacts : email.data.contacts } )
  663.         } );
  664.     }
  665.  
  666.     createDefaultEmail() {
  667.         this.setState( { ready: false } );
  668.         this.props.createEmail( this.props.eventId, this.props.hook.id, true )
  669.         .then( r =>  {
  670.             const newState = [ ...this.state.disableSave ];
  671.             newState.unshift( true );
  672.             this.emails.data.unshift( JSON.parse( JSON.stringify( r.data ) ) );
  673.             this.setState( { disableSave: newState, ready:true } )
  674.         } )
  675.     }
  676.    
  677.  
  678.     render() {
  679.         console.log( this.state )
  680.         const { ready } = this.state;
  681.         if( !ready ) return <KMBLoader rows={ 20 } />
  682.         const emails = this.emails.data;
  683.         const { hook } = this.props;
  684.         let columns = {
  685.             cosmetic: {
  686.                 name: ''
  687.             },
  688.             label: {
  689.                 name: 'Contact'
  690.             },
  691.             actions: {
  692.                 name: ''
  693.             }
  694.         };
  695.  
  696.         return(
  697.             <div className="form-container">
  698.                 <div className="form-container-header">
  699.                     {this.props.isHook ?
  700.                     // ITS A HOOK
  701.                         <React.Fragment>
  702.                             <h3 className="left-area col-sm-6"><span>Hook:</span> { hook.hookLabel }</h3>
  703.                             <div className="right-area col-sm-6 text-right">
  704.                                 <button type="button" className="btn dark create-blank-email" onClick={ this.createEmail }><span className="icon-add-1"></span>Create Blank Email</button>
  705.                                 <button type="button" className="btn dark create-default-email" onClick={ this.createDefaultEmail }><span className="icon-add-1"></span>Create Default Email</button>
  706.                             </div>
  707.                         </React.Fragment>:
  708.                         <React.Fragment>
  709.                             {this.props.mode === "edit" ?
  710.                                 <h3 className="left-area col-sm-6"><span>Preset Email:</span> { hook.name}</h3> :
  711.                                 this.props.mode === "create" ?
  712.                                     <div>
  713.                                         <h2 className="left-area col-sm-12" style={{ paddingTop : 20 }}><span>Title</span> </h2>
  714.                                         <div className = "left-area col-sm-12" >
  715.                                             <div className="form-group">
  716.                                                 <div className="kmb-text" style={{  paddingBottom : 30 }}>
  717.                                                     <input
  718.                                                         className={ `form-control` }
  719.                                                         type="text"
  720.                                                         placeholder = "Enter Preset Email's title"
  721.                                                         onChange = {( e ) => this.setState( { titleValue : e.target.value } )}
  722.                                                     />
  723.                                                 </div>
  724.                                             </div>
  725.                                         </div>
  726.                                     </div> :
  727.                                     null
  728.                                    
  729.  
  730.  
  731.                                
  732.                             }
  733.                         </React.Fragment>
  734.                     }
  735.                 </div>
  736.                 {this.props.isHook ?
  737.                 // IS A HOOK
  738.                     <React.Fragment>
  739.                         { emails.map( ( e, i ) => {
  740.                             const pos = this.props.innerHook.emails.data.map( x=>x.id === e.id ).indexOf( true )
  741.                             const stateEmail = this.props.innerHook.emails.data[ pos ];
  742.                             if( !stateEmail ) {return ;}// email has been deleted
  743.                             const contacts = stateEmail.contacts;
  744.                             let subjectValue = e.template.subject
  745.                             return (
  746.                                 <div key={ i } className="kmb-hooks-actions-row">
  747.                                     <div className="email-header">
  748.                                         <h4>Email ID: { e.id }</h4>
  749.                                         {this.deleteEmail( e, i )}
  750.                                     </div>
  751.                                     <div>
  752.                                         <h2 style={{ paddingTop : 20 }}><span>Subject</span> </h2>
  753.                                         <div style={{ width : "100%" }} >
  754.                                             <div className="form-group">
  755.                                                 <div className="kmb-text" style={{  paddingBottom : 30 }}>
  756.                                                     <input
  757.                                                         className={ `form-control` }
  758.                                                         type="text"
  759.                                                         value= {subjectValue|| ""}
  760.                                                         placeholder = "Enter Preset Email's subject"
  761.                                                         onChange={event => this.handleChange( event, e )}
  762.                                                     />
  763.                                                 </div>
  764.                                             </div>
  765.                                         </div>
  766.                                     </div>
  767.                                     <p>Global Variables: <span className="kmb-hooks-actions-available-variables">{this.prepareVars()}</span></p>
  768.                                     {this.prepareSpecificVars( e )}
  769.                                     <KMBEditor
  770.                                         placeholder={ `Type the content of the email. Use any variables you want, for dynamic injection.` }
  771.                                         rows={ 50 }
  772.                                         value={ e.template.html }
  773.                                         onChange={( data ) =>this.emailTemplateChanged( i, data )}
  774.                                     />
  775.  
  776.                                     <div className="hook-contacts">
  777.                                         <div className="hook-contacts-header tab-header" style={{ marginTop:15 }}>
  778.                                             <div className="left-area col-sm-6">
  779.  
  780.                                             </div>
  781.                                             <div className="right-area col-sm-6">
  782.                                                 <button type="button" className="btn dark rounded" onClick={ () => this.props.contactModal( this.props.eventId, hook.id, e.id, e, "createContact", false, this.props.innerHook, true, false ) }><span className="icon-add-1"></span>Add Contact</button>
  783.                                                 <button type="submit" style={{ marginLeft:10 }} disabled={this.state.disableSave[ i ]} className="btn save rounded" onClick={()=>this.submitEmails( e.id, i )}>Save Email</button>
  784.                                             </div>
  785.                                         </div>
  786.                                         <Table
  787.                                             id={ 'sd' }
  788.                                             columns={ columns }
  789.                                             items={ contacts }
  790.                                             onRender={ this.onRender}
  791.                                             containerClassName={ `table-container table-responsive` }
  792.                                         />
  793.                                     </div>
  794.                                 </div>
  795.                             )
  796.                         } ) }
  797.                     </React.Fragment> :
  798.                     // ITS NOT A HOOK AND IS EDIT PRESET EMAIL
  799.                     <React.Fragment>
  800.                        
  801.                         {this.props.mode === "edit" ?
  802.                             <div key={ this.props.emails.data[ 0 ] } className="kmb-hooks-actions-row">
  803.                                 <div className="email-header">
  804.                                     <h4>Email ID: { this.props.emails.data[ 0 ].id }</h4>
  805.                                 </div>
  806.                                 <div>
  807.                                     <h2 style={{ paddingTop : 20 }}><span>Subject</span> </h2>
  808.                                     <div style={{ width : "100%" }}>
  809.                                         <div className="form-group">
  810.                                             <div className="kmb-text" style={{  paddingBottom : 30 }}>
  811.                                                 <input
  812.                                                     className={ `form-control` }
  813.                                                     type="text"
  814.                                                     value = {this.state.subjectEditPreset || ""}
  815.                                                     placeholder = "Enter Preset Email's subject"
  816.                                                     onChange = {( e ) => this.setState( { subjectEditPreset : e.target.value } )}
  817.                                                 />
  818.                                             </div>
  819.                                         </div>
  820.                                     </div>
  821.                                 </div>
  822.                                 <p>Global Variables: <span className="kmb-hooks-actions-available-variables">{this.prepareVarsFromProps()}</span></p>
  823.                                 {/* {this.prepareSpecificVars( this.props.emails.data[ 0 ] )} */}
  824.                                 <KMBEditor
  825.                                     placeholder={ `Type the content of the email. Use any variables you want, for dynamic injection.` }
  826.                                     rows={ 50 }
  827.                                     value={ this.props.emails.data[ 0 ].template.html }
  828.                                     onChange={( data ) =>this.presetEmailChanged( data )}
  829.  
  830.                                 />
  831.  
  832.                                 <div className="hook-contacts">
  833.                                     <div className="hook-contacts-header tab-header" style={{ marginTop:15 }}>
  834.                                         <div className="left-area col-sm-6">
  835.  
  836.                                         </div>
  837.                                         <div className="right-area col-sm-6">
  838.                                             <button type="button" className="btn dark rounded" onClick={ () => this.props.contactModal( this.props.orgId, hook.id, this.props.emails.data[ 0 ].id, this.props.emails.data[ 0 ], "createContact", false, this.props.innerHook, false, "edit" ) }><span className="icon-add-1"></span>Add Contact</button>
  839.  
  840.                                             <button type="submit" style={{ marginLeft:10 }} disabled={false} className="btn save rounded" onClick={()=> this.editPresetEmail( this.props.orgId, this.props.emails.data[ 0 ].id )}>Save Email</button>
  841.                                         </div>
  842.                                     </div>
  843.                                     <Table
  844.                                         id={ 'contacts' }
  845.                                         columns={ columns }
  846.                                         items={ this.state.contacts || [] }
  847.                                         onRender={ this.onRender}
  848.                                         containerClassName={ `table-container table-responsive` }
  849.                                     />
  850.                                 </div>
  851.                             </div> :
  852.                             // ITS CREATE PRESET EMAIL OR CUSTOM EMAIL
  853.                             <div>
  854.                                 <React.Fragment>
  855.                                     <div key={ 1 } className="kmb-hooks-actions-row">
  856.                                         <div>
  857.                                             <h2 style={{ paddingTop : 20 }}><span>Subject</span> </h2>
  858.                                             <div style={{ width : "100%" }} >
  859.                                                 <div className="form-group">
  860.                                                     <div className="kmb-text" style={{  paddingBottom : 30 }}>
  861.                                                         <input
  862.                                                             className={ `form-control` }
  863.                                                             type="text"
  864.                                                             placeholder = "Enter Preset Email's subject"
  865.                                                             onChange = {( e ) => this.setState( { newPresetSubject : e.target.value } )}
  866.                                                         />
  867.                                                     </div>
  868.                                                 </div>
  869.                                             </div>
  870.                                         </div>
  871.                                         <p>Global Variables: <span className="kmb-hooks-actions-available-variables">{this.prepareVarsFromProps()}</span></p>
  872.                                
  873.                                         <KMBEditor
  874.                                             placeholder={ `Type the content of the email. Use any variables you want, for dynamic injection.` }
  875.                                             rows={ 50 }
  876.                                             onChange={( data ) =>this.setState( { emailValue : data } )}   
  877.                                             value= {this.state.emailValue}
  878.                                         />
  879.                                         <div className="hook-contacts">
  880.                                             <div className="hook-contacts-header tab-header" style={{ marginTop:15 }}>
  881.                                                 <div className="left-area col-sm-6">
  882.  
  883.                                                 </div>
  884.                                                 <div className="right-area col-sm-6">
  885.                                                     <button type="button" className="btn dark rounded" onClick={ () => this.props.contactModal( this.props.orgId, 1, 1, { id :1, contacts:[] }, "createContact", false, this.props.innerHook, false, "create", this.props.eventId, this.props.mode ) }><span className="icon-add-1"></span>Add Contact</button>
  886.                                                     {this.props.mode !== "custom" && <button type="submit" style={{ marginLeft:10 }} disabled={false} className="btn save rounded"
  887.                                                         onClick={() =>this.createNewPresetEmail()} >
  888.                                                         Save Email
  889.                                                     </button>
  890.                                                     }
  891.                                                 </div>
  892.                                             </div>
  893.                                             <Table
  894.                                                 id={ 'contacts' }
  895.                                                 columns={ columns }
  896.                                                 items={  this.props.mode === "custom" ? this.props.tempCustomContacts :this.props.tempContacts  }
  897.                                                 onRender={ this.onRender}
  898.                                                 containerClassName={ `table-container table-responsive` }
  899.                                             />
  900.                                         </div>
  901.                                     </div>
  902.                                 </React.Fragment>
  903.                             </div>
  904.                         }
  905.                     </React.Fragment>
  906.                 }
  907.                 <div className="form-group text-right submit-container" style={{ marginTop: 30 }}>
  908.                     {this.props.mode === "custom" ?
  909.                         <button type="submit" style={{ marginLeft:10 }} disabled={false} className="btn save rounded"
  910.                             onClick={() => this.props.mode=== "custom" ? this.createCustomEmail(  ):this.createNewPresetEmail()} >
  911.                                                         Send Email
  912.                         </button>:
  913.                         <button type="button" className="btn cancel" onClick={this.cancelEdit}>Go back</button>
  914.                     }
  915.  
  916.                 </div>
  917.             </div>
  918.         )
  919.     }
  920. }
  921.  
  922. EmailHooks.propTypes = {
  923.     emails : PropTypes.object,
  924.     event: PropTypes.object,
  925.     getHookEmails: PropTypes.func,
  926.     hook: PropTypes.object,
  927.     contactModal: PropTypes.func,
  928.     eventId: PropTypes.number,
  929.     saveEmail: PropTypes.func,
  930.     createEmail: PropTypes.func,
  931.     action: PropTypes.string,
  932.     innerHook: PropTypes.object,
  933.     cancelEdit: PropTypes.func,
  934.     deleteItem: PropTypes.func,
  935.     resetEmail : PropTypes.func,
  936.     isHook : PropTypes.bool,
  937.     mode : PropTypes.string,
  938.     globalVars : PropTypes.any,
  939.     orgId: PropTypes.any,
  940.     createPresetEmail : PropTypes.func,
  941.     tempContacts : PropTypes.any,
  942.     updateEmail : PropTypes.func,
  943.     accessEvents :PropTypes.any,
  944.     loadPresetEmails :PropTypes.func,
  945.     createCustomEmail : PropTypes.func,
  946.     tempCustomContacts : PropTypes.any,
  947.     deleteContact : PropTypes.func,
  948.     presetEmailId : PropTypes.any
  949. }
  950. const mapStateToProps = ( state, ownProps ) => {
  951.     return {
  952.         accessEvents: state.appuser.data.accessEvents,
  953.         presetList : state.api.events.presetEmails.data,
  954.         globalVars : state.api.events.presetEmails.meta.available_vars,
  955.         tempContacts : state.api.events.tempContacts,
  956.         tempCustomContacts : state.api.events.tempCustomContacts
  957.     }
  958.  
  959. }
  960.  
  961. const mapDispatchToProps = ( dispatch ) => {
  962.     return {
  963.         loadPresetEmails : ( eventId ) => {
  964.             dispatch( getPresetEmails( eventId ) );
  965.  
  966.         },
  967.         createPresetEmail: ( orgId, data ) => {
  968.             dispatch( createPresetEmail( orgId, data  ) )
  969.         },
  970.         updateEmail : ( orgId, presetEmailId, data ) => {
  971.             return dispatch( updatePresetEmail( orgId, presetEmailId, data ) )
  972.         },
  973.         deleteContact : ( key, mode ) => {
  974.             dispatch( deleteContact ( key, mode ) )
  975.         },
  976.         createCustomEmail : ( eventId, data )=>{
  977.             return dispatch ( createCustomEmail( eventId, data ) )
  978.             .then( ( ) => {
  979.                 dispatch( addNotification( "Email has been sent", "success" ) );
  980.                 return null;
  981.             } )
  982.  
  983.         }
  984.        
  985.     }
  986. }
  987. export default connect( mapStateToProps, mapDispatchToProps )( EmailHooks )
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top