diff --git a/app/components/june-challenge/card.tsx b/app/components/june-challenge/card.tsx new file mode 100644 index 0000000000..ef6b0d144c --- /dev/null +++ b/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 ( + + + + + + + {LL.Circles.juneChallenge.title()} + + {countDown} + + {LL.Circles.juneChallenge.description()} + + + + + + + ) +} + +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, + }, +})) diff --git a/app/components/june-challenge/index.tsx b/app/components/june-challenge/index.tsx new file mode 100644 index 0000000000..cfa5107fa6 --- /dev/null +++ b/app/components/june-challenge/index.tsx @@ -0,0 +1,2 @@ +export * from "./modal" +export * from "./card" diff --git a/app/components/june-challenge/modal.tsx b/app/components/june-challenge/modal.tsx new file mode 100644 index 0000000000..e9676e80e2 --- /dev/null +++ b/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 = ({ isVisible, setIsVisible }) => { + const { LL } = useI18nContext() + + const { + theme: { colors }, + } = useTheme() + const styles = useStyles() + + const acknowledgeModal = () => { + setIsVisible(false) + } + + const { ShareImg, share } = useCirclesCard() + + return ( + + + + + + + {LL.Circles.juneChallenge.title()} + + + {LL.Circles.juneChallenge.details()} + + {ShareImg} + + + {LL.Circles.learnMore()} + Linking.openURL(LEARN_MORE_PAGE_URL)} + > + {LEARN_MORE_PAGE_URL} + + + {/* + {LL.Circles.connectOnSocial()} + Linking.openURL(SOCIAL_LINK_TREE)} + > + {SOCIAL_LINK_TREE} + + + + {LL.Circles.fullDetails()} + Linking.openURL(CHALLENGE_PAGE_URL)} + > + {CHALLENGE_PAGE} + + */} + + + + + ) +} + +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", + }, +})) diff --git a/app/i18n/en/index.ts b/app/i18n/en/index.ts index 1f31fcf792..409130dca6 100644 --- a/app/i18n/en/index.ts +++ b/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: { diff --git a/app/i18n/i18n-types.ts b/app/i18n/i18n-types.ts index 98af3860c0..fb5762805e 100644 --- a/app/i18n/i18n-types.ts +++ b/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: { /** diff --git a/app/i18n/raw-i18n/source/en.json b/app/i18n/raw-i18n/source/en.json index f014d6b5bd..bafd783308 100644 --- a/app/i18n/raw-i18n/source/en.json +++ b/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": { diff --git a/app/i18n/raw-i18n/translations/es.json b/app/i18n/raw-i18n/translations/es.json index 815f6b6374..250b620edd 100644 --- a/app/i18n/raw-i18n/translations/es.json +++ b/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": { diff --git a/app/screens/people-screen/circles/circles-dashboard-screen.tsx b/app/screens/people-screen/circles/circles-dashboard-screen.tsx index 7ec9eb51b5..c1b85b0679 100644 --- a/app/screens/people-screen/circles/circles-dashboard-screen.tsx +++ b/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 = () => { )} + {isLonely ? : } diff --git a/app/utils/date.ts b/app/utils/date.ts index 19abd56289..a849e5e0b9 100644 --- a/app/utils/date.ts +++ b/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 ""