feat: add june challenge modal

app/components/june-challenge/card.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react"
+import { View } from "react-native"
+
+import { useI18nContext } from "@app/i18n/i18n-react"
+import {
+  JUNE_1_2024_12_AM_UTC_MINUS_6,
+  getTimeLeft,
+  JULY_1_2024_12_AM_UTC_MINUS_6,
+} from "@app/utils/date"
+import { Text, makeStyles, useTheme } from "@rneui/themed"
+
+import { GaloyIcon } from "../atomic/galoy-icon"
+import { PressableCard } from "../pressable-card"
+import { JuneChallengeModal } from "./modal"
+
+export const JuneChallengeCard: React.FC = () => {
+  const [modalIsOpen, setModalIsOpen] = useState(false)
+  const openModal = () => setModalIsOpen(true)
+
+  const {
+    theme: { colors },
+  } = useTheme()
+  const styles = useStyles()
+  const { LL } = useI18nContext()
+
+  const [countDown, setCountDown] = useState(
+    getTimeLeft({
+      after: JUNE_1_2024_12_AM_UTC_MINUS_6,
+      until: JULY_1_2024_12_AM_UTC_MINUS_6,
+    }),
+  )
+
+  useEffect(() => {
+    const dateNow = Date.now()
+    if (dateNow > JULY_1_2024_12_AM_UTC_MINUS_6) return
+
+    const t = setInterval(() => {
+      setCountDown(
+        getTimeLeft({
+          after: JUNE_1_2024_12_AM_UTC_MINUS_6,
+          until: JULY_1_2024_12_AM_UTC_MINUS_6,
+        }),
+      )
+    }, 1000)
+
+    return () => clearInterval(t)
+  }, [setCountDown])
+
+  const currentTime = Date.now()
+  if (
+    currentTime > JULY_1_2024_12_AM_UTC_MINUS_6 ||
+    currentTime < JUNE_1_2024_12_AM_UTC_MINUS_6
+  )
+    return <></>
+
+  return (
+    <PressableCard onPress={openModal}>
+      <JuneChallengeModal isVisible={modalIsOpen} setIsVisible={setModalIsOpen} />
+      <View style={styles.card}>
+        <View style={styles.textContainer}>
+          <View style={styles.beside}>
+            <Text type="p1" bold>
+              {LL.Circles.juneChallenge.title()}
+            </Text>
+            <Text color={colors.grey3}>{countDown}</Text>
+          </View>
+          <Text type="p2">{LL.Circles.juneChallenge.description()}</Text>
+        </View>
+        <View>
+          <GaloyIcon color={colors.primary} size={28} name="rank" />
+        </View>
+      </View>
+    </PressableCard>
+  )
+}
+
+const useStyles = makeStyles(({ colors }) => ({
+  card: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    padding: 16,
+    borderRadius: 10,
+    backgroundColor: colors.grey5,
+  },
+  textContainer: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    rowGap: 6,
+  },
+  beside: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: 10,
+  },
+}))

app/components/june-challenge/index.tsx

@@ -0,0 +1,2 @@
+export * from "./modal"
+export * from "./card"

app/components/june-challenge/modal.tsx

@@ -0,0 +1,139 @@
+import * as React from "react"
+import { Linking, View } from "react-native"
+import Modal from "react-native-modal"
+
+import { useI18nContext } from "@app/i18n/i18n-react"
+import { useCirclesCard } from "@app/screens/people-screen/circles/use-circles-card"
+import { makeStyles, useTheme, Text } from "@rneui/themed"
+
+import { GaloyIcon } from "../atomic/galoy-icon"
+import { GaloyIconButton } from "../atomic/galoy-icon-button"
+import { GaloyPrimaryButton } from "../atomic/galoy-primary-button"
+import { GaloyToast } from "../galoy-toast"
+
+const LEARN_MORE_PAGE_URL = "https://sv24.adoptingbitcoin.org/"
+
+type Props = {
+  isVisible: boolean
+  setIsVisible: (isVisible: boolean) => void
+}
+
+export const JuneChallengeModal: React.FC<Props> = ({ isVisible, setIsVisible }) => {
+  const { LL } = useI18nContext()
+
+  const {
+    theme: { colors },
+  } = useTheme()
+  const styles = useStyles()
+
+  const acknowledgeModal = () => {
+    setIsVisible(false)
+  }
+
+  const { ShareImg, share } = useCirclesCard()
+
+  return (
+    <Modal
+      isVisible={isVisible}
+      backdropOpacity={0.8}
+      backdropTransitionOutTiming={0}
+      backdropColor={colors.white}
+      onBackdropPress={acknowledgeModal}
+    >
+      <View style={styles.modalCard}>
+        <View style={styles.container}>
+          <GaloyIconButton
+            style={styles.cross}
+            name="close"
+            size="medium"
+            onPress={acknowledgeModal}
+          />
+          <GaloyIcon style={styles.top} name="rank" size={40} color={colors.primary} />
+          <Text type="h1" bold>
+            {LL.Circles.juneChallenge.title()}
+          </Text>
+          <Text type="p1" style={styles.details}>
+            {LL.Circles.juneChallenge.details()}
+          </Text>
+          {ShareImg}
+          <GaloyPrimaryButton onPress={share} title={LL.Circles.shareCircles()} />
+          <Text style={styles.reminder} type="p3">
+            {LL.Circles.learnMore()}
+            <Text
+              style={styles.underline}
+              color={colors.grey3}
+              onPress={() => Linking.openURL(LEARN_MORE_PAGE_URL)}
+            >
+              {LEARN_MORE_PAGE_URL}
+            </Text>
+          </Text>
+          {/* <Text style={styles.reminder} type="p3" color={colors.grey3}>
+            {LL.Circles.connectOnSocial()}
+            <Text
+              style={styles.underline}
+              color={colors.grey3}
+              onPress={() => Linking.openURL(SOCIAL_LINK_TREE)}
+            >
+              {SOCIAL_LINK_TREE}
+            </Text>
+          </Text>
+          <Text style={styles.reminder} type="p3">
+            {LL.Circles.fullDetails()}
+            <Text
+              style={styles.underline}
+              color={colors.grey3}
+              onPress={() => Linking.openURL(CHALLENGE_PAGE_URL)}
+            >
+              {CHALLENGE_PAGE}
+            </Text>
+          </Text> */}
+        </View>
+      </View>
+      <GaloyToast />
+    </Modal>
+  )
+}
+
+const useStyles = makeStyles(({ colors }) => ({
+  container: {
+    paddingHorizontal: 12,
+    display: "flex",
+    flexDirection: "column",
+    rowGap: 20,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  cross: {
+    position: "absolute",
+    right: 20,
+    top: -10,
+  },
+  top: { marginTop: 40 },
+  modalCard: {
+    backgroundColor: colors.grey5,
+    borderRadius: 16,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    paddingVertical: 30,
+  },
+  details: {
+    textAlign: "center",
+    paddingHorizontal: 20,
+  },
+  reminder: {
+    textAlign: "center",
+    paddingHorizontal: 20,
+    color: colors.grey2,
+  },
+  underline: {
+    textDecorationLine: "underline",
+  },
+  containerData: {
+    display: "flex",
+    flexDirection: "column",
+    rowGap: 2,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+}))

app/i18n/en/index.ts

@@ -2845,10 +2845,16 @@ const en: BaseTranslation = {
     drivingAdoption: "I'm driving Bitcoin adoption using Blink.",
     connectOnSocial: "Connect on social: ",
     fullDetails: "Full details at ",
+    learnMore: "Learn more about Adopting Bitcoin at",
     mayChallenge: {
       title: "May Challenge!",
       description: "Grow your inner circle by 6 for a chance to win a set of Pizzas on your next Bitcoin Meetup.",
       details: "Want a Bitcoin Pizza Day Party?\n\nExpand your Inner Circle by 6 for a shot at winning a set of pizzas for your next Bitcoin Meetup. The challenge wraps up on May 15th.\n\nShare your circles on social with the hashtag #blinkcircles to participate.\n\nThe prize is $150 for pizzas."
+    },
+    juneChallenge: {
+      title: "June Challenge!",
+      description: "Expand your Inner Circle by 10 for a chance to win a $1000 privilege ticket to the Adopting Bitcoin El Salvador",
+      details: "Win a privilege ticket to Adopting Bitcoin El Salvador\n\nExpand your Inner Circle by 10 for a chance to win a $1000 privilege ticket to Adopting Bitcoin El Salvador! The ticket includes exclusive access to the main conference, mezzanine with food/drinks/snacks, speakers' dinner, and the Film Festival.\n\nShare your circles on social with the hashtag #blinkcircles to participate.\n\nThis time, there will be two winners!"
     }
   },
   FullOnboarding: {

app/i18n/i18n-types.ts

@@ -8940,6 +8940,10 @@ type RootTranslation = {
 		 * F​u​l​l​ ​d​e​t​a​i​l​s​ ​a​t​ 
 		 */
 		fullDetails: string
+		/**
+		 * L​e​a​r​n​ ​m​o​r​e​ ​a​b​o​u​t​ ​A​d​o​p​t​i​n​g​ ​B​i​t​c​o​i​n​ ​a​t
+		 */
+		learnMore: string
 		mayChallenge: {
 			/**
 			 * M​a​y​ ​C​h​a​l​l​e​n​g​e​!
@@ -8960,6 +8964,26 @@ type RootTranslation = {
 			 */
 			details: string
 		}
+		juneChallenge: {
+			/**
+			 * J​u​n​e​ ​C​h​a​l​l​e​n​g​e​!
+			 */
+			title: string
+			/**
+			 * E​x​p​a​n​d​ ​y​o​u​r​ ​I​n​n​e​r​ ​C​i​r​c​l​e​ ​b​y​ ​1​0​ ​f​o​r​ ​a​ ​c​h​a​n​c​e​ ​t​o​ ​w​i​n​ ​a​ ​$​1​0​0​0​ ​p​r​i​v​i​l​e​g​e​ ​t​i​c​k​e​t​ ​t​o​ ​t​h​e​ ​A​d​o​p​t​i​n​g​ ​B​i​t​c​o​i​n​ ​E​l​ ​S​a​l​v​a​d​o​r
+			 */
+			description: string
+			/**
+			 * W​i​n​ ​a​ ​p​r​i​v​i​l​e​g​e​ ​t​i​c​k​e​t​ ​t​o​ ​A​d​o​p​t​i​n​g​ ​B​i​t​c​o​i​n​ ​E​l​ ​S​a​l​v​a​d​o​r​
+		​
+		​E​x​p​a​n​d​ ​y​o​u​r​ ​I​n​n​e​r​ ​C​i​r​c​l​e​ ​b​y​ ​1​0​ ​f​o​r​ ​a​ ​c​h​a​n​c​e​ ​t​o​ ​w​i​n​ ​a​ ​$​1​0​0​0​ ​p​r​i​v​i​l​e​g​e​ ​t​i​c​k​e​t​ ​t​o​ ​A​d​o​p​t​i​n​g​ ​B​i​t​c​o​i​n​ ​E​l​ ​S​a​l​v​a​d​o​r​!​ ​T​h​e​ ​t​i​c​k​e​t​ ​i​n​c​l​u​d​e​s​ ​e​x​c​l​u​s​i​v​e​ ​a​c​c​e​s​s​ ​t​o​ ​t​h​e​ ​m​a​i​n​ ​c​o​n​f​e​r​e​n​c​e​,​ ​m​e​z​z​a​n​i​n​e​ ​w​i​t​h​ ​f​o​o​d​/​d​r​i​n​k​s​/​s​n​a​c​k​s​,​ ​s​p​e​a​k​e​r​s​'​ ​d​i​n​n​e​r​,​ ​a​n​d​ ​t​h​e​ ​F​i​l​m​ ​F​e​s​t​i​v​a​l​.​
+		​
+		​S​h​a​r​e​ ​y​o​u​r​ ​c​i​r​c​l​e​s​ ​o​n​ ​s​o​c​i​a​l​ ​w​i​t​h​ ​t​h​e​ ​h​a​s​h​t​a​g​ ​#​b​l​i​n​k​c​i​r​c​l​e​s​ ​t​o​ ​p​a​r​t​i​c​i​p​a​t​e​.​
+		​
+		​T​h​i​s​ ​t​i​m​e​,​ ​t​h​e​r​e​ ​w​i​l​l​ ​b​e​ ​t​w​o​ ​w​i​n​n​e​r​s​!
+			 */
+			details: string
+		}
 	}
 	FullOnboarding: {
 		/**
@@ -17880,6 +17904,10 @@ export type TranslationFunctions = {
 		 * Full details at 
 		 */
 		fullDetails: () => LocalizedString
+		/**
+		 * Learn more about Adopting Bitcoin at
+		 */
+		learnMore: () => LocalizedString
 		mayChallenge: {
 			/**
 			 * May Challenge!
@@ -17900,6 +17928,26 @@ export type TranslationFunctions = {
 			 */
 			details: () => LocalizedString
 		}
+		juneChallenge: {
+			/**
+			 * June Challenge!
+			 */
+			title: () => LocalizedString
+			/**
+			 * Expand your Inner Circle by 10 for a chance to win a $1000 privilege ticket to the Adopting Bitcoin El Salvador
+			 */
+			description: () => LocalizedString
+			/**
+			 * Win a privilege ticket to Adopting Bitcoin El Salvador
+
+		Expand your Inner Circle by 10 for a chance to win a $1000 privilege ticket to Adopting Bitcoin El Salvador! The ticket includes exclusive access to the main conference, mezzanine with food/drinks/snacks, speakers' dinner, and the Film Festival.
+
+		Share your circles on social with the hashtag #blinkcircles to participate.
+
+		This time, there will be two winners!
+			 */
+			details: () => LocalizedString
+		}
 	}
 	FullOnboarding: {
 		/**

app/i18n/raw-i18n/source/en.json

@@ -2726,10 +2726,16 @@
         "drivingAdoption": "I'm driving Bitcoin adoption using Blink.",
         "connectOnSocial": "Connect on social: ",
         "fullDetails": "Full details at ",
+        "learnMore": "Learn more about Adopting Bitcoin at ",
         "mayChallenge": {
             "title": "May Challenge!",
             "description": "Grow your inner circle by 6 for a chance to win a set of Pizzas on your next Bitcoin Meetup.",
             "details": "Want a Bitcoin Pizza Day Party?\n\nExpand your Inner Circle by 6 for a shot at winning a set of pizzas for your next Bitcoin Meetup. The challenge wraps up on May 15th.\n\nShare your circles on social with the hashtag #blinkcircles to participate.\n\nThe prize is $150 for pizzas."
+        },
+        "juneChallenge": {
+            "title": "June Challenge!",
+            "description": "Expand your Inner Circle by 10 for a chance to win a $1000 privilege ticket to the Adopting Bitcoin El Salvador",
+            "details": "Win a privilege ticket to Adopting Bitcoin El Salvador\n\nExpand your Inner Circle by 10 for a chance to win a $1000 privilege ticket to Adopting Bitcoin El Salvador! The ticket includes exclusive access to the main conference, mezzanine with food/drinks/snacks, speakers' dinner, and the Film Festival.\n\nShare your circles on social with the hashtag #blinkcircles to participate.\n\nThis time, there will be two winners!"
         }
     },
     "FullOnboarding": {

app/i18n/raw-i18n/translations/es.json

@@ -2685,6 +2685,7 @@
         "drivingAdoption": "Estoy impulsando la adopción de Bitcoin usando Blink.",
         "connectOnSocial": "Conecta en redes sociales:",
         "fullDetails": "Detalles completos en",
+        "learnMore": "Obtén más información sobre Adopting Bitcoin en ",
         "decemberChallenge": {
             "title": "¡Reto de diciembre! ",
             "description": "\"¡+10 amigos a tu círculo interno para tener la oportunidad de ganar $100!\"",
@@ -2709,6 +2710,11 @@
             "title": "Reto de abril!",
             "description": "Amplia en 12 tu círculo interno y en 3 tu círculo externo para tener la oportunidad de ganar una Bitbox02 hardware wallet.",
             "details": "En el mes del Halving, amplía tu Círculo Interior en 12 y aumenta tu Círculo Exterior en 3 para tener la oportunidad de ganar una Bitbox02 hardware wallet.\n\nRecordatorio: Tus círculos crecen cuando envías a un nuevo usuario de Blink sus primeros sats.\n\nComparte tus círculos en las redes sociales con el hashtag #blinkcircles para participar."
+        },
+        "juneChallenge": {
+            "title": "Challenge de Junio!",
+            "description": "¡Amplía tu Círculo Interno en 10 para tener la oportunidad de ganar un boleto privilegio de $1000 para Adopting Bitcoin El Salvador!",
+            "details": "Gana un boleto privilegio para Adopting Bitcoin El Salvador\n\n¡Amplía tu Círculo Interno en 10 para tener la oportunidad de ganar un boleto privilegio de $1000 para Adopting Bitcoin El Salvador! El boleto incluye acceso exclusivo a la conferencia principal, al entrepiso con comida/bebidas/snacks, a la cena de los oradores y al Festival de Cine.\n\nComparte tus círculos en las redes sociales con el hashtag #blinkcircles para participar.\n\n¡Esta vez, habrá dos ganadores!"
         }
     },
     "FullOnboarding": {

app/screens/people-screen/circles/circles-dashboard-screen.tsx

@@ -16,6 +16,7 @@ import { Text, makeStyles, useTheme } from "@rneui/themed"
 import { Screen } from "../../../components/screen"
 import { InviteFriendsCard } from "./invite-friends-card"
 import { ShareCircles } from "./share-circles-card"
+import { JuneChallengeCard } from "@app/components/june-challenge"
 
 gql`
   query Circles {
@@ -153,6 +154,7 @@ export const CirclesDashboardScreen: React.FC = () => {
           </View>
         )}
         <MayChallengeCard />
+        <JuneChallengeCard />
         {isLonely ? <InviteFriendsCard /> : <ShareCircles />}
       </ScrollView>
     </Screen>

app/utils/date.ts

@@ -26,6 +26,10 @@ export const JUNE_1_2024_12_AM_UTC_MINUS_6 = new Date(
   Date.UTC(2024, 5, 1, 6, 0, 0),
 ).getTime()
 
+export const JULY_1_2024_12_AM_UTC_MINUS_6 = new Date(
+  Date.UTC(2024, 6, 1, 6, 0, 0),
+).getTime()
+
 const secondsToDDMMSS = (totalSeconds: number) => {
   if (totalSeconds < 0) return ""