STEP-11 SocialShare for CategoryPage

scandipwa-socialshare/src/plugin/CategoryPageContainerMSTP.plugin.js
const mapStateToProps = (args, callback, instance) => {
   const [state] = args;
​
   return {
       ...callback(...args),
       socialShare: state.SocialShareReducer.socialShare
   };
};
​
export default {
   'Route/CategoryPage/Container/mapStateToProps': {
       function: mapStateToProps
   }
};
​

scandipwa/packages/scandipwa-socialshare/src/plugin/CategoryPageComponent.plugin.js
import { lazy, Suspense } from 'react';
​
export const SocialShare = lazy(() => import(
   /* webpackMode: "lazy", webpackChunkName: "social-share" */
   '../component/SocialShare'
));
​
const renderItemsCount = (args, callback, instance) => {
   const [isVisibleOnMobile] = args;
​
   return (
       <>
           { callback.apply(instance, args) }
           { renderSocialShare(instance.props, isVisibleOnMobile) }
       </>
   );
};
​
const renderSocialShare = (props, isVisibleOnMobile) => {
   const {
       category: {
           description
       },
       socialShare: {
           socialShareConfig: {
               enabled, categoryPage, rounded, size
           }, providers
       }, device
   } = props;
​
   if (isVisibleOnMobile && !device.isMobile) {
       return null;
   }
​
   if (!isVisibleOnMobile && device.isMobile) {
       return null;
   }
​
   if (!enabled && !categoryPage) {
       return null;
   }
​
   return (
       <Suspense fallback={ null }>
           <SocialShare
             isRounded={ rounded }
             size={ size }
             providers={ providers }
             quote={ description }
           />
       </Suspense>
   );
};
​
export const config = {
   'Route/CategoryPage/Component': {
       'member-function': {
           renderItemsCount
       }
   }
};
​
export default config;

scandipwa-socialshare/src/component/SocialShare/SocialShare.style.scss Line: 12 - 21
.CategoryPage {
   &-LayoutButtons {
       margin-bottom: 10px;
       min-width: 100px;
   }
​
   &-Miscellaneous {
       grid-template-columns: unset;
   }
}
​