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

Comparing version 0.1.0 to 0.2.0

package.json

 {
   "name": "@personare/react-freshdesk-widget",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A component of React for use the Freshdesk Widget",
@@ -9,3 +9,3 @@ "main": "dist/react-freshdesk-widget.js",
     "dist": "webpack -p --config .storybook/webpack.dist.config.js",
-    "ghpages": "make ghp-storybook",
+    "ghpages": "storybook-to-ghpages",
     "lint": "eslint src",
@@ -27,2 +27,3 @@ "prepush": "npm run lint && npm run test",
     "@kadira/storybook": "^1.38.0",
+    "@kadira/storybook-deployer": "^1.0.0",
     "babel-core": "^6.10.4",
@@ -29,0 +30,0 @@ "babel-loader": "^6.2.4",

README.md

@@ -13,2 +13,6 @@ # 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)
 
+## Demo
+
+[Check it live :)](https://personare.github.io/react-freshdesk-widget)
+
 ## Installation 
@@ -15,0 +19,0 @@

src/FreshdeskWidget.js

@@ -7,15 +7,13 @@ import React, { Component, PropTypes } from 'react';
 
-        this.state = {
-            rendered: false
-        };
+        this.renderPopUp = this.renderPopUp.bind(this);
+        this.renderWithChildren = this.renderWithChildren.bind(this);
+        this.renderIncorporated = this.renderIncorporated.bind(this);
     }
 
-    componentDidMount() {
+    componentWillUnmount() {
         const { type } = this.props;
 
-        this.getFreshdeskWidgetSDK(() => {
-            if (type === 'pop-up') {
-                this.renderPopUp();
-            }
-        });
+        if (type === 'pop-up') {
+            window.FreshWidget.destroy();
+        }
     }
@@ -28,3 +26,2 @@
         script.type = 'text/javascript';
-        script.async = true;
         script.onload = callback;
@@ -35,10 +32,56 @@
 
-    getStylesheet() {
-        const style = document.createElement('link');
-        style.href = 'https://s3.amazonaws.com/assets.freshdesk.com/widget/freshwidget.css';
-        style.rel = 'stylesheet';
-        style.media = 'screen, projection';
-        document.body.appendChild(style);
+    getAlignmentByPositionLabel(label) {
+        const alignments = {
+            left: 4,
+            right: 2,
+            top: 1,
+            bottom: 3
+        };
+
+        return alignments[label];
     }
 
+    renderWithChildren() {
+        const {
+            url,
+            formTitle,
+            formHeight,
+            submitThanks
+        } = this.props;
+
+        const queryString = `&widgetType=popup&formTitle=${formTitle}&submitThanks=${submitThanks}`;
+
+        const params = {
+            utf8: '✓',
+            widgetType: 'popup',
+            url,
+            formTitle,
+            formHeight,
+            submitThanks,
+            queryString,
+            // thanks freshdesk for this
+            offset: '-3000px'
+        };
+
+        const handleClick = () => {
+            this.getFreshdeskWidgetSDK(() => {
+                window.FreshWidget.init('', params);
+
+                setTimeout(() => {
+                    window.FreshWidget.create();
+                    window.FreshWidget.show();
+                }, 100);
+            });
+        };
+
+        const childrenWithHandleClick = React.cloneElement(
+            this.props.children,
+            {
+                onClick: handleClick.bind(this)
+            }
+        );
+
+        return <div>{childrenWithHandleClick}</div>;
+    }
+
     renderPopUp() {
@@ -59,9 +102,8 @@ const {
 
-        const alignments = { left: 4, right: 2, top: 1, bottom: 3 };
+        const queryString = `&widgetType=popup&formTitle=${formTitle}&submitThanks=${submitThanks}`;
 
         const params = {
-            queryString: `&widgetType=popup&formTitle=${formTitle}&submitThanks=${submitThanks}`,
             utf8: '✓',
             widgetType: 'popup',
-            alignment: alignments[buttonPosition],
+            alignment: this.getAlignmentByPositionLabel(buttonPosition),
             offset: buttonOffset,
@@ -76,44 +118,53 @@ buttonBg: buttonBackgroundColor,
             formHeight,
-            formTitle
+            formTitle,
+            queryString
         };
 
-        window.FreshWidget.init('', params);
+        this.getFreshdeskWidgetSDK(() => window.FreshWidget.init('', params));
 
-        this.setState({
-            rendered: true
-        });
+        return <div id="freshdesk"></div>;
     }
 
+    renderIncorporated() {
+        const { url, formTitle, formHeight, submitThanks } = this.props;
+
+        const widgetUrl = `${url}/widgets/feedback_widget/new?`;
+
+        const queryString = [
+            'widgetType=embedded',
+            'screenshot=no',
+            `formTitle=${formTitle}`,
+            `formHeight=${formHeight}`,
+            `submitThanks=${submitThanks}`
+        ].join('&');
+
+        return (
+            <div>
+                <iframe
+                    className="freshwidget-embedded-form"
+                    frameBorder="0"
+                    id="freshwidget-embedded-form"
+                    src={widgetUrl + queryString}
+                    scrolling="no"
+                    height={formHeight}
+                    width="100%"
+                />
+            </div>
+        );
+    }
+
     render() {
-        const { type, url, formTitle, formHeight, submitThanks } = this.props;
+        const { type } = this.props;
 
         if (type === 'incorporated') {
-            this.getStylesheet();
+            return this.renderIncorporated();
+        }
 
-            const widgetUrl = `${url}/widgets/feedback_widget/new?`;
+        const hasChildElement = (React.Children.count(this.props.children) >= 1);
 
-            const queryString = [
-                'widgetType=embedded',
-                'screenshot=no',
-                `formTitle=${formTitle}`,
-                `formHeight=${formHeight}`,
-                `submitThanks=${submitThanks}`
-            ].join('&');
-
-            return (
-                <div>
-                    <iframe
-                        className="freshwidget-embedded-form"
-                        frameBorder="0"
-                        id="freshwidget-embedded-form"
-                        src={widgetUrl + queryString}
-                        scrolling="no"
-                        height="500px"
-                        width="100%"
-                    />
-                </div>
-            );
+        if (hasChildElement) {
+            return this.renderWithChildren();
         }
 
-        return <div id="freshwidget"></div>;
+        return this.renderPopUp();
     }
@@ -135,3 +186,7 @@ }
     submitThanks: PropTypes.string,
-    formHeight: PropTypes.string
+    formHeight: PropTypes.string,
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node
+    ])
 };
@@ -149,5 +204,6 @@
     buttonPosition: 'top',
-    buttonOffset: '235px'
+    buttonOffset: '235px',
+    children: null
 };
 
 export default FreshdeskWidget;

src/FreshdeskWidget.story.js

@@ -6,15 +6,41 @@ import React from 'react';
 
-const stories = storiesOf('FreshdeskWidget', module);
+const supportUrl = 'https://support.freshdesk.com';
 
-stories.add('With pop-up on top position', () => (
+storiesOf('Incorporated', module)
+.add('With default properties', () => (
     <FreshdeskWidget
-        url="https://support.freshdesk.com"
-        type="pop-up"
+        url={supportUrl}
     />
-));
+))
 
-stories.add('Incorpored', () => (
+.add('(formTitle) property', () => (
     <FreshdeskWidget
-        url="https://support.freshdesk.com"
+        url={supportUrl}
+        formTitle="This is a custom title"
     />
+))
+
+.add('(formHeight) property', () => (
+    <FreshdeskWidget
+        url={supportUrl}
+        formHeight="300px"
+    />
+))
+
+.add('(submitThanks) property', () => (
+    <FreshdeskWidget
+        url={supportUrl}
+        submitThanks="Thank you <3"
+    />
 ));
+
+storiesOf('Pop-up', module)
+.add('With default button', () => (
+    <FreshdeskWidget url={supportUrl} type="pop-up" />
+))
+
+.add('With custom button', () => (
+    <FreshdeskWidget url={supportUrl} type="pop-up">
+        <button>Send Feedback</button>
+    </FreshdeskWidget>
+));

tests/FreshdeskWidget.test.js

 import React from 'react';
 import { expect } from 'chai';
-import { mount } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import { describe, it, before } from 'mocha';
@@ -9,6 +9,52 @@
 describe('<FreshdeskWidget />', function FreshdeskWidgetTests() {
-    it('the state of rendered should be equal false componentDidMount', () => {
-        const wrapper = mount(<FreshdeskWidget url="https://support.freshdesk.com" />);
-        expect(wrapper.state('rendered')).to.be.false;
+    it('should be rendered the child element when type is pop-up', () => {
+        const wrapper = shallow(
+            <FreshdeskWidget url="https://support.freshdesk.com" type="pop-up">
+                <button>Send Feedback</button>
+            </FreshdeskWidget>
+        );
+
+        expect(wrapper.containsMatchingElement([
+            <button>Send Feedback</button>
+        ])).to.equal(true);
     });
+
+    it('should be rendered an iframe when type is incorporated', () => {
+        const wrapper = shallow(
+            <FreshdeskWidget url="https://support.freshdesk.com" type="incorporated" />
+        );
+
+        expect(wrapper.find('#freshwidget-embedded-form')).to.have.length(1);
+    });
+
+    it('should be rendered an iframe with a correct src', () => {
+        const supportUrl = 'https://support.freshdesk.com';
+
+        const formTitle = "Help here";
+        const formHeight = "200px";
+        const submitThanks = "Fine";
+
+        const wrapper = mount(
+            <FreshdeskWidget
+                url={supportUrl}
+                formTitle={formTitle}
+                formHeight={formHeight}
+                submitThanks={submitThanks}
+            />
+        );
+
+        const mockWidgetUrl = `${supportUrl}/widgets/feedback_widget/new?`;
+
+        const mockQueryString = [
+            'widgetType=embedded',
+            'screenshot=no',
+            `formTitle=${formTitle}`,
+            `formHeight=${formHeight}`,
+            `submitThanks=${submitThanks}`
+        ].join('&');
+
+        expect(
+            wrapper.find('iframe').node.getAttribute('src')
+        ).to.equal(`${mockWidgetUrl}${mockQueryString}`);
+    });
 });

No alert changes

Improved metrics

Total package byte prevSize

159392

increased by1.97%

Lines of code

338

increased by44.44%

Number of lines in readme file

382

increased by1.06%

Worsened metrics

Dev dependency count

22

increased by4.76%

Number of package files

22

decreased by-4.35%

No dependency changes