diff --git a/README.md b/README.md index 74872fd..b7a7555 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,43 @@ Currently, two official plugins are available: - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +### White-labeling + +Steps to add a new white label + +1. Client Instructions: + +- supply assets and colours to be used for the white-label (favicon if necessary) +- determine a sub-domain to use as mask, dashboard is preferred (ex: dashboard.example.com) +- add a `CNAME` record pointing their custom subdomain (ex: dashboard.example.com) to brandxtech.ca +- add a login button on their website point to `/login` of their custom subdomain (ex: dashboard.example.com/login) + + +2. Create a PWA folder in `public` that is named after the client and generate PWA assets using [this](https://realfavicongenerator.net/) website (use the company logo but you might need to use a custom favicon depending on the result) + +- https://maskable.app/ also create a maskable icon for PWA +- create a 512x512 png as well for PWA + +3. Create a white-label branding folder in `src/assets/whitelabels` and create a `darkLogo.png` and `lightLogo.png` from the client's logo +4. In `src/services/whiteLabel.ts`, add a new `Whitelabel` instance with the required fields and add its hostname mapping to the `whitelabels` map (it is very similar to step one but had some constraints when dealing with the `public` folder) +5. If there are any pages specific to the whitelabel be sure to update the side and bottom navigator + + +6. In `dynamic-config.prod.yml`, add a router entry for the new whitelabel +7. In `pond/http/server.go`, add the sub-domain to the `allowedOrigins` +8. In `pond/whitelabel.go`, add an entry for the new white label + +7. Create a new `Auth0` application for the client + - use a image bucket like [postimg](https://postimages.org/) to store their company logo and favicon + - add a whitelabel logo + - allow necessary `origins`, `callback URLs`, and `CORS domains` to the application settings (see the default application as a guideline) + - customize the Universal Login page to handle the new whitelabel + - check if the client ID matches this client's Auth0 application + - change the Universal Login theme using white-label colours and images stored in a bucket (ex: [postimg](https://postimages.org/)) +8. Enable the white-label sub-domain for CORS in the backend + +- in [http.go](https://gitlab.com/brandx/backend/blob/master/pond/http.go), add the white-label sub-domain to the `AllowedOrigins` list + ## Expanding the ESLint configuration If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: diff --git a/package-lock.json b/package-lock.json index c150062..61b530e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42,7 +42,7 @@ "mui-tel-input": "^7.0.0", "notistack": "^3.0.1", "openweathermap-ts": "^1.2.10", - "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging", + "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#master", "query-string": "^9.2.1", "react": "^18.3.1", "react-beautiful-dnd": "^13.1.1", @@ -10953,7 +10953,7 @@ }, "node_modules/protobuf-ts": { "version": "1.0.0", - "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#c9ef7906fd97cda8ef4bd149ec4a796159a7c067", + "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#b05bd05f5e9e9eb66c5afbeeee88b512be3135ef", "dependencies": { "protobufjs": "^6.8.8" } diff --git a/package.json b/package.json index fc7a1ac..ee0e9b7 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "mui-tel-input": "^7.0.0", "notistack": "^3.0.1", "openweathermap-ts": "^1.2.10", - "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging", + "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#master", "query-string": "^9.2.1", "react": "^18.3.1", "react-beautiful-dnd": "^13.1.1", diff --git a/public/MiPCA/android-chrome-192x192.png b/public/MiPCA/android-chrome-192x192.png new file mode 100644 index 0000000..4ed494c Binary files /dev/null and b/public/MiPCA/android-chrome-192x192.png differ diff --git a/public/MiPCA/android-chrome-512x512.png b/public/MiPCA/android-chrome-512x512.png new file mode 100644 index 0000000..72ba797 Binary files /dev/null and b/public/MiPCA/android-chrome-512x512.png differ diff --git a/public/MiPCA/apple-touch-icon.png b/public/MiPCA/apple-touch-icon.png new file mode 100644 index 0000000..c5d4d8b Binary files /dev/null and b/public/MiPCA/apple-touch-icon.png differ diff --git a/public/MiPCA/browserconfig.xml b/public/MiPCA/browserconfig.xml new file mode 100644 index 0000000..b3930d0 --- /dev/null +++ b/public/MiPCA/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #da532c + + + diff --git a/public/MiPCA/favicon-16x16.png b/public/MiPCA/favicon-16x16.png new file mode 100644 index 0000000..f54fc91 Binary files /dev/null and b/public/MiPCA/favicon-16x16.png differ diff --git a/public/MiPCA/favicon-32x32.png b/public/MiPCA/favicon-32x32.png new file mode 100644 index 0000000..48b5897 Binary files /dev/null and b/public/MiPCA/favicon-32x32.png differ diff --git a/public/MiPCA/favicon.ico b/public/MiPCA/favicon.ico new file mode 100644 index 0000000..48e87f6 Binary files /dev/null and b/public/MiPCA/favicon.ico differ diff --git a/public/MiPCA/manifest.json b/public/MiPCA/manifest.json new file mode 100644 index 0000000..d98df92 --- /dev/null +++ b/public/MiPCA/manifest.json @@ -0,0 +1,33 @@ +{ + "name": "MiPCA", + "short_name": "MiPCA", + "icons": [ + { + "src": "favicon.ico", + "sizes": "48x48", + "type": "image/x-icon" + }, + { + "src": "android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + }, + { + "src": "maskable_icon.png", + "sizes": "196x196", + "type": "image/png", + "purpose": "any maskable" + } + ], + "start_url": "/", + "theme_color": "#272727", + "background_color": "#303030", + "display": "standalone", + "orientation": "any" + } + diff --git a/public/MiPCA/mstile-150x150.png b/public/MiPCA/mstile-150x150.png new file mode 100644 index 0000000..d5b8d98 Binary files /dev/null and b/public/MiPCA/mstile-150x150.png differ diff --git a/public/MiPCA/safari-pinned-tab.svg b/public/MiPCA/safari-pinned-tab.svg new file mode 100644 index 0000000..2758652 --- /dev/null +++ b/public/MiPCA/safari-pinned-tab.svg @@ -0,0 +1,50 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + + + + + + diff --git a/src/assets/whitelabels/MiPCA/MiPCALogo.png b/src/assets/whitelabels/MiPCA/MiPCALogo.png new file mode 100644 index 0000000..c828035 Binary files /dev/null and b/src/assets/whitelabels/MiPCA/MiPCALogo.png differ diff --git a/src/navigation/BottomNavigator.tsx b/src/navigation/BottomNavigator.tsx index 9e36fe8..b03a153 100644 --- a/src/navigation/BottomNavigator.tsx +++ b/src/navigation/BottomNavigator.tsx @@ -13,7 +13,7 @@ import BinsIcon from "products/Bindapt/BinsIcon"; import { useGlobalState } from "providers"; import { useCallback, useEffect, useState } from "react"; import { useNavigate, useLocation } from "react-router-dom"; -import { IsAdaptiveAgriculture, isBXT, IsMiVent, IsAdCon, IsOmniAir } from "services/whiteLabel"; +import { IsAdaptiveAgriculture, isBXT, IsMiVent, IsAdCon, IsOmniAir, IsMiPCA } from "services/whiteLabel"; import FieldsIcon from "products/AgIcons/FieldsIcon"; import NexusSTIcon from "products/Construction/NexusSTIcon"; import OmniAirDeviceIcon from "products/AviationIcons/OmniAirDeviceIcon"; @@ -40,6 +40,7 @@ export default function BottomNavigator(props: Props) { const isMiVent = IsMiVent(); const isAdCon = IsAdCon(); const isOmni = IsOmniAir(); + const isMiPCA = IsMiPCA(); const reRoute = useCallback( (path: string) => { @@ -117,14 +118,14 @@ export default function BottomNavigator(props: Props) { value="constructionMap" /> )} - {isOmni && ( + {(isOmni || isMiPCA) && ( } value="aviationMap" /> )} - {isOmni && ( + {(isOmni || isMiPCA) && ( } @@ -139,7 +140,7 @@ export default function BottomNavigator(props: Props) { ) : isAdCon ? ( - ) : isOmni ? ( + ) : (isOmni || isMiPCA) ? ( ) : ( diff --git a/src/navigation/SideNavigator.tsx b/src/navigation/SideNavigator.tsx index 3365a72..6bab36c 100644 --- a/src/navigation/SideNavigator.tsx +++ b/src/navigation/SideNavigator.tsx @@ -27,6 +27,7 @@ import { IsAdaptiveAgriculture, // hasTutorialPlaylist, IsAdCon, + IsMiPCA, // isBXT, IsMiVent, IsOmniAir, @@ -166,7 +167,8 @@ export default function SideNavigator(props: Props) { const isMiVent = IsMiVent(); const isAg = IsAdaptiveAgriculture() const isStreamline = IsStreamline() - const isMiPCA = IsOmniAir() + const isOmni = IsOmniAir() + const isMiPCA = IsMiPCA() const isAdCon = IsAdCon() return ( @@ -184,7 +186,7 @@ export default function SideNavigator(props: Props) { )} - {(isMiPCA || user.hasFeature("admin")) && ( + {((isOmni || isMiPCA) || user.hasFeature("admin")) && ( )} - {(isMiPCA || user.hasFeature("admin")) && ( + {((isOmni || isMiPCA) || user.hasFeature("admin")) && ( { return ( ([ ["streamline", STREAMLINE_WHITE_LABEL], ["adaptiveag", ADAPTIVE_AGRICULTURE_WHITE_LABEL], @@ -296,7 +322,8 @@ const whitelabels = new Map([ ["10.0", ADAPTIVE_CONSTRUCTION_WHITE_LABEL], ["mivent", MIVENT_WHITE_LABEL], ["adaptiveconstruction", ADAPTIVE_CONSTRUCTION_WHITE_LABEL], - ["omniair", OMNIAIR_WHITE_LABEL] + ["omniair", OMNIAIR_WHITE_LABEL], + ["mipca", MIPCA_WHITE_LABEL] ]); export function getWhitelabel(): WhiteLabel {