From 854e87545fdca4e10fe6f440ebb162c5e8959ae5 Mon Sep 17 00:00:00 2001
From: Adam Iskounen <44589599+iskounen@users.noreply.github.com>
Date: Mon, 11 Nov 2024 09:47:44 -0500
Subject: [PATCH] fix(DIA-981)(DIA-937): Auth2 QA Omnibus (Continued) (#11083)

* resized social icons and aligned them

* Finished catch-all error message

* added sentry event for social sign-in errors

* let metaphysics determine my IP address

* fixed code review suggestions
---
 .../Onboarding/Auth2/hooks/useCountryCode.tsx | 17 ++--------
 .../Auth2/scenes/LoginWelcomeStep.tsx         | 32 ++++++++-----------
 src/app/utils/auth/socialSignInHelpers.ts     |  9 +-----
 3 files changed, 17 insertions(+), 41 deletions(-)

diff --git a/src/app/Scenes/Onboarding/Auth2/hooks/useCountryCode.tsx b/src/app/Scenes/Onboarding/Auth2/hooks/useCountryCode.tsx
index e25c2e51eff..3241c0424b0 100644
--- a/src/app/Scenes/Onboarding/Auth2/hooks/useCountryCode.tsx
+++ b/src/app/Scenes/Onboarding/Auth2/hooks/useCountryCode.tsx
@@ -1,31 +1,18 @@
 import { useCountryCodeQuery } from "__generated__/useCountryCodeQuery.graphql"
 import { useClientQuery } from "app/utils/useClientQuery"
-import { useEffect, useState } from "react"
-import { getIpAddress } from "react-native-device-info"
 import { graphql } from "react-relay"
 
 const USE_COUNTRY_CODE_QUERY = graphql`
-  query useCountryCodeQuery($ip: String!) {
-    requestLocation(ip: $ip) {
+  query useCountryCodeQuery {
+    requestLocation {
       countryCode
     }
   }
 `
 
 export const useCountryCode = () => {
-  const [ip, setIp] = useState("0.0.0.0")
-
-  useEffect(() => {
-    getIpAddress().then((ip) => {
-      setIp(ip)
-    })
-  }, [])
-
   const { data, loading, error } = useClientQuery<useCountryCodeQuery>({
     query: USE_COUNTRY_CODE_QUERY,
-    variables: {
-      ip,
-    },
     cacheConfig: {
       networkCacheConfig: {
         force: false,
diff --git a/src/app/Scenes/Onboarding/Auth2/scenes/LoginWelcomeStep.tsx b/src/app/Scenes/Onboarding/Auth2/scenes/LoginWelcomeStep.tsx
index 4f7cb54a3d0..bb5bdb3eadd 100644
--- a/src/app/Scenes/Onboarding/Auth2/scenes/LoginWelcomeStep.tsx
+++ b/src/app/Scenes/Onboarding/Auth2/scenes/LoginWelcomeStep.tsx
@@ -1,7 +1,10 @@
 import {
+  AppleIcon,
   BackButton,
   Button,
+  FacebookIcon,
   Flex,
+  GoogleIcon,
   Input,
   LinkText,
   Spacer,
@@ -21,7 +24,7 @@ import { osMajorVersion } from "app/utils/platformUtil"
 import { Formik, useFormikContext } from "formik"
 import { MotiView } from "moti"
 import React, { useRef } from "react"
-import { Image, Platform } from "react-native"
+import { Platform } from "react-native"
 import { Easing } from "react-native-reanimated"
 import * as Yup from "yup"
 
@@ -225,30 +228,23 @@ const SocialLoginButtons: React.FC = () => {
 
       <Spacer y={1} />
 
-      <Flex flexDirection="row" justifyContent="space-evenly" width="100%">
+      <Flex flexDirection="row" gap={1} justifyContent="center" width="100%">
         {Platform.OS === "ios" && osMajorVersion() >= 13 && (
-          <Button variant="fillDark" width="100%" onPress={handleApplePress}>
-            <Flex height="100%" justifyContent="center" alignItems="center">
-              <Image source={require("images/apple.webp")} />
+          <Button variant="outline" onPress={handleApplePress}>
+            <Flex alignItems="center" justifyContent="center">
+              {/* On iOS, the icons need to be nudged down to be centered in the button. */}
+              <AppleIcon width={23} height={23} style={{ top: 4 }} />
             </Flex>
           </Button>
         )}
-
         <Button variant="outline" onPress={handleGooglePress}>
-          <Flex justifyContent="center" alignItems="center">
-            <Image
-              source={require("images/google.webp")}
-              style={{ position: "relative", top: 2 }}
-            />
+          <Flex alignItems="center" justifyContent="center">
+            <GoogleIcon width={23} height={23} style={Platform.OS === "ios" && { top: 4 }} />
           </Flex>
         </Button>
-
-        <Button variant="outline" width="100%" onPress={handleFacebookPress}>
-          <Flex justifyContent="center" alignItems="center">
-            <Image
-              source={require("images/facebook.webp")}
-              style={{ position: "relative", top: 2 }}
-            />
+        <Button variant="outline" onPress={handleFacebookPress}>
+          <Flex alignItems="center" justifyContent="center">
+            <FacebookIcon width={23} height={23} style={Platform.OS === "ios" && { top: 4 }} />
           </Flex>
         </Button>
       </Flex>
diff --git a/src/app/utils/auth/socialSignInHelpers.ts b/src/app/utils/auth/socialSignInHelpers.ts
index 318b2e94c72..c8c41045e75 100644
--- a/src/app/utils/auth/socialSignInHelpers.ts
+++ b/src/app/utils/auth/socialSignInHelpers.ts
@@ -108,17 +108,10 @@ export const useSocialLogin = () => {
   ) => {
     if (errorMode === "no account") {
       Alert.alert("No Artsy account found", error.message, [
-        {
-          text: "Cancel",
-          style: "cancel",
-        },
         {
           text: "OK",
           onPress: () => {
-            // TODO: How should this be handled in auth2?
-            // navigation.replace(mode === "login" ? "OnboardingCreateAccount" : "OnboardingLogin", {
-            //   withFadeAnimation: true,
-            // })
+            captureMessage("AUTH_BLOCKED: " + error.message)
           },
         },
       ])