Added social-share buttons and product description (#36)

Author: dusanradovanovic

package.json

@@ -24,6 +24,7 @@
     "react-script-hook": "^1.1.1",
     "react-scripts": "3.4.1",
     "serve": "^11.3.1",
+    "sharethis-reactjs": "^1.5.0",
     "typescript": "^3.7.3"
   },
   "scripts": {

src/Product.scss

@@ -88,11 +88,6 @@
         margin-top: 20px;
       }
 
-      #{$block}__separator {
-        margin-top: 20px;
-        border-top: 1px solid hsl(0, 0, 90%);
-      }
-
       #{$block}__addtocartbtn {
         margin-top: 20px;
         width: 200px;
@@ -101,6 +96,14 @@
       #{$block}__moltinbtncontainer {
         margin-top: 20px;
       }
+
+      #{$block}__description {
+        margin-top: 20px;
+      }
+
+      #{$block}__socialshare {
+        margin-top: 20px;
+      }
     }
   }
 

src/Product.tsx

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 import { useResolve, useProductImages } from './hooks';
 import { loadProductBySlug } from './service';
 import { CompareCheck } from './CompareCheck';
+import { SocialShare } from './SocialShare';
 import { useTranslation, useCurrency } from './app-state';
 import { isProductAvailable } from './helper';
 
@@ -71,13 +72,18 @@ export const Product: React.FC = () => {
             <div className="product__comparecheck">
               <CompareCheck product={product} />
             </div>
-            <div className="product__separator"></div>
             <div className="product__moltinbtncontainer">
               <span
                 className="moltin-buy-button"
                 data-moltin-product-id={product.id}
               ></span>
             </div>
+            <div className="product__description">
+              {product.description}
+            </div>
+            <div className="product__socialshare">
+              <SocialShare name={product.name} description={product.description} imageHref={productImageHrefs?.[0]} />
+            </div>
           </div>
         </div>
       )}

src/SocialShare.scss

@@ -0,0 +1,4 @@
+
+.socialshare {
+  width: 300px;
+}

src/SocialShare.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { InlineShareButtons } from 'sharethis-reactjs';
+import { useTranslation } from './app-state';
+
+import './SocialShare.scss';
+
+interface SocialShareProps {
+  name: string;
+  description: string;
+  imageHref: string;
+}
+
+export const SocialShare: React.FC<SocialShareProps> = (props) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="socialshare">
+      <InlineShareButtons
+        config={{
+          alignment: 'left', // alignment of buttons (left, center, right)
+          color: 'social', // set the color of buttons (social, white)
+          enabled: true, // show/hide buttons (true, false)
+          font_size: 16, // font size for the buttons
+          labels: 'cta', // button labels (cta, counts, null)
+          networks: [ // which networks to include (see SHARING NETWORKS)
+            'facebook',
+            'twitter',
+            'pinterest',
+            'email',
+          ],
+          padding: 12, // padding within buttons (INTEGER)
+          radius: 4, // the corner radius on each button (INTEGER)
+          size: 40, // the size of each button (INTEGER)
+          show_total: false,
+          image: props.imageHref, // (defaults to og:image or twitter:image)
+          description: props.description, // (defaults to og:description or twitter:description)
+          title: t('social-share-title', { productName: props.name }), // (defaults to og:title or twitter:title)
+          subject: t('social-share-subject', { productName: props.name }), // (defaults to og:title or twitter:title)
+          message: t('social-share-message', { productName: props.name, description: props.description, link: window.location.href }), // (defaults to og:title or twitter:title)
+        }}
+      />
+    </div>
+  );
+};

src/locales/en.json

@@ -95,5 +95,8 @@
   "required": "Required",
   "network-offline": "Network Offline",
   "previous-image": "Previous image",
-  "next-image": "Next image"
+  "next-image": "Next image",
+  "social-share-title": "Check out this product: {productName}",
+  "social-share-subject": "Check out this product: {productName}",
+  "social-share-message": "{link}\n\n{productName}\n\n{description}"
 }

src/locales/fr.json

@@ -95,5 +95,8 @@
   "required": "ŔŔéǫûîîŕéð",
   "network-offline": "ÑÑéţŵŵöŕķ ÖÖƒƒļļîñé",
   "previous-image": "ÞÞŕéṽîîöûš îîɱååĝé",
-  "next-image": "ÑÑéẋţ îîɱååĝé"
+  "next-image": "ÑÑéẋţ îîɱååĝé",
+  "social-share-title": "ÇÇĥééçķ ööûţ ţţĥîš þþŕöðûûçţ∶ {productName}",
+  "social-share-subject": "ÇÇĥééçķ ööûţ ţţĥîš þþŕöðûûçţ∶ {productName}",
+  "social-share-message": "{link}{productName}{description}"
 }

src/types.d.ts

@@ -0,0 +1,4 @@
+
+declare module 'sharethis-reactjs' {
+  export const InlineShareButtons: any;
+}

yarn.lock

@@ -10145,6 +10145,11 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+sharethis-reactjs@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/sharethis-reactjs/-/sharethis-reactjs-1.5.0.tgz#9c6a563c9f89e4cc4ea633e993016bab84fe60df"
+  integrity sha512-aYbXxbKQZzf9m8iFtNkHJGrQXy9VX/tbJ2PWOOgMWB0XNZU3vwUfKq/obMg5hFDZ/fa4rAj7G+LxN5zvLufx4w==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"