@pega/sdk 0.0.4 → 0.0.6

package/templates/react-native-sdk-reference/src/app/home/index.tsx

@@ -0,0 +1,36 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import { StyleSheet, View } from 'react-native';
+import Header from '@/mediaco/Header';
+import HomeScreen from '@/mediaco/HomeScreen';
+
+export default function Index() {
+  // This is the main entry point of the app.
+  // The actual implementation is in the home screen.
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+      }}
+    >
+      <LinearGradient
+        // Background Linear Gradient
+        colors={['#3A53E9', '#0043C8', '#01153E']}
+        style={styles.background}
+      />
+
+      <Header />
+      <HomeScreen />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    height: '100%',
+  },
+});

package/templates/react-native-sdk-reference/src/app/home/shop.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from 'react-native';
+
+const Shop = () => {
+  return (
+    <View>
+      <Text>Shop</Text>
+    </View>
+  );
+};
+
+export default Shop;

package/templates/react-native-sdk-reference/src/app/home/your-services.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from 'react-native';
+
+const yourServices = () => {
+  return (
+    <View>
+      <Text>yourServices</Text>
+    </View>
+  );
+};
+
+export default yourServices;

package/templates/react-native-sdk-reference/src/app/index.tsx

@@ -0,0 +1,72 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import { router } from 'expo-router';
+import { LogBox, StyleSheet, View } from 'react-native';
+import { Button } from 'react-native-paper';
+
+import { useLoader } from '@/context/LoaderContext';
+import { authenticate } from '@/utils/auth';
+import { initializePCore } from '@/utils/init-pcore';
+
+// load polyfills before the constellation core js for React Native
+import '@/utils/pcore-polyfills';
+import '@pega/constellationjs/dist/constellation-core-react-native.js';
+
+// ignore all logs notifications
+LogBox.ignoreAllLogs();
+
+export default function Index() {
+  const { showLoader, hideLoader } = useLoader();
+
+  const handleLogin = async () => {
+    showLoader();
+    try {
+      // Authenticate the user and get token info
+      const tokenInfo = await authenticate();
+
+      if (!tokenInfo) {
+        console.error('Authentication failed: No token info received');
+        return;
+      }
+      // Initialize PCore with the token info
+      await initializePCore(tokenInfo);
+
+      console.log('PCore initialized successfully');
+
+      // Navigate to the home screen after successful authentication
+      router.push('/home');
+    } catch (error) {
+      console.error('Authentication error:', error);
+    } finally {
+      hideLoader();
+    }
+  };
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <LinearGradient
+        // Background Linear Gradient
+        colors={['#3A53E9', '#0043C8', '#01153E']}
+        style={styles.background}
+      />
+      <Button mode="outlined" textColor="#fff" onPress={handleLogin}>
+        Login
+      </Button>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    height: '100%',
+  },
+});

package/templates/react-native-sdk-reference/src/app/workarea.tsx

@@ -0,0 +1,135 @@
+import { useEffect, useState } from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { View } from 'react-native';
+import { PaperProvider, Provider, MD3LightTheme } from 'react-native-paper';
+import { router } from 'expo-router';
+
+import { registerComponentCreator } from '@pega/sdk-react';
+import { registerComponents } from '@/sdk-pega-component-map';
+import ResolutionScreen from '@/mediaco/ResolutionScreen';
+import RootComponent from '@/bridge/RootComponent';
+import { useLoader } from '@/context/LoaderContext';
+// MIGRATED: ../sdk-config.json -> ../../sdk-config.json after moving routes to src/app/*
+import * as SDK_Config from '../../sdk-config.json';
+
+// Paper theme that renders form field backgrounds as transparent.
+// Outlined TextInputs use `colors.background` for their fill color.
+const transparentFieldTheme = {
+  ...MD3LightTheme,
+  colors: {
+    ...MD3LightTheme.colors,
+    background: 'transparent',
+  },
+};
+
+// ===== WorkArea Component - Main workspace screen for rendering Pega assignments/portals =====
+export default function WorkArea() {
+  const { showLoader, hideLoader, loading } = useLoader();
+  const [rootProps, setRootProps] = useState<{
+    getPConnect: () => typeof PConnect;
+  } | null>(null);
+  const [showResolution, setShowResolution] = useState(false);
+
+  useEffect(() => {
+    // Wire up sdk-react bridge before starting container rendering
+    try {
+      // @ts-ignore - getSdkCore() is available at runtime from constellationjs
+      const { createComponentRegistry } = PCore.getInitialiser().getSdkCore();
+      const registry = createComponentRegistry();
+      registerComponents(registry);
+      registerComponentCreator(registry); // calls PCore.registerComponentCreator internally
+
+      const renderObj = PCore.getInitialiser().initCoreContainers();
+
+      const { props } = renderObj;
+
+      setRootProps(props);
+
+      openCase();
+    } catch (error) {
+      console.error('Error initializing PCore:', error);
+    }
+  }, []);
+
+  useEffect(() => {
+    console.log('WorkArea useEffect called');
+    // Subscribe to the EVENT_CANCEL event to handle the assignment cancellation
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL,
+      () => cancelAssignment(),
+      'cancelAssignment',
+    );
+
+    // Subscribe to the 'assignmentFinished' event to handle assignment completion
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.END_OF_ASSIGNMENT_PROCESSING,
+      () => assignmentFinished(),
+      'assignmentFinished',
+    );
+
+    return () => {
+      // unsubscribe to the events
+      PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, 'cancelAssignment');
+      PCore.getPubSubUtils().unsubscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.END_OF_ASSIGNMENT_PROCESSING,
+        'assignmentFinished',
+      );
+    };
+  }, []);
+
+  function cancelAssignment() {
+    router.replace('/home');
+  }
+
+  function assignmentFinished() {
+    setShowResolution(true);
+  }
+
+  const openCase = () => {
+    showLoader();
+    let mashupCaseType = SDK_Config.serverConfig.appMashupCaseType;
+
+    // If mashupCaseType is null or undefined, get the first case type from the environment info
+    if (!mashupCaseType) {
+      const caseTypes: any = PCore.getEnvironmentInfo().environmentInfoObject?.pyCaseTypeList;
+      mashupCaseType = caseTypes[0].pyWorkTypeImplementationClassName;
+    }
+
+    // Create options object with default values
+    const options: any = {
+      pageName: 'pyEmbedAssignment',
+      startingFields: {},
+    };
+
+    // If mashupCaseType is 'DIXL-MediaCo-Work-NewService', add Package field to startingFields
+    if (mashupCaseType === 'DIXL-MediaCo-Work-NewService') {
+      options.startingFields.Package = 'Basic';
+    }
+
+    // Create a new case using the mashup API
+    PCore.getMashupApi()
+      .createCase(mashupCaseType, PCore.getConstants().APP.APP, options)
+      .then(() => {
+        console.log('createCase rendering is complete');
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  };
+
+  if (showResolution) {
+    return <ResolutionScreen />;
+  }
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#01153d' }}>
+      <View style={{ flex: 1 }}>
+        <Provider>
+          <PaperProvider theme={transparentFieldTheme}>
+            {loading ? null : rootProps && <RootComponent {...(rootProps as object)} />}
+          </PaperProvider>
+        </Provider>
+      </View>
+    </SafeAreaView>
+  );
+}

package/templates/react-native-sdk-reference/src/bridge/Context/StoreContext.ts

@@ -0,0 +1,4 @@
+// Re-export PegaStoreContext from @pega/sdk-react as the shared store context.
+// RootComponent provides { store: PCore.getStore() }; consumers read it via useContext.
+export { PegaStoreContext as default } from '@pega/sdk-react';
+export { usePegaStore as useConstellationContext } from '@pega/sdk-react';

package/templates/react-native-sdk-reference/src/bridge/RootComponent.tsx

@@ -0,0 +1,12 @@
+import { useMemo } from 'react';
+import { PConnectComponent, PegaStoreContext } from '@pega/sdk-react';
+
+export default function RootComponent(props: any) {
+  const contextValue = useMemo(() => ({ store: PCore.getStore() }), []);
+
+  return (
+    <PegaStoreContext.Provider value={contextValue}>
+      <PConnectComponent {...props} />
+    </PegaStoreContext.Provider>
+  );
+}

package/templates/react-native-sdk-reference/src/bridge/react_pconnect.jsx

@@ -0,0 +1,334 @@
+import { Component } from 'react';
+import { connect, shallowEqual } from 'react-redux';
+import ErrorBoundary from '../components/infra/ErrorBoundary';
+
+import StoreContext from './Context/StoreContext';
+
+import pegaSdkComponentMap from '../sdk-pega-component-map';
+
+// Ensure PCore is available from the global scope if not imported
+const PCore = typeof window !== 'undefined' ? window.PCore : undefined;
+
+const isClassIDCompare = (key, prev, next) => {
+  return !(key === 'classID' && (!prev[key] || !next[key]));
+};
+
+const routingInfoCompare = (next, prev) => {
+  return (
+    'routingInfo' in next &&
+    (!shallowEqual(next.routingInfo, prev.routingInfo) || !PCore.isDeepEqual(next.routingInfo, prev.routingInfo))
+  );
+};
+
+/** Generate unique id for elements */
+const createUID = () => {
+  return `_${Math.random().toString(36).slice(2, 11)}`;
+};
+
+export const setVisibilityForList = (c11nEnv, visibility) => {
+  const { selectionMode, selectionList, renderMode, referenceList } = c11nEnv.getComponentConfig();
+  // usecase:multiselect, fieldgroup, editable table
+  if (
+    (selectionMode === PCore.getConstants().LIST_SELECTION_MODE.MULTI && selectionList) ||
+    (renderMode === 'Editable' && referenceList)
+  ) {
+    c11nEnv.getListActions().setVisibility(visibility);
+  }
+};
+
+function withVisibility(WrappedComponent) {
+  return class extends Component {
+    render() {
+      const { visibility } = this.props;
+
+      if (visibility === false) {
+        return null;
+      }
+      return <WrappedComponent {...this.props} />;
+    }
+  };
+}
+
+const connectRedux = (component, c11nEnv) => {
+  return connect(
+    (state, ownProps) => {
+      let addProps = {};
+      const obj = {};
+      // Need to use ownProps pconnect since c11nEnv is stale and prior to re-render
+      if (!ownProps.getPConnect) {
+        console.error('connectRedux ownProps are not defined');
+      } else {
+        c11nEnv = ownProps.getPConnect();
+      }
+
+      if (typeof component.additionalProps === 'object') {
+        addProps = c11nEnv.resolveConfigProps(component.additionalProps);
+      } else if (typeof component.additionalProps === 'function') {
+        addProps = c11nEnv.resolveConfigProps(component.additionalProps(state, ownProps.getPConnect));
+      }
+
+      c11nEnv.getConfigProps(obj);
+
+      // populate additional props which are component specific and not present in configurations
+      // This block can be removed once all these props will be added as part of configs
+      c11nEnv.populateAdditionalProps(obj);
+
+      return {
+        ...obj,
+        ...addProps,
+      };
+    },
+    null,
+    null,
+    {
+      context: StoreContext,
+      areStatePropsEqual: (next, prev) => {
+        const allStateProps = c11nEnv.getStateProps();
+        for (const key of Object.keys(allStateProps)) {
+          if (Object.prototype.hasOwnProperty.call(allStateProps, key)) {
+            if (
+              key === 'inheritedProps' &&
+              next.inheritedProps &&
+              !PCore.isDeepEqual(next.inheritedProps, prev.inheritedProps)
+            ) {
+              return false;
+            }
+            if (
+              key !== 'inheritedProps' &&
+              ((isClassIDCompare(key, prev, next) && !shallowEqual(next[key], prev[key])) ||
+                (next.routingInfo && !PCore.isDeepEqual(next.routingInfo, prev.routingInfo)))
+            ) {
+              return false;
+            }
+          }
+        }
+        /* TODO For some rawConfig we are not getting routingInfo under allStateProps */
+        return !routingInfoCompare(next, prev);
+      },
+    },
+  )(component);
+};
+
+const getComponent = (c11nEnv) => {
+  // PCore is defined in pxBootstrapShell - eventually will be exported in place of constellationCore
+  const ComponentsRegistry = PCore.getComponentsRegistry();
+  const type = c11nEnv.getComponentName();
+
+  const componentObj = ComponentsRegistry.getComponent(type);
+  const componentType = (componentObj && componentObj.component) || type;
+
+  // JEA - modifying logic before bailing to RootContainer logic to work around async loading problem
+  const component = pegaSdkComponentMap[componentType] || ErrorBoundary; /* || window[componentType] */
+
+  if (c11nEnv.isConditionExist()) {
+    return connectRedux(withVisibility(component), c11nEnv);
+  }
+
+  return connectRedux(component, c11nEnv);
+};
+
+/**
+ * JEA - add Type info via JSdoc syntax...
+ * @extends {React.Components<Props, State>}
+ * createPConnectComponent - Class to create/initialize a PConnect (c11nEnv) object
+ * to pre-process meta data of each componnet.
+ * - Wraps each child in a component with PConnect
+ * - Process all actions and make them avaiable in props
+ * - Filters all properties in metadata and keeps them
+ * __internal for re-render process through connect
+ */
+class PConnect extends Component {
+  constructor(props) {
+    super(props);
+    const { getPConnect } = this.props;
+    this.state = {
+      hasError: false,
+    };
+
+    this.eventHandler = this.eventHandler.bind(this);
+    this.changeHandler = this.changeHandler.bind(this);
+
+    this.c11nEnv = getPConnect();
+
+    this.Control = getComponent(this.c11nEnv);
+    this.actionsAPI = this.c11nEnv.getActionsApi();
+
+    this.processActions(this.c11nEnv);
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  componentDidMount() {
+    this.c11nEnv.addFormField();
+    setVisibilityForList(this.c11nEnv, true);
+  }
+
+  componentDidCatch(error, info) {
+    console.error(`Error while Rendering the component ${this.componentName} : `, error, info.componentStack);
+  }
+
+  componentWillUnmount() {
+    if (this.c11nEnv.removeFormField) {
+      this.c11nEnv.removeFormField();
+      setVisibilityForList(this.c11nEnv, false);
+    }
+  }
+
+  /*
+   *  processActions to see all actions in meta and adds event in props.
+   *  Attaches common handler (eventHandler) for all actions.
+   */
+  processActions() {
+    if (this.c11nEnv.isEditable()) {
+      this.c11nEnv.setAction('onChange', this.changeHandler);
+      this.c11nEnv.setAction('onBlur', this.eventHandler);
+    }
+  }
+
+  // Using separate handle for change as in case of dropdown, native click is mapped to react change
+  changeHandler(event) {
+    this.actionsAPI.changeHandler(this.c11nEnv, event);
+    //      getActionProcessor().changeHandler(this.c11nEnv, event);
+  }
+
+  eventHandler(event) {
+    this.actionsAPI.eventHandler(this.c11nEnv, event);
+    //      getActionProcessor().eventHandler(this.c11nEnv, event);
+  }
+
+  createChildren() {
+    const { getPConnect } = this.props;
+    if (getPConnect().hasChildren() && getPConnect().getChildren()) {
+      return getPConnect()
+        .getChildren()
+
+        .map((childProps, index) => <PConnect key={`${this.getKey(childProps)}_${index}`} {...childProps} />);
+    }
+    return null;
+  }
+
+  getKey(props = this.props) {
+    const { getPConnect } = props;
+    const viewName = getPConnect().getConfigProps().name || getPConnect().getCurrentView();
+    let key = !viewName ? createUID() : `${viewName}!${getPConnect().getCurrentClassID() || createUID()}`;
+
+    // In the case of pyDetails the key must be unique for each instance
+    if (viewName && viewName.toUpperCase() === 'PYDETAILS') {
+      key += `!${getPConnect().getCaseInfo().getID()}`;
+    }
+
+    return key.toUpperCase();
+  }
+
+  render() {
+    const { hasError } = this.state;
+    const { getPConnect, additionalProps, ...otherProps } = this.props;
+
+    if (hasError) {
+      // You can render any custom fallback UI
+      // console.log(`react_pconnect error: used to return: <ErrorBoundary getPConnect={() => this.c11nEnv} isInternalError />`);
+      return <ErrorBoundary getPConnect={() => this.c11nEnv} isInternalError />;
+    }
+
+    const props = this.c11nEnv.getConfigProps();
+    const actions = this.c11nEnv.getActions();
+    const finalProps = {
+      ...props,
+      getPConnect,
+      ...actions,
+      additionalProps,
+      ...otherProps,
+    };
+
+    // If the new component is a reference node then mark with a unique key
+    if (['reference', 'View'].includes(getPConnect().getComponentName()) && !finalProps.key) {
+      return (
+        <this.Control {...finalProps} key={this.getKey()}>
+          {this.createChildren()}
+        </this.Control>
+      );
+    }
+
+    // console.log(`react_pconnect: used to return: <this.Control {...finalProps} />`);
+
+    return <this.Control {...finalProps}>{this.createChildren()}</this.Control>;
+  }
+}
+
+// PConnect.propTypes = {
+//   // __internal: PropTypes.object.isRequired,
+//   // meta: PropTypes.object.isRequired,
+//   // configObject: PropTypes.object.isRequired,
+//   getPConnect: PropTypes.func.isRequired,
+//   additionalProps: PropTypes.shape({
+//     noLabel: PropTypes.bool,
+//     readOnly: PropTypes.bool,
+//   }),
+//   validatemessage: PropTypes.string,
+// };
+
+PConnect.defaultProps = {
+  additionalProps: {},
+  validatemessage: '',
+};
+
+// PCore.registerComponentCreator is now called by registerComponentCreator() from @pega/sdk-react
+// during workarea bootstrap. This block is intentionally removed.
+
+// PCore.getAssetLoader().register('component-loader', async (componentNames = []) => {
+//   const promises = [];
+//   componentNames.forEach(comp => {
+//     if (/^[A-Z]/.test(comp) && !LazyComponentMap[comp]) {
+//       if (!ComponentMap[comp]) {
+//         const srcUrl = `${PCore.getAssetLoader().getConstellationServiceUrl()}/v860/${PCore.getAssetLoader().getAppAlias()}/component/${comp}.js`;
+//         promises.push(PCore.getAssetLoader().getLoader()(srcUrl, 'script'));
+//       } else {
+//         if (ComponentMap[comp].modules && ComponentMap[comp].modules.length) {
+//           ComponentMap[comp].modules.forEach(module => {
+//             LazyComponentMap[comp] = module;
+//           });
+//         }
+//         if (ComponentMap[comp].scripts && ComponentMap[comp].scripts.length) {
+//           ComponentMap[comp].scripts.forEach(script => {
+//             promises.push(PCore.getAssetLoader().getLoader()(script, 'script'));
+//           });
+//         }
+//       }
+//     }
+//   });
+//   /* Promise.all rejects or accepts all or none. This causes entire component loader to fail
+//     in case there is a single failure.
+//     Using allSettled to allow Promise to be resolved even if there are failed components
+//     Note : This is a liberty taken at component loader and unwise to be used at
+//     asset loader which will still use Promise.all
+//     */
+//   await Promise.allSettled(promises);
+// });
+
+/**
+ *
+ * @param {*} declarative
+ * @returns {React.Components<Props, State>}
+
+ */
+const createPConnectComponent = () => {
+  return PConnect;
+};
+
+export default createPConnectComponent;
+
+/* These APIs need to be exposed for authoring bridge
+Will be removed when pxbootstrap and constellation_bridge is cleaned up
+to use single bootstrap file from constellation  */
+// window.authoringUtils = {
+//   createElement,
+//   render,
+//   unmountComponentAtNode,
+//   LazyComponentMap
+// };

package/templates/react-native-sdk-reference/src/components/common/DisplayField.tsx

@@ -0,0 +1,29 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+const DisplayField = ({ variant, label, hideLabel, value }) => {
+  return (
+    <View
+      style={[
+        styles.container,
+        variant === 'stacked' && { flexDirection: 'column', gap: 6 },
+        variant !== 'stacked' && { flexDirection: 'row' },
+      ]}
+    >
+      {!hideLabel && <Text style={[styles.label, variant === 'stacked' && { width: '100%' }]}>{label}</Text>}
+      <Text style={[styles.value, variant === 'stacked' && { width: '100%' }]}>{value}</Text>
+    </View>
+  );
+};
+
+export default DisplayField;
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    marginVertical: 8,
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+  },
+  label: { color: '#fff', width: '40%', fontSize: 16, fontWeight: '500' },
+  value: { color: '#fff', width: '60%', fontSize: 16 },
+});

package/templates/react-native-sdk-reference/src/components/common/FormFieldWrapper.tsx

@@ -0,0 +1,5 @@
+import { View } from 'react-native';
+
+export default function FormFieldWrapper({ children, style = {} }) {
+  return <View style={[{ paddingBlock: 8, width: '100%' }, style]}>{children}</View>;
+}

package/templates/react-native-sdk-reference/src/components/common/HelperText.tsx

@@ -0,0 +1,11 @@
+import { HelperText as RNHelperText } from 'react-native-paper';
+
+export default function HelperText({ value, type }) {
+  if (!value) return null;
+
+  return (
+    <RNHelperText type={type} visible={!!value} style={{ color: type === 'error' ? '#FF3B30' : '#ffffff' }}>
+      {value}
+    </RNHelperText>
+  );
+}

package/templates/react-native-sdk-reference/src/components/common/LabelText.tsx

@@ -0,0 +1,22 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+const LabelText = ({ label, required, style = {} }) => {
+  return (
+    <View style={{ flexDirection: 'row' }}>
+      <Text style={[styles.label, style]}>{label}</Text>
+      {required && <Text style={styles.requiredLabel}> *</Text>}
+    </View>
+  );
+};
+
+export default LabelText;
+
+const styles = StyleSheet.create({
+  label: {
+    fontSize: 18,
+    color: '#fff',
+  },
+  requiredLabel: {
+    color: 'red',
+  },
+});