wix-comments

Comments

• Overview
• Setup
  • Properties
  • Settings
  • Member Auth
• Share
• Style Params
• Page Scroll
• Migrating to Version 3

Overview

Comments is a component that runs within an Out-Of-iFrame apps. The container app is required to provide a number of properties in order to run Comments.

Setup

npm install wix-comments

Comments Component:

import WixComments from "wix-comments";

<WixComments
    signedInstance
    contextToken
    appParams
    compId
    uid
    isMobile
    styleConverter
    settings
    locale
    entityID
    memberAuth
    navigateToProfile
    exitShareMode
    buildShareURL
    viewSharedComment
    triggerScroll
/>

Properties

propName	propType	defaultValue	isRequired	description
signedInstance	string	-	true	The current signedInstance
contextToken	string	-	true	Context-Token for the API. link to Integration Guide
appParams	object	-	true	Site appParams object with: instance, instanceId, appDefinitionId
uid	string	-	true	The current user id
compId	string	-	true	The current compId
isMobile	bool	true	true	If the app is open in mobile
settings	object	default settings	false	Configuration of the app Settings. See table below
styleConverter	object	-	true	Style of the site
locale	string	'en'	false	The current site language
navigateToProfile	function	-	true	Function that gets user/member id and navigate to profile page
memberAuth	function	-	true	A function that checks if the User is logged in & in-Community before invoking the callback,memberAuth(arguments, callback). See more info
entityID	string	-	true	a GUID that is unique per site
buildShareURL	function	-	false	a function that gets called with two parameters: commentsId, entityId. should return a URL of the site with the provided comment data to be shared buildShareURL(commentId, entityId)
viewSharedComment	object	-	true	an object that contains the id and the entityID of the comment than needs to be viewed - if provided, Comments enters share mode
exitShareMode	function	-	true	This function gets called when the app exits share mode
triggerScroll	function	-	true	Function that gets bool and freeze/unfreeze page scroll. triggerScroll(bool)

Settings

An object that contains the settings of Comments. Like how many comments to load/show..

propName	propType	defaultValue	isRequired	description
commentsToDisplay	number	1	-	number of comments to display by default
repliesToDisplay	number	1	-	number of replies to display by default - next version
textDirection	string	"LTR"	-	text direction: "RTL" / "LTR"
commentsToLoadOnShowMore	number	5	-	number of comments to be loaded when clicking show more comments
repliesToLoadOnShowMore	number	5	-	number of replies to be loaded when clicking show more comments
enableReplies	bool	true	-	Enable replies
showCommentsTitle	bool	true	-	Show/hide "All Comments(n)" title
enableLikes	bool	true	-	enable/disable likes
enableShare	bool	true	-	enable/disable share
enablePaddingDesktop	bool	false	-	enable/disable left & right padding on Comments component (20px)
enablePaddingMobile	bool	false	-	enable/disable left & right padding on Comments component (20px)
enableDivider	bool	true	-	enable/disable divider bellow Comments title
showRepliesByDefault	bool	false	-	show/hide replies with comments
commentsBox_none	number	1	-	Indicates where to show the addCommentBox when there is no comments yet. 1=at top. 2=at bottom. 3=at top & at bottom.
commentsBox_few	number	1	-	Indicates where to show the addCommentBox when there is few comments. 1=at top. 2=at bottom. 3=at top & at bottom.
commentsBox_many	number	3	-	Indicates where to show the addCommentBox when there is many comments. 1=at top. 2=at bottom. 3=at top & at bottom.

Member Auth

The TPA should implement a function called memberAuth and pass it to Comments component via props, the function will check and open login/join-community popups when required, and in case the User is login and in the community then invoke the callback.

In order to perform any action in the Comments Component the User needs to be of the following:

• Signed-in
• Part of the community

memberAuth function gets two parameters:

• arguments
• callback

Example of how the implement should look like in the TPA:

memberAuth(args, cb) {
    if (!userIsLoggedIn) {
        requestLogin();
    } else {
        (userInCommunity && cb.call(this, ...args)) || showJoinCommunityPopup()
    }
}

Share

Since Comments is not a standalone app, Its the TPA responsibility to build the share URL, and decode it later when users come through it. Comments will enter share mode when it gets the property viewSharedComment. The object should look like this:

viewSharedComment={
            id:  "commentId",
            entityID: "entityId"
        };

When user clicks on share comment, Comments will call the function buildShareURL, the function should return the URL and Comments will send it to the user. function to exit share mode: exitShareMode()

Page Scroll

Comments need to freeze the page scrolling in some situations and for that, a function needs to pass to Comments that control the scrolling called triggerScroll(bool). for example:

triggerScroll(status){
       document.querySelector("body").style.overflow = status ? "scroll" : "hidden";
   }

• you can use this useful package: https://www.npmjs.com/package/body-scroll-lock

Style Params

There is an option to overwrite Comments elements style with the props styleParams (styleConverter.styleParams).

style param name	description
commentsApplicationBackground	Comments background
commentsUserName	User name
commentsTimeStamp	Post date text
commentsCommentContent	Comment content text
commentsReply	Reply content text
commentsLike	Like icon
commentsMoreActionIcon	More action icon
commentsPlaceholder	Rich-Content text placeholder
commentsBoxBorder	Rich-Content box border
commentsSendIcon	Rich-Content send icon button
commentsSaveButtonText	Rich-Content edit 'Save' button text
commentsSaveButtonBackground	Rich-Content edit 'Save' button background
commentsCancelButtonBorder	Rich-Content edit 'Cancel' button border
commentsCancelButtonText	Rich-Content edit 'Cancel' button text
commentsCancelButtonBackground	Rich-Content edit 'Cancel' button background
commentsRceIcons	Rich-Content-Editor plugins icons
commentsShowMoreCommentsLink	show more comments link
commentsShowMoreRepliesLink	show more replies link

For example to change the color and font of the user-name the styleConverter should looks like this:

styleConverter: {
    styleParams: {
        colors: {
            commentsUserName: {
                value: "#000000"
            }
        },
        fonts: {
            commentsUserName: {
                family: "HelveticaNeue-Bold"
            }
        },
        booleans: {},
        numbers: {},
    }
}

Migrating to Version 3

Breaking Change :

• token property renamed to contextToken
• triggerShareMode property renamed to exitShareMode
• biEventsParams, currentMember, appDefinitionId, editorMode, appHeight, style, commentId, biToken properties was removed.

New Properties:

• appParams object (Site appParams object with: instance, instanceId, appDefinitionId).
• compId (the current compId).
• uid (the current user id).