@cdmbase/wiki-browser 12.0.18-alpha.10

package/lib/templates/content/docs/mobile/eas-profile-build.md

@@ -0,0 +1,107 @@
+---
+meta:
+    title: Eas Profile Build
+    description: Eas Profile Build
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Eas Profile Build...
+headers:
+    Cache-Control: no-cache
+---
+
+## Eas Profile Build
+
+1. List the devices and if the device don't exist add the device usinge `eas device:create`
+
+```
+lerna exec --scope="*mobile-device" "eas device:create"
+lerna notice cli v6.6.2
+lerna notice filter including "*mobile-device"
+lerna info filter [ '*mobile-device' ]
+lerna info Executing command in 1 package: "eas device:create"
+★ eas-cli@10.2.2 is now available.
+To upgrade, run npm install -g eas-cli.
+Proceeding with outdated version.
+
+This command lets you register your Apple devices (iPhones, iPads and Macs) for internal distribution of your app.
+Internal distribution means that you won't need to upload your app archive to App Store / Testflight.
+Your app archive (.ipa) will be installable on your equipment as long as you sign your application with an adhoc provisioning profile.
+The provisioning profile needs to contain the UDIDs (unique identifiers) of your iPhones, iPads and Macs.
+
+First of all, choose the Expo account under which you want to register your devices.
+Later, authenticate with Apple and choose your desired Apple Team (if your Apple ID has access to multiple teams).
+
+✔ You're inside the project directory. Would you like to use the XXXXXX account? … yes
+› Log in to your Apple Developer account to continue
+✔ Apple ID: … xxxxx@xxxxx.com
+› Restoring session /Users/xxxx/.app-store/auth/xxxxx@xxxxx.com/cookie
+› Team XXXX LLC (XXXXX)
+› Provider XXXX LLC (XXXXX)
+✔ Logged in Local session
+? How would you like to register your devices? › - Use arrow-keys. Return to submit.
+❯   Website - generates a registration URL to be opened on your devices
+    Developer Portal - import devices already registered on Apple Developer Portal
+    Input - allows you to type in UDIDs (advanced option)
+    Current Machine - automatically sets the provisioning UDID of the current Apple Silicon machine
+    Exit
+```
+
+2. move `.npmrc` to `.npmrc.bk` from root of the project, so the eas build wont' see this file.
+
+```
+mv .npmrc .npmrc.bk
+```
+
+3. run eas preview manually from the IDE
+
+```
+lerna exec --scope="*mobile-device" yarn build:preview
+lerna notice cli v6.6.2
+lerna notice filter including "*mobile-device"
+lerna info filter [ '*mobile-device' ]
+lerna info Executing command in 1 package: "yarn build:preview"
+yarn run v1.22.19
+$ yarn easBuild --profile preview
+$ eas build --profile preview
+★ eas-cli@10.1.1 is now available.
+To upgrade, run npm install -g eas-cli.
+Proceeding with outdated version.
+
+✔ Select platform › iOS
+Loaded "env" configuration for the "preview" profile: NODE_ENV, GRAPHQL_URL, GA_ID, LOG_LEVEL, CLIENT_URL, APP_NAME, AUTH0_DOMAIN, AUTH0_CUSTOM_DOMAIN, AUTH0_API_AUDIENCE, AUTH0_REALM, AUTH0_CLIENT_ID, AUTH0_NATIVE_CLIENT_ID, AUTH0_CUSTOM_CLAIMS_NAMESPACE, AUTH0_TOKEN_GRANTED_TIME, LOGOUT_REDIRECT_PATH, HOME_SCREEN_PATH, DISABLE_EMAIL_VERIFICATION, LAYOUT_SETTINGS, SOCIAL_LOGIN_PROVIDERS. Learn more
+✔ Using remote iOS credentials (Expo server)
+
+If you provide your Apple account credentials we will be able to generate all necessary build credentials and fully validate them.
+This is optional, but without Apple account access you will need to provide all the missing values manually and we can only run minimal validation on them.
+✔ Do you want to log in to your Apple account? … yes
+
+› Log in to your Apple Developer account to continue
+✔ Apple ID: … xxxxxx@xxxxx.com
+› Restoring session /Users/xxxxxx/.app-store/auth/xxxxx@xxxxx.com/cookie
+› Session expired Local session
+› Using password for xxxxx@xxxxx.com from your local Keychain
+  Learn more
+✔ Logged in, verify your Apple account to continue
+Two-factor Authentication (6 digit code) is enabled for xxxxxx@xxxx.com. Learn more: https://support.apple.com/en-us/HT204915
+
+✔ How do you want to validate your account? … device / sms
+✔ Please select a trusted phone number to send code to › +1 (•••) •••-••xx
+✔ Please enter the 6 digit code you received at +1 (•••) •••-••xx: … 219070
+✔ Valid code
+✔ Logged in and verified
+› Team XXXXX (XXXXXXXX)
+› Provider XXXXX (XXXXXXX)
+✔ Bundle identifier registered com.xxxxxx
+✔ Synced capabilities: Enabled: Sign In with Apple
+✔ Synced capability identifiers: No updates
+✔ Fetched Apple distribution certificates
+✔ Fetched Apple provisioning profiles
+Provisioning profile (id: XXXXXXX) is no longer valid
+✔ Select devices for the ad hoc build: › 4 devices selected
+✔ Updated existing profile: *[expo] com.xxxxx AdHoc 17xxxxxxx0
+
+Project Credentials Configuration
+
+```
+
+4. Revert back the file `.npmrc` from `.nprc.bk` do not commit this change.

package/lib/templates/content/docs/mobile/expo-push-notification-setup.md

@@ -0,0 +1,216 @@
+---
+meta:
+    title: Expo push notification setup
+    description: Expo push notification setup
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Expo push notification setup...
+headers:
+    Cache-Control: no-cache
+---
+
+## Expo push notification setup:
+
+To use Expo's push notification service, you need to configure your app to install a set of libraries, add functions to handle notifications and configure credentials for Android and iOS.
+
+(Note: notification only works on device , not on emulator/simulator)
+
+# Install libraries
+
+```
+npx expo install expo-notifications expo-device
+```
+
+# After installation import on app start screen (i.e. App.js / index.js)
+
+```
+ import { useState, useEffect, useRef } from 'react';
+ import { Platform } from 'react-native';
+ import * as Device from 'expo-device';
+ import * as Notifications from 'expo-notifications';
+```
+
+# Set Notification handler at the top after import to display notification popup
+
+```
+ Notifications.setNotificationHandler({
+     handleNotification: async () => ({
+       shouldShowAlert: true,  //if true , notification popup will appear
+       shouldPlaySound: false,
+       shouldSetBadge: false,
+     }),
+ });
+```
+
+# Register and get expo token , set listener for notification
+
+```
+export default function App() {
+   const [expoPushToken, setExpoPushToken] = useState('');
+   const [notification, setNotification] = useState(false);
+   const notificationListener = useRef();
+   const responseListener = useRef();
+
+   useEffect(() => {
+        //Registering and  getting exp token from registerForPushNotificationsAsync function and setting
+         registerForPushNotificationsAsync().then(token => setExpoPushToken(token));
+       //Notification listener when notification received
+         notificationListener.current=Notifications.addNotificationReceivedListener (notification =>
+                                                       { setNotification(notification); });
+       //Notification listener when notification clicked
+         responseListener.current = Notifications.addNotificationResponseReceivedListener(response =>
+                                                     { console.log(response); });
+
+      return () => {
+          Notifications.removeNotificationSubscription(notificationListener.current);
+          Notifications.removeNotificationSubscription(responseListener.current);
+       };
+
+}, []);
+
+  return (<><>)
+
+}
+```
+
+# Token register function(function only works on device, not on simulator/emulator)
+
+```
+async function registerForPushNotificationsAsync() {
+    let token;
+    if (Device.isDevice) {
+        const { status: existingStatus } = await Notifications.getPermissionsAsync();
+        let finalStatus = existingStatus;
+        if (existingStatus !== 'granted') {
+            const { status } = await Notifications.requestPermissionsAsync();
+            finalStatus = status;
+        }
+
+        if (finalStatus !== 'granted') {
+            alert('Failed to get push token for push notification!');
+            return;
+        }
+        token = (await Notifications.getExpoPushTokenAsync()).data;
+        console.log(token); }
+    else {
+        alert('Must use physical device for Push Notifications');
+    }
+
+    if (Platform.OS === 'android') {
+                Notifications.setNotificationChannelAsync('default', {
+                    name: 'default',
+                    importance: Notifications.AndroidImportance.MAX,
+                    vibrationPattern: [0, 250, 250, 250],
+                    lightColor: '#FF231F7C',
+                });
+    }
+    return token;
+}
+```
+
+# For sending push notification to device
+
+```
+    expoPushToken can be an array or single string
+        expoPushToken = ‘ExpoToken[xyz123456789ZY]’
+            or
+        expoPushToken = [‘‘ExpoToken[xyz123456789ZY]’,’‘ExpoToken[xyz123456789MZ]’]
+
+    async function sendPushNotification(expoPushToken) {
+        const message = {
+            to: expoPushToken,
+            sound: 'default',
+            title: 'Original Title', body: 'And here is the body!',
+            data: { someData: 'goes here' },
+        };
+        await fetch('https://exp.host/--/api/v2/push/send', {
+            method: 'POST',
+            headers: { Accept: 'application/json', 'Accept-encoding': 'gzip, deflate',
+            'Content-Type': 'application/json', },
+            body: JSON.stringify(message),
+        });
+    }
+```
+
+Development setup done , you can test expo notification on local using Expo push notifications tool
+
+Replace graphql and backend url localhost with your ip in env file , go to your app root ,start teminal/cmd and login with expo, remove –localhost from portable device mobile package.json from watch script and start app , Open device scanner,scan qr from terminal and test
+
+(Note:while testing backend and device should be on same network (i.e. wifi)
+
+# Credentials configuration for Android and iOS for development(.i.e testflight,android internal testing)/production
+
+# For android
+
+Expo uses firebase for sending push notification in android
+
+# Setting up FCM
+
+    To create a Firebase project, go to the Firebase console and click on Add project.
+
+    In the console, click the setting icon next to Project overview and open Project settings. Then, under Your apps, click the Android icon to open Add Firebase to your Android app and follow the steps. Make sure that the Android package name you enter is the same as the value of android.package from your app.json.
+
+    After registering the app, download the google-services.json file and place it in your project's root directory.
+
+    In app.json, add an android.googleServicesFile field with the relative path to the downloaded google-services.json file. If you placed it in the root directory, the path is:
+
+```
+    app.json:
+    {
+      "android": {
+        "googleServicesFile": "./google-services.json",
+      }
+    }
+
+```
+
+# Upload server credentials for android
+
+    For Expo to send push notifications from expo servers and use your credentials, you'll have to upload your secret server key to your project's Expo dashboard.
+
+    In the Firebase console, next to Project overview, click gear icon to open Project settings.
+
+    Click on the Cloud Messaging tab in the Settings pane.
+
+    Copy the token listed next to the Server key.
+
+    If server key not found , then it is not enabled so for enabling go to Cloud Messaging API (Legacy) Console (google) and enable it
+
+In your Expo account's dashboard, select your project, and click on Credentials in the navigation menu. Then, click on your Application Identifier that follows the pattern:com.company.app.
+
+Under Service Credentials > FCM Server Key, click Add a FCM Server Key > Google Cloud Messaging Token and add the Server key
+
+# For ios
+
+Expo uses apple push notification service(apn) for sending push notification in ios
+
+    For iOS, make sure you have registered your iOS device on which you want to test before running
+    the eas build command
+
+For registering ios device , ios device uuid is needed , get ios device uuid
+
+. Go to apple developer console -> account -> Certificates, IDs & Profiles ->
+. Devices -> click + button and add your uuid
+. Profiles -> click on your profile(com.app.test.) -> edit and add your device to this profile and save
+
+# If you create a development build for the first time, you'll be asked to enable push notifications. Answer yes to the following questions when prompted:
+
+```
+    Setup Push Notifications for your project
+    Generating a new Apple Push Notifications service key
+```
+
+# For existing build:
+
+```
+. Go to apple developer console  -> account -> Certificates, IDs & Profiles ->
+  .  Devices -> click + button and add your uuid
+  .  Profiles -> click on your profile(com.app.test.) -> edit and add your device to this profile and save
+  .  Identifiers -> click on your identifier(com.app.test) -> check Push Notifications in capabilities and
+  configure(For notification to run upload new certificate for development and production)
+  .  Keys -> click on + button to create key -> download created p8 file -> save
+
+Now go to expo.dev -> your project -> Credentials -> click ios tab -> Bundle Identifiers (click your identifier) -> com.app.test -> edit Push Key -> Push Key File (upload your downloaded p8 file), Key Identifier(your key id) -> save
+```
+
+Now notification can be tested on testflight

package/lib/templates/content/docs/mobile/index.md

@@ -0,0 +1,14 @@
+---
+meta:
+    title: Mobile
+    description: Mobile
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Mobile...
+headers:
+    Cache-Control: no-cache
+---
+
+## Mobile
+
+**[With Orgname and Sider with Main Tab](/docs/mobile/routes)**

package/lib/templates/content/docs/mobile/routes.md

@@ -0,0 +1,83 @@
+---
+meta:
+    title: Routes
+    description: Routes
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Routes...
+headers:
+    Cache-Control: no-cache
+---
+
+## routes
+
+# With Orgname and Sider with Main Tab
+
+```
+/ - MainNavigator
+    /:orgName(screen)
+    /:orgName/MainDrawer
+        /Sider1
+        /Sider2
+        /BottomTab
+            /Tab1
+            /Tab2
+    /login
+    /password-reset
+```
+
+Generated Component from above routes.
+
+```
+<Stack name=“MainStack”>
+    <Stack.Screen name='orgSelection'/>
+    <Drawer.Navigator initialRouteName="Drawer">
+        <Drawer.Screen name="Sider1" component={Sider1} />
+        <Drawer.Screen name="Sider2" component={Sider2} />
+        <Tab.Navigator>
+        I   <Tab.Screen name="Tab1" component={Tab1} />
+            <Tab.Screen name="Tab2" component={Tab2} />
+      </Tab.Navigator>
+    </Drawer.Navigator>
+    <Stack.Screen name='login' />
+    <Stack.Screen name='password-reset' />
+</Stack>
+```
+
+# With Orgname and Sider only
+
+```
+/ - Main Navigator(StackNavigator)
+    /:orgName(screen)             -[//:orgName, exact: true] -> org selection page will open and orgname is selected, which will redirect to home
+    /:orgName/MainDrawer         -[//:orgName/l/] MainStack.Drawer
+        /account        -[//:orgName/l/account]   MainStack.Drawer.Account
+        /home           -[//:orgName/l/home]      MainStack.Drawer.Home
+    /login
+    /password-reset
+```
+
+Generated Component from above routes.
+
+```
+<Stack name=“MainStack”>
+    <Stack.Screen name='orgSelection'/>
+    <Drawer.Navigator initialRouteName="Drawer">
+        <Drawer.Screen name="Home" component={HomeScreen} />
+        <Drawer.Screen name="Account" component={AccountScreen} />
+    </Drawer.Navigator>
+    <Stack.Screen name='login' />
+    <Stack.Screen name='password-reset' />
+</Stack>
+```
+
+# Without orgName
+
+```
+/ - MainNavigator
+    /                   -[//]          -> this screen checks if user logged in, if logged it redirect to home screen
+    /MainDrawer         -[//l]
+        /BottomTab      -[//l]
+        /account        -[//l/account]
+    /login
+    /password-reset
+```

package/lib/templates/content/docs/organization/adding-account-context.md

@@ -0,0 +1,116 @@
+---
+meta:
+    title: Adding Account Context
+    description: Adding Account Context
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Adding Account Context...
+headers:
+    Cache-Control: no-cache
+---
+
+## Adding Account Context
+
+**Adding @addAccountContext and Understanding IAccountContext and IUserContext**
+
+This help manual provides an overview of the `addAccountContext` directive, which is used to add additional user-specific context details to GraphQL resolvers. The `addAccountContext` directive can be applied to specific queries or mutations to enhance the resolver functionality.
+Express middleware adds user and organization context based on the provided orgName and token from the frontend.
+
+`IAccountContext` and `IUserContext` interfaces, which are used in the context of the `addAccountContext` directive. These interfaces define the structure of the context objects passed to the resolvers.
+
+**1. IAccountContext is included in the Graphql Rewsolver Context:**
+
+The `IAccountContext` interface represents the context object that provides additional details related to an account. It has the following properties:
+
+- `req`: An instance of `express.Request`, representing the HTTP request object.
+- `res`: An instance of `express.Response`, representing the HTTP response object.
+- `userContext`: An object of type `IUserContext`, containing the user-specific context details.
+- `profile`: An object of type `IUserProfile`, representing the user's profile.
+- `user`: An object of type `IIAuth0Token`, containing information about the user's authentication token.
+- `orgname` (optional): A string representing the organization name associated with the account.
+
+**2. Details of IUserContext:**
+
+The `IUserContext` type defines the user-specific context details within the `IAccountContext`. It has the following properties:
+
+- `accountId` (optional): A string representing the user's account ID.
+- `dummy` (optional): A string field that may be used for dummy data.
+- `emailId` (optional): A string representing the user's email ID.
+- `identity` (optional): An object of type `AnyObject`, which can hold various identity-related data.
+- `namespace` (optional): A string representing the user's namespace.
+- `orgId` (optional): A string representing the organization ID associated with the user.
+- `orgRole` (optional): A string representing the user's role within the organization.
+- `orgSettingUri` (optional): A URI representing the organization's settings.
+- `organization`: An object of type `IOrganization`, providing information about the organization.
+- `paymentCustomerId` (optional): A string representing the payment customer ID associated with the user.
+- `paymentSubscriptionId` (optional): A string representing the payment subscription ID associated with the user.
+- `permissions` (optional): An object of type `AnyObject`, which can hold various permission-related data.
+- `resourceId` (optional): A string representing the resource ID associated with the user.
+- `resourceSettingUri` (optional): A URI representing the resource's settings.
+- `teamId` (optional): A string representing the team ID associated with the user.
+- `teamSettingUri` (optional): A URI representing the team's settings.
+- `userAlias` (optional): A string representing the user's alias.
+- `userSettingUri` (optional): A URI representing the user's settings.
+
+Please note that the `optional` keyword indicates that these properties are not required and may be `null` or `undefined` in certain cases.
+
+By understanding the structure of `IAccountContext` and `IUserContext`, you can effectively utilize the `addAccountContext` directive and access the relevant context data within your resolvers.
+
+Make sure to import the necessary dependencies, such as `express` and the required types/interfaces (`IUserContext`, `IAccountContext`, `IUserProfile`, `IIAuth0Token`, `IOrganization`, etc.), into your codebase to use these interfaces effectively.
+
+If you have any further questions or need additional assistance, please don't hesitate to ask.
+
+Let's dive into the details:
+
+**1. Adding the `addAccountContext` Directive:**
+
+The `addAccountContext` directive provides additional details, such as the `ServerContext`, in the GraphQL resolver. This directive can be added to specific queries or mutations. Here's an example of how to add the directive:
+
+```graphql
+extend type Query {
+  getOrganizationTeams(orgName: String): [AccountTeam] @addAccountContext
+  ...
+}
+
+extend type Mutation {
+  createInvoice(invoice: InvoiceCreateRequest!): Boolean @addAccountContext
+}
+```
+
+By extending the `Query` and `Mutation` types, you can add the `addAccountContext` directive to specific fields. In the example above, the `getOrganizationTeams` query and the `createInvoice` mutation have been extended with the directive.
+
+**2. Updating Resolvers:**
+
+To handle the functionality added by the `addAccountContext` directive, you need to update your resolvers accordingly. Here's an example of how to update your resolvers:
+
+```javascript
+import { IResolverOptions } from '@common-stack/server-core';
+import { IResolvers } from '<from generated file>';
+
+export const resolvers: (options: IResolverOptions) => IResolvers<IAccountContext & MyContext> = (options) => ({
+  Query: {
+    getOrganizationTeams: (root, { orgName }, { teamService, user, userContext }) => {
+      options.logger.trace('(Query.getOrganizationTeams) orgName [%j]', orgName);
+      if (!user) {
+        return [];
+      }
+      return teamService.getOrganizationTeams(userContext.orgId, userContext.orgRole, userContext.accountId);
+    },
+    ...
+  },
+  Mutation: {
+    createInvoice: async (root, { invoice }, { invoiceService, orgname }) => {
+      return invoiceService.createInvoice({ ...invoice, orgName: orgname })
+        .then(() => true)
+        .catch((e) => e);
+    },
+    ...
+  },
+});
+```
+
+In the updated resolvers, we have added the necessary code to handle the `getOrganizationTeams` query and the `createInvoice` mutation. The `getOrganizationTeams` resolver retrieves organization teams based on the provided `orgName` and user context. The `createInvoice` resolver uses the `invoiceService` to create an invoice with the provided data, including the `orgName` from the resolver context.
+
+Please ensure that you have imported the required dependencies, such as `express` and the necessary types/interfaces (`IResolverOptions`, `IResolvers`, `IContext`, `MyContext`, etc.), as shown in the provided code snippets.
+
+That's it! By following these steps, you can add directives and update your resolvers to enhance the functionality of your GraphQL server.

package/lib/templates/content/docs/organization/adding-org-mobile-navigation.md

@@ -0,0 +1,22 @@
+---
+meta:
+    title: Org Mobile Navigation
+    description: Org Mobile Navigation
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Org Mobile Navigation...
+headers:
+    Cache-Control: no-cache
+---
+
+## Org Mobile Navigation
+
+While defining react naigation route config, if any of the route contains route param then all the child routes should pass the param while navigating to the route. Consider the following example
+
+<img width="350" alt="Screenshot 2022-11-28 at 2 25 10 AM" src="https://user-images.githubusercontent.com/30002668/204160460-c72a89b2-40b7-468f-90d4-d13b2afb648e.png"/>
+
+The stack screen will be defined like this
+
+<img width="371" alt="Screenshot 2022-11-28 at 2 25 42 AM" src="https://user-images.githubusercontent.com/30002668/204160487-c28d4468-6aa7-4427-a491-e9faf0cfc723.png"/>
+
+Now whenever you need to navigate to Dashboard, you will have to pass the `orgName` prop like this `navgation.navigate('MainStack.OrgStack.OrgNameStack', {screen: 'Dashboard', params: {orgName: 'asd'}})`

package/lib/templates/content/docs/organization/adding-org-web-navigation.md

@@ -0,0 +1,12 @@
+---
+meta:
+    title: Org Web Navigation
+    description: Org Web Navigation
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Org Web Navigation...
+headers:
+    Cache-Control: no-cache
+---
+
+## Org Web Navigation

package/lib/templates/content/docs/organization/index.md

@@ -0,0 +1,20 @@
+---
+meta:
+    title: Organization
+    description: Organization
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Organization...
+headers:
+    Cache-Control: no-cache
+---
+
+## Organization
+
+**[Org Navigation(mobile)](/docs/organization/adding-org-mobile-navigation)**
+
+**[Org Navigation(web)](/docs/organization/adding-org-web-navigation)**
+
+**[Initialization](/docs/organization/initialization)**
+
+**[addAccountContext Directive](/docs/organization//adding-account-context)**

package/lib/templates/content/docs/organization/initialization.md

@@ -0,0 +1,20 @@
+---
+meta:
+    title: Initialization
+    description: Initialization
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Initialization...
+headers:
+    Cache-Control: no-cache
+---
+
+## Initialization
+
+When app loads, we need see
+
+```js
+platform: orgName: '';
+loading: false;
+initialized: true;
+```