API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 21st, 2019
92
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 33.21 KB | None | 0 0
raw download clone embed print report
  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 )
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!