From 5a05cb41ea08b5cb317e3eaa8b17943d9636994f Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 20 Oct 2020 13:28:58 -0300
Subject: [PATCH] Cursor for Product View

---
 .../product/ProductView/ProductView.tsx       | 19 ++++++-------------
 lib/browser.ts                                | 16 ++++++++++++++++
 2 files changed, 22 insertions(+), 13 deletions(-)
 create mode 100644 lib/browser.ts

diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index aac0d2f29..05d90e16d 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -7,7 +7,7 @@ import { Swatch, ProductSlider } from '@components/product'
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import { getProductOptions } from '../helpers'
 import s from './ProductView.module.css'
-import * as Bowser from 'bowser'
+import { isDesktop } from '@lib/browser'
 interface Props {
   className?: string
   children?: any
@@ -18,24 +18,17 @@ const ProductView: FC<Props> = ({ product, className }) => {
   const addItem = useAddItem()
   const { openSidebar } = useUI()
   const options = getProductOptions(product)
-  let notValidBrowser = null
+  const [loading, setLoading] = useState(false)
+  const [validMedia, setValidMedia] = useState(false)
 
   const [choices, setChoices] = useState<Record<string, any>>({
     size: null,
     color: null,
   })
 
-  const [loading, setLoading] = useState(false)
-
   useEffect(() => {
-    const browser = Bowser.getParser(window.navigator.userAgent)
-    const notValidBrowser = browser.satisfies({
-      mobile: {
-        safari: '>=14',
-        android: '>81',
-      },
-    })
-  }, [notValidBrowser])
+    setValidMedia(isDesktop())
+  }, [])
 
   const addToCart = async () => {
     setLoading(true)
@@ -97,7 +90,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
             </ProductSlider>
           </div>
 
-          {notValidBrowser && (
+          {!validMedia && (
             <div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
               <img src="/slider-arrows.png" />
             </div>
diff --git a/lib/browser.ts b/lib/browser.ts
new file mode 100644
index 000000000..3e6d7bd39
--- /dev/null
+++ b/lib/browser.ts
@@ -0,0 +1,16 @@
+import * as Bowser from 'bowser'
+
+export function isDesktop(): boolean {
+  const browser = Bowser.getParser(window.navigator.userAgent)
+  return browser.getPlatform().type === 'desktop'
+}
+
+export function isMobile(): boolean {
+  const browser = Bowser.getParser(window.navigator.userAgent)
+  return browser.getPlatform().type === 'mobile'
+}
+
+export function isTablet(): boolean {
+  const browser = Bowser.getParser(window.navigator.userAgent)
+  return browser.getPlatform().type === 'tablet'
+}