Merge pull request #4 from Yoctol/cta_text

support cta_text
Yoctol · May 14, 2018 · 5e9ecfa · 5e9ecfa
2 parents de7be4e + 3285edb
commit 5e9ecfa
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -52,6 +52,30 @@ static propTypes = {
   color: PropTypes.string,
   size: PropTypes.string,
   enforceLogin: PropTypes.bool,
+  ctaText: PropTypes.oneOf([
+    'GET_THIS_IN_MESSENGER',
+    'RECEIVE_THIS_IN_MESSENGER',
+    'SEND_THIS_TO_ME',
+    'GET_CUSTOMER_ASSISTANCE',
+    'GET_CUSTOMER_SERVICE',
+    'GET_SUPPORT',
+    'LET_US_CHAT',
+    'SEND_ME_MESSAGES',
+    'ALERT_ME_IN_MESSENGER',
+    'SEND_ME_UPDATES',
+    'MESSAGE_ME',
+    'LET_ME_KNOW',
+    'KEEP_ME_UPDATED',
+    'TELL_ME_MORE',
+    'SUBSCRIBE_IN_MESSENGER',
+    'SUBSCRIBE_TO_UPDATES',
+    'GET_MESSAGES',
+    'SUBSCRIBE',
+    'GET_STARTED_IN_MESSENGER',
+    'LEARN_MORE_IN_MESSENGER',
+    'GET_STARTED',
+    'SEND_TO_MESSENGER',
+  ]),
   autoLogAppEvents: PropTypes.bool,
   xfbml: PropTypes.bool,
   version: PropTypes.string,
@@ -64,6 +88,7 @@ static defaultProps = {
   color: 'blue',
   size: 'large',
   enforceLogin: false,
+  ctaText: undefined,
   autoLogAppEvents: true,
   xfbml: true,
   version: '2.11',

diff --git a/src/MessengerSendToMessenger.js b/src/MessengerSendToMessenger.js
@@ -10,6 +10,30 @@ export default class MessengerSendToMessenger extends Component {
     color: PropTypes.string,
     size: PropTypes.string,
     enforceLogin: PropTypes.bool,
+    ctaText: PropTypes.oneOf([
+      'GET_THIS_IN_MESSENGER',
+      'RECEIVE_THIS_IN_MESSENGER',
+      'SEND_THIS_TO_ME',
+      'GET_CUSTOMER_ASSISTANCE',
+      'GET_CUSTOMER_SERVICE',
+      'GET_SUPPORT',
+      'LET_US_CHAT',
+      'SEND_ME_MESSAGES',
+      'ALERT_ME_IN_MESSENGER',
+      'SEND_ME_UPDATES',
+      'MESSAGE_ME',
+      'LET_ME_KNOW',
+      'KEEP_ME_UPDATED',
+      'TELL_ME_MORE',
+      'SUBSCRIBE_IN_MESSENGER',
+      'SUBSCRIBE_TO_UPDATES',
+      'GET_MESSAGES',
+      'SUBSCRIBE',
+      'GET_STARTED_IN_MESSENGER',
+      'LEARN_MORE_IN_MESSENGER',
+      'GET_STARTED',
+      'SEND_TO_MESSENGER',
+    ]),
     autoLogAppEvents: PropTypes.bool,
     xfbml: PropTypes.bool,
     version: PropTypes.string,
@@ -22,6 +46,7 @@ export default class MessengerSendToMessenger extends Component {
     color: 'blue',
     size: 'large',
     enforceLogin: false,
+    ctaText: undefined,
     autoLogAppEvents: true,
     xfbml: true,
     version: '2.11',
@@ -69,11 +94,22 @@ export default class MessengerSendToMessenger extends Component {
   }
 
   createMarkup() {
-    const { pageId, appId, dataRef, color, size, enforceLogin } = this.props;
+    const {
+      pageId,
+      appId,
+      dataRef,
+      color,
+      size,
+      enforceLogin,
+      ctaText,
+    } = this.props;
 
     const dataRefAttribute =
       dataRef !== undefined ? `data-ref="${dataRef}"` : '';
 
+    const ctaTextAttribute =
+      ctaText !== undefined ? `cta_text="${ctaText}"` : '';
+
     return {
       __html: `<div
         class="fb-send-to-messenger"
@@ -83,6 +119,7 @@ export default class MessengerSendToMessenger extends Component {
         size="${size}"
         enforce_login="${enforceLogin}"
         ${dataRefAttribute}
+        ${ctaTextAttribute}
       ></div>`,
     };
   }

diff --git a/src/__tests__/MessengerSendToMessenger.spec.js b/src/__tests__/MessengerSendToMessenger.spec.js
@@ -87,6 +87,22 @@ describe('<MessengerSendToMessenger />', () => {
     ).toBe('true');
   });
 
+  it('render cta_text to DOM element', () => {
+    const wrapper = mount(
+      <MessengerSendToMessenger
+        pageId="<PAGE_ID>"
+        appId="<APP_ID>"
+        ctaText="GET_THIS_IN_MESSENGER"
+      />
+    );
+    expect(
+      wrapper
+        .render()
+        .find('.fb-send-to-messenger')
+        .prop('cta_text')
+    ).toBe('GET_THIS_IN_MESSENGER');
+  });
+
   it('define fbAsyncInit and call loadSdkAsynchronously when facebook-jssdk does not exist', () => {
     mount(<MessengerSendToMessenger pageId="<PAGE_ID>" appId="<APP_ID>" />);