Merge remote-tracking branch 'origin/staging' into devalias/deps-upgr…

…ade-react-scripts

functions/venue.js

@@ -2,6 +2,7 @@ const admin = require("firebase-admin");
 const functions = require("firebase-functions");
 const { checkAuth } = require("./auth");
 const { HttpsError } = require("firebase-functions/lib/providers/https");
+
 const PLAYA_VENUE_ID = "jamonline";
 const MAX_TRANSIENT_EVENT_DURATION_HOURS = 6;
 
@@ -19,6 +20,8 @@ const VenueTemplate = {
   partymap: "partymap",
   performancevenue: "performancevenue",
   playa: "playa",
+  posterhall: "posterhall",
+  posterpage: "posterpage",
   preplaya: "preplaya",
   themecamp: "themecamp",
   zoomroom: "zoomroom",
@@ -240,6 +243,8 @@ const getVenueId = (name) => {
   return name.replace(/\W/g, "").toLowerCase();
 };
 
+const checkIfValidVenueId = (venueId) => /[a-z0-9_]{1,250}/.test(venueId);
+
 const dataOrUpdateKey = (data, updated, key) =>
   (data && data[key] && typeof data[key] !== "undefined" && data[key]) ||
   (updated &&
@@ -832,3 +837,23 @@ exports.getOwnerData = functions.https.onCall(async ({ userId }) => {
 
   return user;
 });
+
+exports.setVenueLiveStatus = functions.https.onCall(async (data, context) => {
+  checkAuth(context);
+
+  const isValidVenueId = checkIfValidVenueId(data.venueId);
+
+  if (!isValidVenueId) {
+    throw new HttpsError("invalid-argument", `venueId is not a valid venue id`);
+  }
+
+  if (typeof data.isLive !== "boolean") {
+    throw new HttpsError("invalid-argument", `isLive is not a boolean`);
+  }
+
+  const update = {
+    isLive: Boolean(data.isLive),
+  };
+
+  await admin.firestore().collection("venues").doc(data.venueId).update(update);
+});

src/api/venue.ts

@@ -0,0 +1,36 @@
+import Bugsnag from "@bugsnag/js";
+import firebase from "firebase/app";
+
+export interface SetVenueLiveStatusProps {
+  venueId: string;
+  isLive: boolean;
+  onError?: (msg: string) => void;
+  onFinish?: () => void;
+}
+
+export const setVenueLiveStatus = async ({
+  venueId,
+  isLive,
+  onError,
+  onFinish,
+}: SetVenueLiveStatusProps): Promise<void | firebase.functions.HttpsCallableResult> => {
+  const params = {
+    isLive,
+    venueId,
+  };
+
+  return firebase
+    .functions()
+    .httpsCallable("venue-setVenueLiveStatus")(params)
+    .catch((err) => {
+      Bugsnag.notify(err, (event) => {
+        event.addMetadata("context", {
+          location: "api/venue::setVenueLiveStatus",
+          venueId,
+        });
+      });
+
+      if (onError) onError(err);
+    })
+    .finally(onFinish);
+};

src/api/video.ts

@@ -0,0 +1,38 @@
+import Bugsnag from "@bugsnag/js";
+import firebase from "firebase/app";
+
+export interface GetVideoTokenProps {
+  userId: string;
+  roomName: string;
+  onError?: (msg: string) => void;
+  onFinish?: () => void;
+}
+
+export type VideoToken = string;
+
+export const getVideoToken = async ({
+  userId,
+  roomName,
+  onError,
+  onFinish,
+}: GetVideoTokenProps): Promise<void | VideoToken> => {
+  return firebase
+    .functions()
+    .httpsCallable("video-getToken")({
+      identity: userId,
+      room: roomName,
+    })
+    .then<VideoToken>((res) => res.data.token)
+    .catch((err) => {
+      Bugsnag.notify(err, (event) => {
+        event.addMetadata("context", {
+          location: "api/video::getVideoToken",
+          userId,
+          roomName,
+        });
+      });
+
+      if (onError) onError(err);
+    })
+    .finally(onFinish);
+};

src/components/atoms/Button/Button.tsx

@@ -7,7 +7,7 @@ import { ButtonProps } from "./Button.types";
 import * as S from "./Button.styles";
 import { Link } from "react-router-dom";
 
-const AppButton: React.FC<ButtonProps> = ({
+export const AppButton: React.FC<ButtonProps> = ({
   customClass,
   loading,
   onClick,

src/components/atoms/Button/index.ts

@@ -1 +1,5 @@
+/**
+ * @deprecated Use named export instead of default export
+ */
 export { default } from "./Button";
+export { AppButton as Button } from "./Button";

src/components/atoms/Checkbox/Checkbox.scss

@@ -0,0 +1,108 @@
+@import "scss/constants";
+
+$checkbox-diameter: 32px;
+
+$checkbox-transition: all 200ms $transition-function;
+$checkbox-shadow-preset: inset 0 0 0 1px;
+
+$toggler-width: 56px;
+$toggler-height: 30px;
+
+$toggler-circle-diameter: 26px;
+$toggler-circle-spacing: 2px;
+
+$toggler-circle-moving-delta: $toggler-width - $toggler-circle-diameter -
+  $toggler-circle-spacing;
+
+.Checkbox {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  position: relative;
+
+  cursor: pointer;
+
+  // unsetting global label styles
+  margin: 0;
+
+  &__native-input {
+    &:checked ~ .Checkbox__custom-input {
+      background-color: $primary;
+
+      .Checkbox__tick-icon {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      &--toggler {
+        background-color: $dimmer-primary;
+
+        &::after {
+          left: $toggler-circle-moving-delta;
+
+          background-color: $primary;
+        }
+      }
+    }
+  }
+
+  &__custom-input {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: $checkbox-diameter;
+    height: $checkbox-diameter;
+
+    box-shadow: $checkbox-shadow-preset opaque-white(0.1);
+    background-color: opaque-white(0.12);
+
+    border-radius: $border-radius--max;
+
+    &:hover {
+      background-color: opaque-white(0.16);
+      box-shadow: $checkbox-shadow-preset opaque-white(0.4);
+    }
+
+    &--toggler {
+      width: $toggler-width;
+      height: $toggler-height;
+
+      border-radius: $border-radius--xl;
+
+      &::after {
+        content: "";
+        position: absolute;
+
+        height: $toggler-circle-diameter;
+        width: $toggler-circle-diameter;
+
+        border-radius: $border-radius--max;
+
+        background-color: opaque-white(0.3);
+
+        left: $toggler-circle-spacing;
+        top: $toggler-circle-spacing;
+
+        transform: scale(1);
+        transition: $checkbox-transition;
+      }
+
+      .Checkbox__tick-icon {
+        display: none;
+      }
+    }
+  }
+
+  &__tick-icon {
+    opacity: 0;
+    transform: scale(0.2);
+    transition: $checkbox-transition;
+  }
+
+  &__label {
+    margin-left: $spacing--md;
+    font-size: $font-size--md;
+  }
+}

src/components/atoms/Checkbox/Checkbox.tsx

@@ -0,0 +1,58 @@
+import React, { DetailedHTMLProps, InputHTMLAttributes } from "react";
+import classNames from "classnames";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+
+import "./Checkbox.scss";
+
+export interface CheckboxProps
+  extends DetailedHTMLProps<
+    InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  label?: string;
+  toggler?: boolean;
+  containerClassName?: string;
+  labelClassName?: string;
+  forwardedRef?: (
+    value: React.RefObject<HTMLInputElement> | HTMLInputElement | null
+  ) => void;
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+  label,
+
+  toggler: isToggler = false,
+
+  containerClassName,
+  labelClassName,
+
+  forwardedRef,
+  ...extraInputProps
+}) => {
+  const containerClasses = classNames("Checkbox", containerClassName);
+  const checkboxClasses = classNames("Checkbox__custom-input", {
+    "Checkbox__custom-input--toggler": isToggler,
+  });
+  const labelClasses = classNames("Checkbox__label", labelClassName);
+
+  return (
+    <label className={containerClasses}>
+      <input
+        className="Checkbox__native-input"
+        hidden
+        type="checkbox"
+        ref={forwardedRef}
+        {...extraInputProps}
+      />
+      <div className={checkboxClasses}>
+        <FontAwesomeIcon
+          icon={faCheck}
+          size="sm"
+          className="Checkbox__tick-icon"
+        />
+      </div>
+      {label && <div className={labelClasses}>{label}</div>}
+    </label>
+  );
+};

src/components/atoms/Checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox } from "./Checkbox";

src/components/atoms/PosterCategory/PosterCategory.scss

@@ -0,0 +1,12 @@
+@import "scss/constants";
+
+.PosterCategory {
+  display: flex;
+  font-size: $font-size--xs;
+  color: $white;
+  padding: $spacing--xs $spacing--sm;
+  margin: $spacing--xs;
+  border-radius: $border-radius--lg;
+  background-color: $primary;
+  font-weight: $font-weight--500;
+}

src/components/atoms/PosterCategory/PosterCategory.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import "./PosterCategory.scss";
+
+export interface PosterCategoryProps {
+  category: string;
+}
+
+export const PosterCategory: React.FC<PosterCategoryProps> = ({ category }) => (
+  <span className="PosterCategory">{category}</span>
+);

src/components/atoms/PosterCategory/index.ts

@@ -0,0 +1 @@
+export { PosterCategory } from "./PosterCategory";