@plusscommunities/pluss-newsletter-web-sharing 1.4.19 → 1.4.20

package/dist/index.cjs.js

@@ -7210,10 +7210,16 @@ var Analytics$1 = PlussCore__namespace.Analytics,
 
 var getInitialState = function getInitialState() {
   return {
+    posts: 0,
+    prevPosts: 0,
     pageViews: 0,
     prevPageViews: 0,
     uniquePageView: 0,
     prevUniquePageView: 0,
+    comments: 0,
+    prevComments: 0,
+    reactions: 0,
+    prevReactions: 0,
     isLoading: true
   };
 }; // AnalyticsHub Component
@@ -7243,7 +7249,14 @@ var AnalyticsHub = function AnalyticsHub(_ref) {
     return null;
   }
 
-  var featureTitle = strings["".concat(values.featureKey, "_textTitleNews")] || values.textTitleNews;
+  var featureTitle = function (key) {
+    if (!strings || !strings.sideNav || !strings.sideNav[key]) {
+      return values.textMenuTitle;
+    }
+
+    return strings.sideNav[key];
+  }();
+
   var exportColumns = [{
     label: 'Select All',
     key: ''
@@ -7253,12 +7266,21 @@ var AnalyticsHub = function AnalyticsHub(_ref) {
   }, {
     label: 'End Date',
     key: 'endDate'
+  }, {
+    label: 'Posts',
+    key: 'posts'
   }, {
     label: 'Page Views',
     key: 'pageViews'
   }, {
     label: 'Unique Visitors',
     key: 'uniquePageView'
+  }, {
+    label: 'Comments',
+    key: 'comments'
+  }, {
+    label: 'Reactions',
+    key: 'reactions'
   }];
   React.useEffect(function () {
     getData();
@@ -7284,10 +7306,16 @@ var AnalyticsHub = function AnalyticsHub(_ref) {
               currentStatsResponse = _yield$Promise$all2[0];
               prevStatsResponse = _yield$Promise$all2[1];
               data = {
+                posts: Analytics$1.countActivities(currentStatsResponse.data, 'Post', 'total'),
+                prevPosts: Analytics$1.countActivities(prevStatsResponse.data, 'Post', 'total'),
                 pageViews: Analytics$1.countActivities(currentStatsResponse.data, 'PageView', 'total'),
                 prevPageViews: Analytics$1.countActivities(prevStatsResponse.data, 'PageView', 'total'),
                 uniquePageView: Analytics$1.countActivities(currentStatsResponse.data, 'UniquePageView', 'uniquearray'),
                 prevUniquePageView: Analytics$1.countActivities(prevStatsResponse.data, 'UniquePageView', 'uniquearray'),
+                comments: Analytics$1.countActivities(currentStatsResponse.data, 'Comment', 'total'),
+                prevComments: Analytics$1.countActivities(prevStatsResponse.data, 'Comment', 'total'),
+                reactions: Analytics$1.countActivities(currentStatsResponse.data, 'Reaction', 'total'),
+                prevReactions: Analytics$1.countActivities(prevStatsResponse.data, 'Reaction', 'total'),
                 isLoading: false
               };
               setAnalyticsData(data);
@@ -7313,8 +7341,11 @@ var AnalyticsHub = function AnalyticsHub(_ref) {
     return [{
       startDate: moment__default['default'](startTime + 1).format('D-MM-YYYY'),
       endDate: moment__default['default'](endTime).format('D-MM-YYYY'),
+      posts: analyticsData.posts,
       pageViews: analyticsData.pageViews,
-      uniquePageView: analyticsData.uniquePageView
+      uniquePageView: analyticsData.uniquePageView,
+      comments: analyticsData.comments,
+      reactions: analyticsData.reactions
     }];
   };
 
@@ -7351,6 +7382,14 @@ var AnalyticsHub = function AnalyticsHub(_ref) {
   }, "Export CSV")), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "analyticsSection dashboardSection_content"
   }, /*#__PURE__*/React__default['default'].createElement(Components.StatBox, {
+    title: "".concat(featureTitle, " Posts"),
+    icon: freeSolidSvgIcons.faNewspaper,
+    value: analyticsData.posts,
+    previousValue: analyticsData.prevPosts,
+    prevText: prevText,
+    viewGraphLink: "/chart?entity=".concat(values.analyticsKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=Post&countType=total&dayCount=").concat(dayCount),
+    isLoading: analyticsData.isLoading
+  }), /*#__PURE__*/React__default['default'].createElement(Components.StatBox, {
     title: "".concat(featureTitle, " Page Views"),
     icon: freeSolidSvgIcons.faEye,
     value: analyticsData.pageViews,
@@ -7366,6 +7405,22 @@ var AnalyticsHub = function AnalyticsHub(_ref) {
     prevText: prevText,
     viewGraphLink: "/chart?entity=".concat(values.analyticsKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=UniquePageView&countType=uniquearray&dayCount=").concat(dayCount),
     isLoading: analyticsData.isLoading
+  }), /*#__PURE__*/React__default['default'].createElement(Components.StatBox, {
+    title: "".concat(featureTitle, " Comments"),
+    icon: freeSolidSvgIcons.faComment,
+    value: analyticsData.comments,
+    previousValue: analyticsData.prevComments,
+    prevText: prevText,
+    viewGraphLink: "/chart?entity=".concat(values.analyticsKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=Comment&countType=total&dayCount=").concat(dayCount),
+    isLoading: analyticsData.isLoading
+  }), /*#__PURE__*/React__default['default'].createElement(Components.StatBox, {
+    title: "".concat(featureTitle, " Reactions"),
+    icon: freeSolidSvgIcons.faFaceSmile,
+    value: analyticsData.reactions,
+    previousValue: analyticsData.prevReactions,
+    prevText: prevText,
+    viewGraphLink: "/chart?entity=".concat(values.analyticsKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=Reaction&countType=total&dayCount=").concat(dayCount),
+    isLoading: analyticsData.isLoading
   })));
 };
 

package/dist/index.esm.js

@@ -22,7 +22,7 @@ import NewsletterPreview from 'make-pluss-newsletter';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { faEye, faUser } from '@fortawesome/free-solid-svg-icons';
+import { faNewspaper, faEye, faUser, faComment, faFaceSmile } from '@fortawesome/free-solid-svg-icons';
 
 var values = {
   featureKey: 'sharing',
@@ -7164,10 +7164,16 @@ var Analytics$1 = PlussCore.Analytics,
 
 var getInitialState = function getInitialState() {
   return {
+    posts: 0,
+    prevPosts: 0,
     pageViews: 0,
     prevPageViews: 0,
     uniquePageView: 0,
     prevUniquePageView: 0,
+    comments: 0,
+    prevComments: 0,
+    reactions: 0,
+    prevReactions: 0,
     isLoading: true
   };
 }; // AnalyticsHub Component
@@ -7197,7 +7203,14 @@ var AnalyticsHub = function AnalyticsHub(_ref) {
     return null;
   }
 
-  var featureTitle = strings["".concat(values.featureKey, "_textTitleNews")] || values.textTitleNews;
+  var featureTitle = function (key) {
+    if (!strings || !strings.sideNav || !strings.sideNav[key]) {
+      return values.textMenuTitle;
+    }
+
+    return strings.sideNav[key];
+  }();
+
   var exportColumns = [{
     label: 'Select All',
     key: ''
@@ -7207,12 +7220,21 @@ var AnalyticsHub = function AnalyticsHub(_ref) {
   }, {
     label: 'End Date',
     key: 'endDate'
+  }, {
+    label: 'Posts',
+    key: 'posts'
   }, {
     label: 'Page Views',
     key: 'pageViews'
   }, {
     label: 'Unique Visitors',
     key: 'uniquePageView'
+  }, {
+    label: 'Comments',
+    key: 'comments'
+  }, {
+    label: 'Reactions',
+    key: 'reactions'
   }];
   useEffect(function () {
     getData();
@@ -7238,10 +7260,16 @@ var AnalyticsHub = function AnalyticsHub(_ref) {
               currentStatsResponse = _yield$Promise$all2[0];
               prevStatsResponse = _yield$Promise$all2[1];
               data = {
+                posts: Analytics$1.countActivities(currentStatsResponse.data, 'Post', 'total'),
+                prevPosts: Analytics$1.countActivities(prevStatsResponse.data, 'Post', 'total'),
                 pageViews: Analytics$1.countActivities(currentStatsResponse.data, 'PageView', 'total'),
                 prevPageViews: Analytics$1.countActivities(prevStatsResponse.data, 'PageView', 'total'),
                 uniquePageView: Analytics$1.countActivities(currentStatsResponse.data, 'UniquePageView', 'uniquearray'),
                 prevUniquePageView: Analytics$1.countActivities(prevStatsResponse.data, 'UniquePageView', 'uniquearray'),
+                comments: Analytics$1.countActivities(currentStatsResponse.data, 'Comment', 'total'),
+                prevComments: Analytics$1.countActivities(prevStatsResponse.data, 'Comment', 'total'),
+                reactions: Analytics$1.countActivities(currentStatsResponse.data, 'Reaction', 'total'),
+                prevReactions: Analytics$1.countActivities(prevStatsResponse.data, 'Reaction', 'total'),
                 isLoading: false
               };
               setAnalyticsData(data);
@@ -7267,8 +7295,11 @@ var AnalyticsHub = function AnalyticsHub(_ref) {
     return [{
       startDate: moment(startTime + 1).format('D-MM-YYYY'),
       endDate: moment(endTime).format('D-MM-YYYY'),
+      posts: analyticsData.posts,
       pageViews: analyticsData.pageViews,
-      uniquePageView: analyticsData.uniquePageView
+      uniquePageView: analyticsData.uniquePageView,
+      comments: analyticsData.comments,
+      reactions: analyticsData.reactions
     }];
   };
 
@@ -7305,6 +7336,14 @@ var AnalyticsHub = function AnalyticsHub(_ref) {
   }, "Export CSV")), /*#__PURE__*/React.createElement("div", {
     className: "analyticsSection dashboardSection_content"
   }, /*#__PURE__*/React.createElement(Components.StatBox, {
+    title: "".concat(featureTitle, " Posts"),
+    icon: faNewspaper,
+    value: analyticsData.posts,
+    previousValue: analyticsData.prevPosts,
+    prevText: prevText,
+    viewGraphLink: "/chart?entity=".concat(values.analyticsKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=Post&countType=total&dayCount=").concat(dayCount),
+    isLoading: analyticsData.isLoading
+  }), /*#__PURE__*/React.createElement(Components.StatBox, {
     title: "".concat(featureTitle, " Page Views"),
     icon: faEye,
     value: analyticsData.pageViews,
@@ -7320,6 +7359,22 @@ var AnalyticsHub = function AnalyticsHub(_ref) {
     prevText: prevText,
     viewGraphLink: "/chart?entity=".concat(values.analyticsKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=UniquePageView&countType=uniquearray&dayCount=").concat(dayCount),
     isLoading: analyticsData.isLoading
+  }), /*#__PURE__*/React.createElement(Components.StatBox, {
+    title: "".concat(featureTitle, " Comments"),
+    icon: faComment,
+    value: analyticsData.comments,
+    previousValue: analyticsData.prevComments,
+    prevText: prevText,
+    viewGraphLink: "/chart?entity=".concat(values.analyticsKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=Comment&countType=total&dayCount=").concat(dayCount),
+    isLoading: analyticsData.isLoading
+  }), /*#__PURE__*/React.createElement(Components.StatBox, {
+    title: "".concat(featureTitle, " Reactions"),
+    icon: faFaceSmile,
+    value: analyticsData.reactions,
+    previousValue: analyticsData.prevReactions,
+    prevText: prevText,
+    viewGraphLink: "/chart?entity=".concat(values.analyticsKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=Reaction&countType=total&dayCount=").concat(dayCount),
+    isLoading: analyticsData.isLoading
   })));
 };
 

package/dist/index.umd.js

@@ -7186,10 +7186,16 @@
 
   var getInitialState = function getInitialState() {
     return {
+      posts: 0,
+      prevPosts: 0,
       pageViews: 0,
       prevPageViews: 0,
       uniquePageView: 0,
       prevUniquePageView: 0,
+      comments: 0,
+      prevComments: 0,
+      reactions: 0,
+      prevReactions: 0,
       isLoading: true
     };
   }; // AnalyticsHub Component
@@ -7219,7 +7225,14 @@
       return null;
     }
 
-    var featureTitle = strings["".concat(values.featureKey, "_textTitleNews")] || values.textTitleNews;
+    var featureTitle = function (key) {
+      if (!strings || !strings.sideNav || !strings.sideNav[key]) {
+        return values.textMenuTitle;
+      }
+
+      return strings.sideNav[key];
+    }();
+
     var exportColumns = [{
       label: 'Select All',
       key: ''
@@ -7229,12 +7242,21 @@
     }, {
       label: 'End Date',
       key: 'endDate'
+    }, {
+      label: 'Posts',
+      key: 'posts'
     }, {
       label: 'Page Views',
       key: 'pageViews'
     }, {
       label: 'Unique Visitors',
       key: 'uniquePageView'
+    }, {
+      label: 'Comments',
+      key: 'comments'
+    }, {
+      label: 'Reactions',
+      key: 'reactions'
     }];
     React.useEffect(function () {
       getData();
@@ -7260,10 +7282,16 @@
                 currentStatsResponse = _yield$Promise$all2[0];
                 prevStatsResponse = _yield$Promise$all2[1];
                 data = {
+                  posts: Analytics$1.countActivities(currentStatsResponse.data, 'Post', 'total'),
+                  prevPosts: Analytics$1.countActivities(prevStatsResponse.data, 'Post', 'total'),
                   pageViews: Analytics$1.countActivities(currentStatsResponse.data, 'PageView', 'total'),
                   prevPageViews: Analytics$1.countActivities(prevStatsResponse.data, 'PageView', 'total'),
                   uniquePageView: Analytics$1.countActivities(currentStatsResponse.data, 'UniquePageView', 'uniquearray'),
                   prevUniquePageView: Analytics$1.countActivities(prevStatsResponse.data, 'UniquePageView', 'uniquearray'),
+                  comments: Analytics$1.countActivities(currentStatsResponse.data, 'Comment', 'total'),
+                  prevComments: Analytics$1.countActivities(prevStatsResponse.data, 'Comment', 'total'),
+                  reactions: Analytics$1.countActivities(currentStatsResponse.data, 'Reaction', 'total'),
+                  prevReactions: Analytics$1.countActivities(prevStatsResponse.data, 'Reaction', 'total'),
                   isLoading: false
                 };
                 setAnalyticsData(data);
@@ -7289,8 +7317,11 @@
       return [{
         startDate: moment__default['default'](startTime + 1).format('D-MM-YYYY'),
         endDate: moment__default['default'](endTime).format('D-MM-YYYY'),
+        posts: analyticsData.posts,
         pageViews: analyticsData.pageViews,
-        uniquePageView: analyticsData.uniquePageView
+        uniquePageView: analyticsData.uniquePageView,
+        comments: analyticsData.comments,
+        reactions: analyticsData.reactions
       }];
     };
 
@@ -7327,6 +7358,14 @@
     }, "Export CSV")), /*#__PURE__*/React__default['default'].createElement("div", {
       className: "analyticsSection dashboardSection_content"
     }, /*#__PURE__*/React__default['default'].createElement(Components.StatBox, {
+      title: "".concat(featureTitle, " Posts"),
+      icon: freeSolidSvgIcons.faNewspaper,
+      value: analyticsData.posts,
+      previousValue: analyticsData.prevPosts,
+      prevText: prevText,
+      viewGraphLink: "/chart?entity=".concat(values.analyticsKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=Post&countType=total&dayCount=").concat(dayCount),
+      isLoading: analyticsData.isLoading
+    }), /*#__PURE__*/React__default['default'].createElement(Components.StatBox, {
       title: "".concat(featureTitle, " Page Views"),
       icon: freeSolidSvgIcons.faEye,
       value: analyticsData.pageViews,
@@ -7342,6 +7381,22 @@
       prevText: prevText,
       viewGraphLink: "/chart?entity=".concat(values.analyticsKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=UniquePageView&countType=uniquearray&dayCount=").concat(dayCount),
       isLoading: analyticsData.isLoading
+    }), /*#__PURE__*/React__default['default'].createElement(Components.StatBox, {
+      title: "".concat(featureTitle, " Comments"),
+      icon: freeSolidSvgIcons.faComment,
+      value: analyticsData.comments,
+      previousValue: analyticsData.prevComments,
+      prevText: prevText,
+      viewGraphLink: "/chart?entity=".concat(values.analyticsKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=Comment&countType=total&dayCount=").concat(dayCount),
+      isLoading: analyticsData.isLoading
+    }), /*#__PURE__*/React__default['default'].createElement(Components.StatBox, {
+      title: "".concat(featureTitle, " Reactions"),
+      icon: freeSolidSvgIcons.faFaceSmile,
+      value: analyticsData.reactions,
+      previousValue: analyticsData.prevReactions,
+      prevText: prevText,
+      viewGraphLink: "/chart?entity=".concat(values.analyticsKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=Reaction&countType=total&dayCount=").concat(dayCount),
+      isLoading: analyticsData.isLoading
     })));
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-newsletter-web-sharing",
-  "version": "1.4.19",
+  "version": "1.4.20",
   "description": "Extension package to enable newsletter on Pluss Communities Platform",
   "main": "dist/index.cjs.js",
   "scripts": {
@@ -36,6 +36,9 @@
   "dependencies": {
     "@babel/runtime": "^7.14.0",
     "@plusscommunities/pluss-core-web": "1.4.22",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "react": "^16.14.0",

package/src/components/AnalyticsHub.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import moment from 'moment';
-import { faCalendarCheck, faCalendarTimes, faEye, faUser } from '@fortawesome/free-solid-svg-icons';
+import { faCalendarCheck, faCalendarTimes, faComment, faEye, faFaceSmile, faNewspaper, faUser } from '@fortawesome/free-solid-svg-icons';
 import { connect } from 'react-redux';
 import { analyticsActions } from '../webapi';
 import { values } from '../values.config';
@@ -9,10 +9,16 @@ import { PlussCore } from '../feature.config';
 const { Analytics, Session, Components } = PlussCore;
 
 const getInitialState = () => ({
+  posts: 0,
+  prevPosts: 0,
   pageViews: 0,
   prevPageViews: 0,
   uniquePageView: 0,
   prevUniquePageView: 0,
+  comments: 0,
+  prevComments: 0,
+  reactions: 0,
+  prevReactions: 0,
   isLoading: true,
 });
 
@@ -26,14 +32,22 @@ const AnalyticsHub = ({ startTime, endTime, auth, prevText, dayCount, strings })
     return null;
   }
 
-  const featureTitle = strings[`${values.featureKey}_textTitleNews`] || values.textTitleNews;
+  const featureTitle = ((key) => {
+    if (!strings || !strings.sideNav || !strings.sideNav[key]) {
+      return values.textMenuTitle;
+    }
+    return strings.sideNav[key];
+  })();
 
   const exportColumns = [
     { label: 'Select All', key: '' },
     { label: 'Start Date', key: 'startDate' },
     { label: 'End Date', key: 'endDate' },
+    { label: 'Posts', key: 'posts' },
     { label: 'Page Views', key: 'pageViews' },
     { label: 'Unique Visitors', key: 'uniquePageView' },
+    { label: 'Comments', key: 'comments' },
+    { label: 'Reactions', key: 'reactions' },
   ];
 
   useEffect(() => {
@@ -50,10 +64,16 @@ const AnalyticsHub = ({ startTime, endTime, auth, prevText, dayCount, strings })
     ]);
 
     const data = {
+      posts: Analytics.countActivities(currentStatsResponse.data, 'Post', 'total'),
+      prevPosts: Analytics.countActivities(prevStatsResponse.data, 'Post', 'total'),
       pageViews: Analytics.countActivities(currentStatsResponse.data, 'PageView', 'total'),
       prevPageViews: Analytics.countActivities(prevStatsResponse.data, 'PageView', 'total'),
       uniquePageView: Analytics.countActivities(currentStatsResponse.data, 'UniquePageView', 'uniquearray'),
       prevUniquePageView: Analytics.countActivities(prevStatsResponse.data, 'UniquePageView', 'uniquearray'),
+      comments: Analytics.countActivities(currentStatsResponse.data, 'Comment', 'total'),
+      prevComments: Analytics.countActivities(prevStatsResponse.data, 'Comment', 'total'),
+      reactions: Analytics.countActivities(currentStatsResponse.data, 'Reaction', 'total'),
+      prevReactions: Analytics.countActivities(prevStatsResponse.data, 'Reaction', 'total'),
       isLoading: false,
     };
     setAnalyticsData(data);
@@ -68,8 +88,11 @@ const AnalyticsHub = ({ startTime, endTime, auth, prevText, dayCount, strings })
       {
         startDate: moment(startTime + 1).format('D-MM-YYYY'),
         endDate: moment(endTime).format('D-MM-YYYY'),
+        posts: analyticsData.posts,
         pageViews: analyticsData.pageViews,
         uniquePageView: analyticsData.uniquePageView,
+        comments: analyticsData.comments,
+        reactions: analyticsData.reactions,
       },
     ];
   };
@@ -112,6 +135,15 @@ const AnalyticsHub = ({ startTime, endTime, auth, prevText, dayCount, strings })
         </Components.Button>
       </div>
       <div className="analyticsSection dashboardSection_content">
+        <Components.StatBox
+          title={`${featureTitle} Posts`}
+          icon={faNewspaper}
+          value={analyticsData.posts}
+          previousValue={analyticsData.prevPosts}
+          prevText={prevText}
+          viewGraphLink={`/chart?entity=${values.analyticsKey}&startTime=${startTime}&endTime=${endTime}&key=Post&countType=total&dayCount=${dayCount}`}
+          isLoading={analyticsData.isLoading}
+        />
         <Components.StatBox
           title={`${featureTitle} Page Views`}
           icon={faEye}
@@ -130,6 +162,24 @@ const AnalyticsHub = ({ startTime, endTime, auth, prevText, dayCount, strings })
           viewGraphLink={`/chart?entity=${values.analyticsKey}&startTime=${startTime}&endTime=${endTime}&key=UniquePageView&countType=uniquearray&dayCount=${dayCount}`}
           isLoading={analyticsData.isLoading}
         />
+        <Components.StatBox
+          title={`${featureTitle} Comments`}
+          icon={faComment}
+          value={analyticsData.comments}
+          previousValue={analyticsData.prevComments}
+          prevText={prevText}
+          viewGraphLink={`/chart?entity=${values.analyticsKey}&startTime=${startTime}&endTime=${endTime}&key=Comment&countType=total&dayCount=${dayCount}`}
+          isLoading={analyticsData.isLoading}
+        />
+        <Components.StatBox
+          title={`${featureTitle} Reactions`}
+          icon={faFaceSmile}
+          value={analyticsData.reactions}
+          previousValue={analyticsData.prevReactions}
+          prevText={prevText}
+          viewGraphLink={`/chart?entity=${values.analyticsKey}&startTime=${startTime}&endTime=${endTime}&key=Reaction&countType=total&dayCount=${dayCount}`}
+          isLoading={analyticsData.isLoading}
+        />
       </div>
     </div>
   );