Feature/redeem urls

pages/redeem/[code].tsx

@@ -0,0 +1,26 @@
+import { useRouter } from 'next/router';
+import React, { useEffect } from 'react';
+import UserProfileLoader from '../../src/features/common/ContentLoaders/UserProfile/UserProfile';
+import Footer from '../../src/features/common/Layout/Footer';
+import { getRequest } from '../../src/utils/apiRequests/api';
+import Redeem from '../../src/features/public/Redeem';
+
+interface Props {
+  initialized: Boolean;
+}
+
+export default function PublicUser(initialized: Props) {
+  const [ready, setReady] = React.useState(false);
+  const [slug, setSlug] = React.useState('');
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (router && router.query.code) {
+      setSlug(router.query.code);
+      setReady(true);
+    }
+  }, [router]);
+
+  return ready ? <Redeem slug={slug} /> : <UserProfileLoader />;
+}

src/features/public/Redeem/Redeem.module.scss

@@ -0,0 +1,119 @@
+@import '../../../theme/theme';
+
+.redeem {
+  display: flex;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.redeemContainer {
+  position: absolute;
+  top: 220px;
+  margin-bottom: 60px;
+  border: 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+}
+.redeemUserName {
+  font-family: $primaryFontFamily;
+  font-size: 41px;
+  font-weight: bold;
+  line-height: 0.66;
+  text-align: center;
+  color: $light;
+}
+
+.mapContainer {
+  width: 300px;
+  height: 251px;
+  border-radius: 13px;
+  margin-top: 12px;
+  > div {
+    height: 100%;
+    width: 100%;
+    > div > div {
+      border-radius: 13px;
+    }
+  }
+}
+.plantedGiftMessage {
+  max-width: 440px;
+  margin-top: 20px;
+  font-family: $primaryFontFamily;
+  font-size: 20px;
+  line-height: 1.2;
+  letter-spacing: 0.4px;
+  text-align: center;
+  color: $light;
+  font-weight: normal;
+}
+.signupMessage {
+  max-width: 440px;
+  margin-top: 20px;
+  font-family: $primaryFontFamily;
+  font-size: 20px;
+  line-height: 1.2;
+  letter-spacing: 0.4px;
+  text-align: center;
+  color: $light;
+  font-weight: normal;
+}
+.authButtonsContainer {
+  margin: auto 20px;
+  margin-top: 30px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  :nth-child(2) {
+    margin-left: 26px;
+  }
+  .authButton {
+    height: 52px;
+    padding: 15px 60px;
+    border-radius: 100px;
+    border: solid 1px $light;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.38;
+    letter-spacing: 0.21px;
+    text-align: center;
+    color: #ffffff;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+@include smTabletView {
+  .mapContainer {
+    width: 440px;
+  }
+}
+
+.marker {
+  height: 30px;
+  border-radius: 4px;
+  background: $primaryColor;
+  margin: -20px 0 0 -20px;
+  padding: 4px 16px;
+  box-shadow: -2px 2px 8px 0px rgba(0, 0, 0, 0.16);
+  cursor: pointer;
+  position: relative;
+  color: white;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    width: 0;
+    height: 0;
+    left: 42%;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid $primaryColor;
+    clear: both;
+  }
+}

src/features/public/Redeem/index.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import Footer from '../../common/Layout/Footer';
+import LandingSection from '../../common/Layout/LandingSection';
+import styles from './Redeem.module.scss';
+import { useAuth0 } from '@auth0/auth0-react';
+import MapGL, { Marker, Popup, WebMercatorViewport } from 'react-map-gl';
+import getMapStyle from '../../../utils/maps/getMapStyle';
+interface Props {
+  slug: string;
+}
+
+const Redeem = ({ slug }: Props) => {
+  const {
+    isLoading,
+    isAuthenticated,
+    getAccessTokenSilently,
+    loginWithRedirect,
+  } = useAuth0();
+
+  const isGift = false;
+  const byOrg = false;
+  const isPlanted = true;
+  const EMPTY_STYLE = {
+    version: 8,
+    sources: {},
+    layers: [],
+  };
+  const defaultMapCenter = [20.9802115, -89.702959];
+  const defaultZoom = 7;
+  const [viewport, setViewPort] = React.useState({
+    width: Number('100%'),
+    height: Number('100%'),
+    latitude: defaultMapCenter[0],
+    longitude: defaultMapCenter[1],
+    zoom: defaultZoom,
+  });
+
+  const [mapState, setMapState] = React.useState({
+    mapStyle: EMPTY_STYLE,
+    dragPan: true,
+    scrollZoom: false,
+    minZoom: 1,
+    maxZoom: 15,
+  });
+
+  React.useEffect(() => {
+    //loads the default mapstyle
+    async function loadMapStyle() {
+      const result = await getMapStyle('default');
+      if (result) {
+        setMapState({ ...mapState, mapStyle: result });
+      }
+    }
+    loadMapStyle();
+  }, []);
+
+  const _onStateChange = (state: any) => setMapState({ ...state });
+
+  return (
+    <>
+      <div className={styles.redeem}>
+        <LandingSection
+          imageSrc={
+            'https://cdn.plant-for-the-planet.org/media/images/app/bg_layer.jpg'
+          }
+        ></LandingSection>
+        <div className={styles.redeemContainer}>
+          <h2 className={styles.redeemUserName}>Hi Paulina!</h2>
+
+          <div className={styles.mapContainer}>
+            <MapGL {...viewport} {...mapState} onStateChange={_onStateChange}>
+              <Marker latitude={20.9802115} longitude={-89.702959}>
+                <div className={styles.marker}>500 Trees</div>
+              </Marker>
+            </MapGL>
+          </div>
+
+          <div className={styles.plantedGiftMessage}>
+            {isGift
+              ? 'Felix gifted you 5 trees! Your trees are being planted in Yucatan, Mexico '
+              : byOrg
+              ? 'Congratulations on your 5 trees from Salesforce! Your trees are being planted in Yucatan, Mexico'
+              : 'You’ve planted X trees!'}
+          </div>
+          {!byOrg && !isAuthenticated ? (
+            <div className={styles.signupMessage}>
+              {isPlanted
+                ? 'These trees have already been added to an account.'
+                : 'Sign up to keep track of your trees as they grow – and maybe even plant more trees yourself.'}
+            </div>
+          ) : null}
+
+          {!byOrg && !isAuthenticated ? (
+            <div className={styles.authButtonsContainer}>
+              <div
+                onClick={() =>
+                  loginWithRedirect({
+                    redirectUri: `${process.env.NEXTAUTH_URL}/login`,
+                    ui_locales: localStorage.getItem('language') || 'en',
+                  })
+                }
+                className={styles.authButton}
+              >
+                Sign Up
+              </div>
+              <div
+                onClick={() =>
+                  loginWithRedirect({
+                    redirectUri: `${process.env.NEXTAUTH_URL}/login`,
+                    ui_locales: localStorage.getItem('language') || 'en',
+                  })
+                }
+                className={styles.authButton}
+              >
+                Log in
+              </div>
+            </div>
+          ) : !isPlanted ? (
+            <div className={styles.authButtonsContainer}>
+              <div className={styles.authButton}>Add to my profile</div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+};
+
+export default Redeem;