Feat/playground feedback INTER-775 (#151)

* feat: add SDK links to mobile signals copy * feat: Make expand object button look more obviously clickable * style: make links more subtle * feat: prefill coupon to make the use case one-click * styles: adjust link styles
fingerprintjs · Jul 19, 2024 · 0589bdd · 0589bdd
1 parent 50d8ae8
commit 0589bdd
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 7 deletions.
diff --git a/src/app/playground/Playground.tsx b/src/app/playground/Playground.tsx
@@ -34,12 +34,6 @@ import { ChevronSvg } from '../../client/img/chevronSvg';
 import { pluralize } from '../../shared/utils';
 import { motion } from 'framer-motion';
 
-const PLAYGROUND_COPY = {
-  androidOnly: 'Applicable only to Android devices',
-  iosOnly: 'Applicable only to iOS devices',
-  mobileOnly: 'Applicable only to iOS and Android devices',
-} as const;
-
 // Nothing magic about `8` here, each customer must define their own use-case specific threshold
 const SUSPECT_SCORE_RED_THRESHOLD = 8;
 
@@ -61,6 +55,38 @@ const DocsLink: FunctionComponent<{ children: string; href: string; style?: Reac
   );
 };
 
+const PLAYGROUND_COPY = {
+  androidOnly: (
+    <>
+      Available in the native{' '}
+      <Link href='https://dev.fingerprint.com/docs/native-android-integration' target='_blank'>
+        Android SDK
+      </Link>
+    </>
+  ),
+  iosOnly: (
+    <>
+      Available in the native{' '}
+      <Link href='https://dev.fingerprint.com/docs/ios' target='_blank'>
+        iOS SDK
+      </Link>
+    </>
+  ),
+  mobileOnly: (
+    <>
+      Available in native{' '}
+      <Link href='https://dev.fingerprint.com/docs/ios' target='_blank'>
+        iOS
+      </Link>{' '}
+      and{' '}
+      <Link href='https://dev.fingerprint.com/docs/native-android-integration' target='_blank'>
+        Android
+      </Link>{' '}
+      SDKs
+    </>
+  ),
+} as const;
+
 // Map cannot be server-side rendered
 const Map = dynamic(() => import('./components/Map'), { ssr: false });
 

diff --git a/src/app/playground/components/SignalTable.module.scss b/src/app/playground/components/SignalTable.module.scss
@@ -28,6 +28,21 @@
   td:first {
     padding: rem(12px) rem(8px);
   }
+
+  td:last-of-type {
+    a {
+      color: v('gray');
+
+      text-decoration: underline;
+      text-decoration-color: v('gray-box-stroke');
+      text-underline-offset: 4px;
+
+      &:hover {
+        color: v('dark-black');
+        text-decoration-color: v('dark-black');
+      }
+    }
+  }
 }
 
 td.red {

diff --git a/src/client/components/common/CodeSnippet/CodeSnippet.module.scss b/src/client/components/common/CodeSnippet/CodeSnippet.module.scss
@@ -73,6 +73,25 @@
     .json-view .json-view--null {
       color: var(--json-null);
     }
+
+    // Make expand object button look more obviously clickable
+    .json-view .jv-button {
+      visibility: hidden;
+      position: relative;
+
+      &:after {
+        visibility: visible;
+        position: absolute;
+        top: 0;
+        left: 0;
+        content: '···';
+        background: v('gray-box-stroke');
+        border-radius: 8px;
+        letter-spacing: -3px;
+        padding-left: 3px;
+        padding-right: 6px;
+      }
+    }
   }
 }
 

diff --git a/src/pages/coupon-fraud/index.tsx b/src/pages/coupon-fraud/index.tsx
@@ -55,7 +55,7 @@ export default function CouponFraudUseCase({ embed }: CustomPageProps) {
   const [airMaxCount, setAirMaxCount] = useState(1);
   const [allStarCount, setAllStarCount] = useState(1);
 
-  const [couponCode, setCouponCode] = useState('');
+  const [couponCode, setCouponCode] = useState('Promo3000');
   const [discount, setDiscount] = useState(0);
 
   const cartItems = [
@@ -99,6 +99,7 @@ export default function CouponFraudUseCase({ embed }: CustomPageProps) {
                 type='text'
                 placeholder='Enter a coupon'
                 onChange={(e) => setCouponCode(e.target.value)}
+                value={couponCode}
                 required
                 data-testid={TEST_IDS.couponFraud.couponCode}
               />