Merchshop add background image

apps/api/.docker/web.env.default

@@ -16,22 +16,19 @@
 # you MUST add them to this file and update the ansible configuration
 # accordingly.
 
-DB_HOST={{ API_DB_HOST | default("phoenix_db", true) }}
-DB_PORT={{ API_DB_PORT | default(5432, true) }}
-DB_TABLE={{ API_DB_TABLE | default("phoenix", true) }}
-DB_USERNAME={{ API_DB_USERNAME | default("phoenix", true) }}
-DB_PASSWORD={{ API_DB_PASSWORD | default("phoenix", true) }}
+DB_HOST=phoenix_db
+DB_PORT=5433
+DB_TABLE=phoenix
+DB_USERNAME=phoenix
+DB_PASSWORD=phoenix
 
-AUTH0_DOMAIN={{ API_AUTH0_DOMAIN | default("mstacm-test.auth0.com", true) }}
+AUTH0_DOMAIN=mstacm-test.auth0.com
 
-SECRET_APP_KEY={{ API_SECRET_APP_KEY | default("changeme", true) }}
+SECRET_APP_KEY=Yp74+YlwLtXhzuKzhHGh+gQ2Lfrc9e0c83YjzVGHCUA
 
-DO_SPACES_CDN_BUCKET_NAME={{ API_DO_SPACES_CDN_BUCKET_NAME | default("mstacm-cdn-test", true) }}
-DO_SPACES_REGION={{ API_DO_SPACES_REGION | default("nyc3", true) }}
-DO_SPACES_ENDPOINT={{ API_DO_SPACES_ENDPOINT | default("nyc3.digitaloceanspaces.com", true) }}
-DO_SPACES_ACCESS_KEY_ID={{ API_DO_SPACES_ACCESS_KEY_ID | default("changeme", true) }}
-DO_SPACES_SECRET_KEY_ID={{ API_DO_SPACES_SECRET_KEY_ID | default("changeme", true) }}
+DO_SPACES_CDN_BUCKET_NAME=mstacm-cdn-test
+DO_SPACES_REGION=nyc3
+DO_SPACES_ENDPOINT=nyc3.digitaloceanspaces.com
+DO_SPACES_ACCESS_KEY_ID=3Q6ZORMD42BZVDPJ2M3W
+DO_SPACES_SECRET_KEY_ID=BUdhN4dBkQ5ojHJyUy/UOqBOWfX9zrpkF+QVMVGTN6A
 
-STRIPE_PUBLIC_TOKEN={{ API_STRIPE_PUBLIC_TOKEN | default("changeme", true) }}
-STRIPE_PRIVATE_TOKEN={{ API_STRIPE_PRIVATE_TOKEN | default("changeme", true) }}
-STRIPE_WEBHOOK_SECRET={{ API_STRIPE_WEBHOOK_SECRET | default("changeme", true) }}

apps/mobile/starter/.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

apps/shop-portal/codegen.yml

@@ -0,0 +1,14 @@
+overwrite: true
+schema: "http://localhost/graphql"
+documents: "src/**/*.{graphql,ts,tsx}"
+generates:
+  src/generated/graphql.tsx:
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-react-apollo'
+    config:
+      withHOC: false
+      withComponent: false
+      withHooks: true
+      hooksImportFrom: "@apollo/react-hooks"

apps/shop-portal/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@mstacm/shop-portal",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@ant-design/icons": "^4.7.0",
+    "@apollo/react-hooks": "^3.1.1",
+    "@auth0/auth0-spa-js": "^1.1.1",
+    "antd": "^3.20.7",
+    "apollo-cache-inmemory": "^1.6.6",
+    "apollo-client": "^2.6.10",
+    "apollo-link": "^1.2.14",
+    "apollo-link-context": "^1.0.19",
+    "apollo-link-http": "^1.5.17",
+    "graphql-tag": "^2.10.1",
+    "js-file-download": "^0.4.7",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-eva-icons": "^0.0.8",
+    "react-use": "^12.2.0",
+    "styled-components": "^4.3.2"
+  },
+  "scripts": {
+    "build:css": "postcss src/tailwind.css -o src/index.css",
+    "watch:css": "postcss src/tailwind.css -o src/index.css -w",
+    "build:types": "graphql-codegen --config codegen.yml",
+    "watch:types": "graphql-codegen --config codegen.yml -w",
+    "run": "react-scripts start",
+    "start": "npm-run-all -p watch:css watch:types run",
+    "build": "yarn build:css; yarn build:types; react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "^1.4.0",
+    "@graphql-codegen/introspection": "^1.7.0",
+    "@graphql-codegen/typescript": "^1.7.0",
+    "@graphql-codegen/typescript-operations": "^1.4.0",
+    "@graphql-codegen/typescript-react-apollo": "^1.7.0",
+    "@types/jest": "^24.0.15",
+    "@types/node": "^12.6.8",
+    "@types/pdfjs-dist": "^2.0.1",
+    "@types/react": "^16.8.23",
+    "@types/react-dom": "^16.8.5",
+    "@types/styled-components": "4.1.8",
+    "@typescript-eslint/eslint-plugin": "^2.3.3",
+    "@typescript-eslint/parser": "^2.3.3",
+    "autoprefixer": "^9.6.1",
+    "eslint": "^6.5.1",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.12.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "jest-watch-typeahead": "^0.4.0",
+    "npm-run-all": "^4.1.5",
+    "postcss-cli": "^6.1.3",
+    "react-scripts": "^3.4.1",
+    "tailwindcss": "^1.0.5",
+    "typescript": "^3.6.4"
+  }
+}

apps/shop-portal/public/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>S&T ACM | Shop</title>
+  </head>
+  <body> 
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

apps/shop-portal/src/App.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import "./index.css";
+import NavBar from "./components/NavBar/NavBar";
+import styled from "styled-components";
+
+function App() {
+    const HeroImage = styled.img`
+    display: none;
+
+    @media screen and (min-width: 768px) {
+      width: 800px;
+      display: block;
+      opacity: 0.5;
+      position: absolute;
+      right: 300px;
+      bottom: -250px;
+      pointer-events: none;
+    }
+
+    @media screen and (min-width: 1300px) and (min-height: 800px) {
+      width: 940px;
+    }
+
+    @media screen and (min-height: 1000px) {
+      width: 800px;
+      bottom: -250px;
+    }
+  `;
+    return (
+        <div className="App">
+            <NavBar />
+            {/* <img src="https://cdn.mstacm.org/static/acm-logo-large.svg"></img> */}
+            <HeroImage src="https://cdn.mstacm.org/static/acm-logo-large.svg" />
+        </div>
+    );
+}
+
+export default App;

apps/shop-portal/src/components/NavBar/NavBar.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import "../../index.css";
+import { ShoppingCartOutlined } from "@ant-design/icons"
+
+import acmlogo from "../../images/acmlogo.png";
+
+function NavBar() {
+    return(
+        <div className="NavBar">
+            <img src={acmlogo} alt="acmlogo" id="acmlogo" width="85px"/>
+            <p className="ShoppingCart">
+                <ShoppingCartOutlined/>
+            </p>
+
+        </div>
+    )
+}
+
+export default NavBar;

apps/shop-portal/src/config.ts

@@ -0,0 +1,31 @@
+export interface IConfig {
+    ACCESS_TOKEN_KEY: string;
+    API_URI: string;
+    AUTH0_AUDIENCE: string;
+    AUTH0_CLIENT_ID: string;
+    AUTH0_DOMAIN: string;
+    CDN_URI: string;
+    REDEMPTION_CODE_KEY: string;
+    REDEMPTION_QUERY_PARAM_KEY: string;
+    STRIPE_PUBLIC_KEY: string;
+  }
+
+  const IS_PROD: boolean = process.env.NODE_ENV === "production";
+
+  export const config: IConfig = {
+    ACCESS_TOKEN_KEY: "auth0_access_token",
+    API_URI: IS_PROD
+      ? "https://api.mstacm.org/graphql"
+      : "http://localhost/graphql",
+    AUTH0_AUDIENCE: process.env.REACT_APP_AUTH0_AUDIENCE || "graphql.mstacm.org",
+    AUTH0_CLIENT_ID:
+      process.env.REACT_APP_AUTH0_CLIENT_ID || "na6x6uijGdUE2zpiu9MqmSRQwGUdhNQl",
+    AUTH0_DOMAIN: process.env.REACT_APP_AUTH0_DOMAIN || "mstacm-test.auth0.com",
+    CDN_URI: process.env.REACT_APP_CDN_URI || "https://cdn.mstacm.org",
+    REDEMPTION_CODE_KEY: "redemption_code",
+    REDEMPTION_QUERY_PARAM_KEY: "redeem",
+    STRIPE_PUBLIC_KEY:
+      process.env.REACT_APP_STRIPE_PUBLIC_KEY ||
+      "pk_test_5K6vSoTGrPyY2cBw3nNSixV300Z8JOVkl7"
+  };
+