@personare/react-freshdesk-widget - npm Package Compare versions

Comparing version 0.2.4 to 0.3.0

dist/react-freshdesk-widget.js

@@ -1,1 +0,1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var r=t("object"==typeof exports?require("react"):e.react);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(this,function(e){return function(e){function t(o){if(r[o])return r[o].exports;var n=r[o]={exports:{},id:o,loaded:!1};return e[o].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),p=r(1),f=o(p),d=function(e){function t(e){n(this,t);var r=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.renderPopUp=r.renderPopUp.bind(r),r.renderWithChildren=r.renderWithChildren.bind(r),r.renderIncorporated=r.renderIncorporated.bind(r),r}return u(t,e),s(t,[{key:"componentWillUnmount",value:function(){function e(){var e=this.props.type;"pop-up"===e&&window.FreshWidget.destroy()}return e}()},{key:"getFreshdeskWidgetSDK",value:function(){function e(e){var t=document.createElement("script");t.src="https://s3.amazonaws.com/assets.freshdesk.com/widget/freshwidget.js",t.type="text/javascript",t.onload=e,document.body.appendChild(t)}return e}()},{key:"getAlignmentByPositionLabel",value:function(){function e(e){var t={left:4,right:2,top:1,bottom:3};return t[e]}return e}()},{key:"renderWithChildren",value:function(){function e(){var e=this,t=this.props,r=t.url,o=t.formTitle,n=t.formHeight,i=t.submitThanks,u="&widgetType=popup&formTitle="+o+"&submitThanks="+i,s={utf8:"✓",widgetType:"popup",url:r,formTitle:o,formHeight:n,submitThanks:i,queryString:u,offset:"-3000px"},p=function(){function t(){e.getFreshdeskWidgetSDK(function(){window.FreshWidget.init("",s),setTimeout(function(){window.FreshWidget.create(),window.FreshWidget.show()},100)})}return t}(),d=f.default.cloneElement(this.props.children,{onClick:p.bind(this)});return f.default.createElement("div",null,d)}return e}()},{key:"renderPopUp",value:function(){function e(){var e=this.props,t=e.url,r=e.buttonType,o=e.buttonText,n=e.buttonColor,i=e.buttonBackgroundColor,u=e.buttonBackgroundImage,s=e.buttonPosition,p=e.buttonOffset,d=e.formTitle,a=e.submitThanks,l=e.formHeight,c="&widgetType=popup&formTitle="+d+"&submitThanks="+a,h={utf8:"✓",widgetType:"popup",alignment:this.getAlignmentByPositionLabel(s),offset:p,buttonBg:i,backgroundImage:u,url:t,buttonType:r,buttonText:o,buttonColor:n,submitThanks:a,formHeight:l,formTitle:d,queryString:c};return this.getFreshdeskWidgetSDK(function(){return window.FreshWidget.init("",h)}),f.default.createElement("div",{id:"freshdesk"})}return e}()},{key:"renderIncorporated",value:function(){function e(){var e=this.props,t=e.url,r=e.formTitle,o=e.formHeight,n=e.submitThanks,i=t+"/widgets/feedback_widget/new?",u=["widgetType=embedded","screenshot=no","formTitle="+r,"formHeight="+o,"submitThanks="+n].join("&");return f.default.createElement("div",null,f.default.createElement("iframe",{className:"freshwidget-embedded-form",frameBorder:"0",id:"freshwidget-embedded-form",src:i+u,scrolling:"no",height:o,width:"100%"}))}return e}()},{key:"render",value:function(){function e(){var e=this.props.type;if("incorporated"===e)return this.renderIncorporated();var t=f.default.Children.count(this.props.children)>=1;return t?this.renderWithChildren():this.renderPopUp()}return e}()}]),t}(p.Component);d.propTypes={url:p.PropTypes.string.isRequired,type:p.PropTypes.oneOf(["pop-up","incorporated"]),buttonType:p.PropTypes.oneOf(["text","image"]),buttonText:p.PropTypes.string,buttonColor:p.PropTypes.string,buttonBackgroundColor:p.PropTypes.string,buttonBackgroundImage:p.PropTypes.string,buttonPosition:p.PropTypes.oneOf(["left","right","top","bottom"]),buttonOffset:p.PropTypes.string,formTitle:p.PropTypes.string,submitThanks:p.PropTypes.string,formHeight:p.PropTypes.string,children:p.PropTypes.oneOfType([p.PropTypes.arrayOf(p.PropTypes.node),p.PropTypes.node])},d.defaultProps={type:"incorporated",formTitle:"Help and support",submitThanks:"Thank you, one of our representatives will respond to you soon! =)",formHeight:"500px",buttonType:"text",buttonText:"Support",buttonColor:"white",buttonBackgroundColor:"#015453",buttonPosition:"top",buttonOffset:"235px",children:null},t.default=d},function(t,r){t.exports=e}])});
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var r=t("object"==typeof exports?require("react"):e.react);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function p(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){var r=[],n=!0,o=!1,i=void 0;try{for(var u,p=e[Symbol.iterator]();!(n=(u=p.next()).done)&&(r.push(u.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{!n&&p.return&&p.return()}finally{if(o)throw i}}return r}return function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),a=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),c=r(2),f=n(c);r(1);var l=function(e){function t(e){i(this,t);var r=u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.renderPopUp=r.renderPopUp.bind(r),r.renderWithChildren=r.renderWithChildren.bind(r),r.renderIncorporated=r.renderIncorporated.bind(r),r}return p(t,e),a(t,[{key:"componentWillMount",value:function(){function e(){var e=document.createElement("script");e.src="https://s3.amazonaws.com/assets.freshdesk.com/widget/freshwidget.js",e.type="text/javascript",document.body.appendChild(e)}return e}()},{key:"componentWillUnmount",value:function(){function e(){var e=this.props.type;"pop-up"===e&&window.FreshWidget&&window.FreshWidget.destroy()}return e}()},{key:"getAlignmentByPositionLabel",value:function(){function e(e){var t={left:4,right:2,top:1,bottom:3};return t[e]}return e}()},{key:"renderWithChildren",value:function(){function e(){var e=this.props,t=e.url,r=e.formTitle,n=e.formHeight,i=e.submitThanks,u=e.autofill,p=Object.entries(u).map(function(e){var t=s(e,2),r=t[0],n=t[1];return"helpdesk_ticket["+r+"]="+n}),a=["&widgetType=popup","formTitle="+r,"submitThanks="+i].concat(o(p)).join("&"),c={utf8:"✓",widgetType:"popup",url:t,formTitle:r,formHeight:n,submitThanks:i,queryString:a,offset:"-3000px"},l=function(){function e(){window.FreshWidget.init("",c),setTimeout(function(){window.FreshWidget.create(),window.FreshWidget.show()},100)}return e}(),d=f.default.cloneElement(this.props.children,{onClick:l.bind(this)});return f.default.createElement("div",null,d)}return e}()},{key:"renderPopUp",value:function(){function e(){var e=this.props,t=e.url,r=e.buttonType,n=e.buttonText,i=e.buttonColor,u=e.buttonBackgroundColor,p=e.buttonBackgroundImage,a=e.buttonPosition,c=e.buttonOffset,l=e.formTitle,d=e.submitThanks,y=e.formHeight,h=e.autofill,b=Object.entries(h).map(function(e){var t=s(e,2),r=t[0],n=t[1];return"helpdesk_ticket["+r+"]="+n}),m=["&widgetType=popup","formTitle="+l,"submitThanks="+d].concat(o(b)).join("&"),g={utf8:"✓",widgetType:"popup",alignment:this.getAlignmentByPositionLabel(a),offset:c,buttonBg:u,backgroundImage:p,url:t,buttonType:r,buttonText:n,buttonColor:i,submitThanks:d,formHeight:y,formTitle:l,queryString:m};return window.FreshWidget.init("",g),f.default.createElement("div",{id:"freshdesk"})}return e}()},{key:"renderIncorporated",value:function(){function e(){var e=this.props,t=e.url,r=e.formTitle,n=e.formHeight,i=e.submitThanks,u=e.autofill,p=t+"/widgets/feedback_widget/new?",a=Object.entries(u).map(function(e){var t=s(e,2),r=t[0],n=t[1];return"helpdesk_ticket["+r+"]="+n}),c=["widgetType=embedded","screenshot=no","formTitle="+r,"formHeight="+n,"submitThanks="+i].concat(o(a)).join("&");return f.default.createElement("div",null,f.default.createElement("iframe",{className:"freshwidget-embedded-form",frameBorder:"0",id:"freshwidget-embedded-form",src:p+c,scrolling:"no",height:n,width:"100%"}))}return e}()},{key:"render",value:function(){function e(){var e=this.props.type;if("incorporated"===e)return this.renderIncorporated();var t=f.default.Children.count(this.props.children)>=1;return t?this.renderWithChildren():this.renderPopUp()}return e}()}]),t}(c.Component);l.propTypes={url:c.PropTypes.string.isRequired,type:c.PropTypes.oneOf(["pop-up","incorporated"]),buttonType:c.PropTypes.oneOf(["text","image"]),buttonText:c.PropTypes.string,buttonColor:c.PropTypes.string,buttonBackgroundColor:c.PropTypes.string,buttonBackgroundImage:c.PropTypes.string,buttonPosition:c.PropTypes.oneOf(["left","right","top","bottom"]),buttonOffset:c.PropTypes.string,formTitle:c.PropTypes.string,submitThanks:c.PropTypes.string,formHeight:c.PropTypes.string,autofill:c.PropTypes.objectOf(c.PropTypes.string),children:c.PropTypes.oneOfType([c.PropTypes.arrayOf(c.PropTypes.node),c.PropTypes.node])},l.defaultProps={type:"incorporated",formTitle:"Help and support",submitThanks:"Thank you, one of our representatives will respond to you soon! =)",formHeight:"500px",buttonType:"text",buttonText:"Support",buttonColor:"white",buttonBackgroundColor:"#015453",buttonPosition:"top",buttonOffset:"235px",autofill:{},children:null},t.default=l},function(e,t){"use strict";var r=Function.bind.call(Function.call,Array.prototype.reduce),n=Function.bind.call(Function.call,Object.prototype.propertyIsEnumerable),o=Function.bind.call(Function.call,Array.prototype.concat),i=Reflect.ownKeys;Object.values||(Object.values=function(){function e(e){return r(i(e),function(t,r){return o(t,"string"==typeof r&&n(e,r)?[e[r]]:[])},[])}return e}()),Object.entries||(Object.entries=function(){function e(e){return r(i(e),function(t,r){return o(t,"string"==typeof r&&n(e,r)?[[r,e[r]]]:[])},[])}return e}())},function(t,r){t.exports=e}])});

package.json

 {
   "name": "@personare/react-freshdesk-widget",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "A component of React for use the Freshdesk Widget",
@@ -5,0 +5,0 @@ "main": "dist/react-freshdesk-widget.js",

README.md

@@ -20,3 +20,3 @@ # react-freshdesk-widget [![Build Status](https://scrutinizer-ci.com/g/Personare/react-freshdesk-widget/badges/build.png?b=master&s=6b40b4cc955a743a38efda66164a0ee2659d945f)](https://scrutinizer-ci.com/g/Personare/react-freshdesk-widget/build-status/master)
 ```bash
-yarn @personare/react-freshdesk-widget
+yarn add @personare/react-freshdesk-widget
 ```
@@ -76,2 +76,3 @@
 * [`buttonBackgroundImage`](#buttonBackgroundImageProperty) - *only if the type property are equal 'pop-up'*
+* [`autofill`](#autofillProperty) - *allows autofilling fields*
 
@@ -383,2 +384,25 @@
 
+<a name="autofillProperty"></a>
+
+#### `autofill` - (optional)
+
+If you want to fill any of the fields in with data from your application you
+can do that here. This doesn't work for custom fields.
+
+For example:
+
+```js
+...
+render() {
+    return (
+        <FreshdeskWidget 
+            url="https://support.freshdesk.com"
+            type="pop-up"
+            autofill={{ requester: user.email }}
+        />
+    );
+}
+...
+```
+
 ## Development
@@ -385,0 +409,0 @@

src/FreshdeskWidget.js

 import React, { Component, PropTypes } from 'react';
 
+require('./object-values-entries-polyfill');
+
 class FreshdeskWidget extends Component {
@@ -12,6 +14,13 @@ constructor(props) {
 
+    componentWillMount() {
+        const script = document.createElement('script');
+        script.src = 'https://s3.amazonaws.com/assets.freshdesk.com/widget/freshwidget.js';
+        script.type = 'text/javascript';
+        document.body.appendChild(script);
+    }
+
     componentWillUnmount() {
         const { type } = this.props;
 
-        if (type === 'pop-up') {
+        if (type === 'pop-up' && window.FreshWidget) {
             window.FreshWidget.destroy();
@@ -21,12 +30,2 @@ }
 
-    getFreshdeskWidgetSDK(callback) {
-        const script = document.createElement('script');
-
-        script.src = 'https://s3.amazonaws.com/assets.freshdesk.com/widget/freshwidget.js';
-        script.type = 'text/javascript';
-        script.onload = callback;
-
-        document.body.appendChild(script);
-    }
-
     getAlignmentByPositionLabel(label) {
@@ -48,7 +47,16 @@ const alignments = {
             formHeight,
-            submitThanks
+            submitThanks,
+            autofill,
         } = this.props;
 
-        const queryString = `&widgetType=popup&formTitle=${formTitle}&submitThanks=${submitThanks}`;
+        const autofills = Object.entries(autofill).
+            map(([field, value]) => (`helpdesk_ticket[${field}]=${value}`));
 
+        const queryString = [
+            '&widgetType=popup',
+            `formTitle=${formTitle}`,
+            `submitThanks=${submitThanks}`,
+            ...autofills,
+        ].join('&');
+
         const params = {
@@ -67,10 +75,7 @@ utf8: '✓',
         const handleClick = () => {
-            this.getFreshdeskWidgetSDK(() => {
-                window.FreshWidget.init('', params);
-
-                setTimeout(() => {
-                    window.FreshWidget.create();
-                    window.FreshWidget.show();
-                }, 100);
-            });
+            window.FreshWidget.init('', params);
+            setTimeout(() => {
+                window.FreshWidget.create();
+                window.FreshWidget.show();
+            }, 100);
         };
@@ -100,7 +105,16 @@
             submitThanks,
-            formHeight
+            formHeight,
+            autofill
         } = this.props;
 
-        const queryString = `&widgetType=popup&formTitle=${formTitle}&submitThanks=${submitThanks}`;
+        const autofills = Object.entries(autofill).
+            map(([field, value]) => (`helpdesk_ticket[${field}]=${value}`));
 
+        const queryString = [
+            '&widgetType=popup',
+            `formTitle=${formTitle}`,
+            `submitThanks=${submitThanks}`,
+            ...autofills,
+        ].join('&');
+
         const params = {
@@ -123,3 +137,3 @@ utf8: '✓',
 
-        this.getFreshdeskWidgetSDK(() => window.FreshWidget.init('', params));
+        window.FreshWidget.init('', params);
 
@@ -130,6 +144,9 @@ return <div id="freshdesk"></div>;
     renderIncorporated() {
-        const { url, formTitle, formHeight, submitThanks } = this.props;
+        const { url, formTitle, formHeight, submitThanks, autofill } = this.props;
 
         const widgetUrl = `${url}/widgets/feedback_widget/new?`;
 
+        const autofills = Object.entries(autofill).
+            map(([field, value]) => (`helpdesk_ticket[${field}]=${value}`));
+
         const queryString = [
@@ -140,3 +157,4 @@ 'widgetType=embedded',
             `formHeight=${formHeight}`,
-            `submitThanks=${submitThanks}`
+            `submitThanks=${submitThanks}`,
+            ...autofills,
         ].join('&');
@@ -190,2 +208,3 @@
     formHeight: PropTypes.string,
+    autofill: PropTypes.objectOf(PropTypes.string),
     children: PropTypes.oneOfType([
@@ -208,2 +227,3 @@ PropTypes.arrayOf(PropTypes.node),
     buttonOffset: '235px',
+    autofill: {},
     children: null
@@ -210,0 +230,0 @@ };

src/FreshdeskWidget.story.js

@@ -34,2 +34,11 @@ import React from 'react';
     />
+))
+
+.add('(autofill) property', () => (
+    <FreshdeskWidget
+        url={supportUrl}
+        submitThanks="Thank you <3"
+        autofill={{ requester: '[e-mail]' }}
+
+    />
 ));
@@ -36,0 +45,0 @@

tests/FreshdeskWidget.test.js

 import React from 'react';
 import { expect } from 'chai';
 import { shallow, mount } from 'enzyme';
-import { describe, it, before } from 'mocha';
+import { describe, it } from 'mocha';
 
@@ -32,5 +32,5 @@ import FreshdeskWidget from './../src/FreshdeskWidget';
 
-        const formTitle = "Help here";
-        const formHeight = "200px";
-        const submitThanks = "Fine";
+        const formTitle = 'Help here';
+        const formHeight = '200px';
+        const submitThanks = 'Fine';
 
@@ -60,2 +60,15 @@ const wrapper = mount(
     });
+
+    it('should automatically fill in fields correctly.', () => {
+        const wrapper = mount(
+            <FreshdeskWidget
+                url="https://support.freshdesk.com"
+                autofill={{ requester: '[e-mail]' }}
+            />
+          );
+
+        expect(
+            wrapper.find('iframe').node.getAttribute('src')
+        ).to.match(/helpdesk_ticket\[requester\]=[e-mail]/);
+    });
 });

No alert changes

Improved metrics

Total package byte prevSize

368106

increased by1.09%

Lines of code

400

increased by17.65%

Number of lines in readme file

426

increased by5.97%

No dependency changes