@pega/sdk 0.0.5 → 0.0.6

package/templates/react-native-sdk-reference/src/components/template/OneColumn/OneColumn.tsx

@@ -0,0 +1,29 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { PConnProps } from '@/types/PConnProps';
+
+interface OneColumnProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  additionalProp?: string;
+}
+
+export default function OneColumn(props: PropsWithChildren<OneColumnProps>) {
+  const { children } = props;
+
+  return (
+    <View style={styles.container}>
+      {(children as ReactElement[]).map((child) => {
+        return child;
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 16, // Use numeric value for spacing in React Native
+    alignItems: 'flex-start',
+  },
+});

package/templates/react-native-sdk-reference/src/components/template/OneColumn/index.tsx

@@ -0,0 +1 @@
+export { default } from './OneColumn';

package/templates/react-native-sdk-reference/src/context/LoaderContext.tsx

@@ -0,0 +1,42 @@
+import React, { createContext, useContext, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { ActivityIndicator } from 'react-native-paper';
+
+const LoaderContext = createContext({
+  showLoader: () => {},
+  hideLoader: () => {},
+  loading: false,
+});
+
+export const LoaderProvider = ({ children }: any) => {
+  const [loading, setLoading] = useState(false);
+
+  const showLoader = () => setLoading(true);
+  const hideLoader = () => setLoading(false);
+
+  return (
+    <LoaderContext.Provider value={{ showLoader, hideLoader, loading }}>
+      {children}
+      {loading && (
+        <View style={styles.loaderContainer}>
+          <ActivityIndicator animating={true} size="large" color="#7B8CE5" />
+        </View>
+      )}
+    </LoaderContext.Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  loaderContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.4)',
+  },
+});
+
+export const useLoader = () => useContext(LoaderContext);

package/templates/react-native-sdk-reference/src/mediaco/AdvBanner.tsx

@@ -0,0 +1,62 @@
+import { Image } from 'expo-image';
+import { StyleSheet, Text, View } from 'react-native';
+
+const AdvBanner = () => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.titleContainer}>
+        <Text style={styles.title}>Blazing fast internet speeds!</Text>
+        <Image source={require('../../assets/icons/cross.png')} style={styles.icon} />
+      </View>
+      <View style={styles.descContainer}>
+        <Text style={styles.descText}>Check how your internet works. Get the test for free now!</Text>
+        <Image source={require('../../assets/icons/clock.png')} style={styles.clockIcon} />
+      </View>
+    </View>
+  );
+};
+
+export default AdvBanner;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    backgroundColor: '#5A688259',
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    borderRadius: 18,
+    marginVertical: 10,
+    height: 108,
+    width: '100%',
+  },
+  titleContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 10,
+    color: '#fff',
+    fontWeight: '500',
+  },
+  descContainer: {
+    flexDirection: 'row',
+  },
+  title: {
+    fontSize: 18,
+    color: '#fff',
+  },
+  descText: {
+    color: '#BDBCC0',
+    fontSize: 15,
+    width: '90%',
+  },
+  icon: {
+    width: 20,
+    height: 20,
+  },
+  clockIcon: {
+    width: 45,
+    height: 45,
+  },
+});

package/templates/react-native-sdk-reference/src/mediaco/Header.tsx

@@ -0,0 +1,60 @@
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import { Image } from 'expo-image';
+import { router } from 'expo-router';
+import { Alert, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { logout } from '../utils/auth';
+
+const Header = () => {
+  return (
+    <View style={styles.container}>
+      <Image source={require('../../assets/images/MediaCo.png')} style={styles.logo} />
+
+      <TouchableOpacity
+        style={styles.logoutIcon}
+        onPress={() => {
+          // Handle logout logic here
+          Alert.alert('Logout', 'Are you sure you want to logout?', [
+            {
+              text: 'Cancel',
+              style: 'cancel',
+            },
+            {
+              text: 'OK',
+              onPress: () => {
+                logout().finally(() => {
+                  router.replace('/');
+                });
+              },
+            },
+          ]);
+        }}
+      >
+        <MaterialIcons name="logout" size={20} color="#fff" />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default Header;
+
+const styles = StyleSheet.create({
+  container: {
+    height: 50,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    paddingHorizontal: 20,
+  },
+  logo: {
+    height: 20,
+    width: 90,
+  },
+  logoutIcon: {
+    position: 'absolute',
+    right: 20,
+    top: 15,
+    zIndex: 1,
+  },
+});

package/templates/react-native-sdk-reference/src/mediaco/HomeScreen.tsx

@@ -0,0 +1,78 @@
+import { router } from 'expo-router';
+import { StyleSheet, Text, View } from 'react-native';
+import { FAB } from 'react-native-paper';
+import AdvBanner from './AdvBanner';
+import QuickActions from './QuickActions';
+import YourServices from './YourServices';
+
+const HomeScreen = () => {
+  return (
+    <View style={styles.container}>
+      <QuickActions />
+
+      <AdvBanner />
+
+      <View style={styles.bundleContainer}>
+        <Text
+          style={{
+            color: '#fff',
+            fontSize: 20,
+            marginBottom: 16,
+            fontWeight: '600',
+          }}
+        >
+          Your bundles
+        </Text>
+        <YourServices />
+      </View>
+
+      <FAB
+        icon="plus"
+        label="Data Package"
+        style={[
+          styles.fab,
+          {
+            // @ts-ignore - 'color' does not exist in type 'WithAnimatedObject
+            color: '#FFFFFF',
+            backgroundColor: '#0B84FF',
+          },
+        ]}
+        color="#FFFFFF"
+        onPress={() => router.push('/workarea')}
+      />
+    </View>
+  );
+};
+
+export default HomeScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    paddingHorizontal: 18,
+    flex: 1,
+  },
+  quickActionsContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    width: '100%',
+  },
+  bundleContainer: {
+    flexDirection: 'column',
+    marginTop: 20,
+  },
+  fab: {
+    position: 'absolute',
+    margin: 16,
+    right: 0,
+    bottom: 65,
+    borderRadius: 30,
+    borderCurve: 'continuous',
+    height: 50,
+    width: 170,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/templates/react-native-sdk-reference/src/mediaco/QuickActions.tsx

@@ -0,0 +1,68 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Image } from 'expo-image';
+
+const QuickActions = () => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.item}>
+        <View style={[styles.iconContainer]}>
+          <Image source={require('../../assets/icons/donut.png')} style={styles.icon} />
+        </View>
+        <Text style={[styles.text]}>Data usage</Text>
+      </View>
+
+      <View style={styles.item}>
+        <View style={[styles.iconContainer]}>
+          <Image source={require('../../assets/icons/bell.png')} style={styles.icon} />
+        </View>
+        <Text style={[styles.text]}>Notifications</Text>
+      </View>
+
+      <View style={styles.item}>
+        <View style={[styles.iconContainer]}>
+          <Image source={require('../../assets/icons/gear.png')} style={styles.icon} />
+        </View>
+        <Text style={[styles.text]}>Settings</Text>
+      </View>
+    </View>
+  );
+};
+
+export default QuickActions;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 10,
+    width: '100%',
+    marginTop: 20,
+  },
+  item: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 5,
+    width: '30%',
+  },
+  text: {
+    fontSize: 15,
+    marginTop: 5,
+    textAlign: 'center',
+    color: '#fff',
+  },
+  iconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 44,
+    height: 44,
+    borderRadius: '50%',
+    backgroundColor: '#FFFFFF59',
+  },
+  icon: {
+    height: 20,
+    width: 20,
+    textAlign: 'center',
+  },
+});

package/templates/react-native-sdk-reference/src/mediaco/ResolutionScreen.tsx

@@ -0,0 +1,48 @@
+import { router } from 'expo-router';
+import { Text, View } from 'react-native';
+import { Button } from 'react-native-paper';
+
+const ResolutionScreen = () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: '#01153d',
+      }}
+    >
+      <Text
+        style={{
+          color: '#FFFFFF',
+          fontSize: 24,
+          fontWeight: 'bold',
+          textAlign: 'center',
+          marginTop: 100,
+        }}
+      >
+        Thank you! The next step in this case has been routed appropriately.
+      </Text>
+
+      <Button
+        mode="contained"
+        buttonColor="#fff"
+        textColor="#000"
+        onPress={() => {
+          router.replace('/home');
+        }}
+        style={{
+          position: 'absolute',
+          bottom: 20,
+          alignSelf: 'center',
+          paddingHorizontal: 20,
+          paddingVertical: 5,
+          width: '90%',
+          marginHorizontal: 20,
+        }}
+      >
+        Done
+      </Button>
+    </View>
+  );
+};
+
+export default ResolutionScreen;

package/templates/react-native-sdk-reference/src/mediaco/SafeArea.tsx

@@ -0,0 +1,11 @@
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+const SafeArea = ({ children }) => {
+  return (
+    <SafeAreaView style={{ flex: 1 }} edges={['top', 'bottom']}>
+      {children}
+    </SafeAreaView>
+  );
+};
+
+export default SafeArea;

package/templates/react-native-sdk-reference/src/mediaco/TabBar.tsx

@@ -0,0 +1,102 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import AntDesign from '@expo/vector-icons/AntDesign';
+import Entypo from '@expo/vector-icons/Entypo';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import FontAwesome6 from '@expo/vector-icons/FontAwesome6';
+
+export default function TabBar({ state, descriptors, navigation }) {
+  const icons = {
+    index: (props) => <Entypo name="home" size={20} color="#BDBCC0" {...props} />,
+    'your-services': (props) => <AntDesign name="heart" size={24} color="#BDBCC0" {...props} />,
+    shop: (props) => <FontAwesome name="shopping-cart" size={20} color="#BDBCC0" {...props} />,
+    contact: (props) => <FontAwesome6 name="phone-volume" size={20} color="#BDBCC0" {...props} />,
+  };
+
+  return (
+    <View
+      style={[
+        styles.tabBar,
+        {
+          backgroundColor: '#16264c',
+          borderTopColor: '#595976',
+        },
+      ]}
+    >
+      {state.routes.map((route, index) => {
+        const { options } = descriptors[route.key];
+        const label =
+          options.tabBarLabel !== undefined
+            ? options.tabBarLabel
+            : options.title !== undefined
+              ? options.title
+              : route.name;
+
+        const isFocused = state.index === index;
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          });
+
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name, route.params);
+          }
+        };
+
+        const onLongPress = () => {
+          navigation.emit({
+            type: 'tabLongPress',
+            target: route.key,
+          });
+        };
+
+        return (
+          <TouchableOpacity
+            key={route.name}
+            style={styles.tabBarItem}
+            accessibilityRole="button"
+            accessibilityState={isFocused ? { selected: true } : {}}
+            accessibilityLabel={options.tabBarAccessibilityLabel}
+            testID={options.tabBarTestID}
+            onPress={onPress}
+            onLongPress={onLongPress}
+          >
+            {icons[route.name]({
+              color: isFocused ? '#FFF' : '#BDBCC0',
+            })}
+            <Text
+              style={{
+                color: isFocused ? '#FFF' : '#BDBCC0',
+                fontSize: 10,
+              }}
+            >
+              {label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  tabBar: {
+    position: 'absolute',
+    bottom: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    paddingTop: 8,
+    paddingBottom: 10,
+    borderWidth: 1,
+  },
+  tabBarItem: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 5,
+  },
+});

package/templates/react-native-sdk-reference/src/mediaco/YourServices.tsx

@@ -0,0 +1,90 @@
+import { createElement } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { List } from 'react-native-paper';
+import { Image } from 'expo-image';
+
+const LIST = [
+  {
+    title: 'Entertainment package',
+    description: '',
+    icon: (props) => (
+      <Image source={require(`../../assets/icons/music.png`)} style={[props.style, styles.rightImage]} />
+    ),
+  },
+  {
+    title: 'High-speed data',
+    description: '',
+    icon: (props) => (
+      <Image source={require(`../../assets/icons/speed.png`)} style={[props.style, styles.rightImage]} />
+    ),
+  },
+  {
+    title: 'Home Internet',
+    description: 'internet',
+    icon: (props) => (
+      <Image source={require(`../../assets/icons/internet.png`)} style={[props.style, styles.rightImage]} />
+    ),
+  },
+  {
+    title: '📡 Satellite service',
+    description: 'Anyone with a compatible device is eligible for beta trial!',
+    icon: (props) => (
+      <Image source={require(`../../assets/icons/globe.png`)} style={[props.style, styles.rightImage]} />
+    ),
+  },
+];
+
+const YourServices = () => {
+  return (
+    <View style={styles.container}>
+      <View style={{ marginBottom: 16, paddingHorizontal: 20 }}>
+        <Text
+          style={{
+            color: '#75808A',
+            fontSize: 14,
+            fontWeight: '400',
+            marginBottom: 10,
+          }}
+        >
+          Motion Plus
+        </Text>
+        <Text style={{ color: '#191C1F', fontSize: 22, fontWeight: '600' }}>212-456-7890</Text>
+      </View>
+      {LIST.map((item, index) => (
+        <List.Item
+          key={index}
+          title={item.title}
+          description={item.description}
+          left={(props) => createElement(item.icon, props)}
+          right={(props: any) => (
+            <Image
+              source={require('../../assets/icons/right-arrow.png')}
+              style={[styles.image, props.style, { alignSelf: 'center' }]}
+            />
+          )}
+        />
+      ))}
+    </View>
+  );
+};
+
+export default YourServices;
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#FFFFFF',
+    height: 408,
+    borderRadius: 18,
+    paddingVertical: 20,
+  },
+  image: {
+    width: 7, // Adjust width as needed
+    height: 20, // Adjust height as needed
+    borderRadius: 20, // Example for a circular image
+    marginRight: 8, // Add some spacing
+  },
+  rightImage: {
+    width: 44, // Adjust width as needed
+    height: 44, // Adjust height as needed
+  },
+});

package/templates/react-native-sdk-reference/src/sdk-pega-component-map.ts

@@ -0,0 +1,64 @@
+import type { ComponentRegistry } from '@pega/sdk-types';
+
+import RootContainer from './components/infra/Containers/RootContainer';
+import ViewContainer from './components/infra/Containers/ViewContainer';
+import FlowContainer from './components/infra/Containers/FlowContainer';
+import Reference from './components/infra/Reference';
+import Region from './components/infra/Region';
+import View from './components/infra/View/View';
+import DefaultForm from './components/template/DefaultForm';
+import OneColumn from './components/template/OneColumn';
+import Details from './components/template/Details';
+
+import AutoComplete from './components/field/AutoComplete';
+import Checkbox from './components/field/Checkbox';
+import Currency from './components/field/Currency';
+import Date from './components/field/Date';
+import Dropdown from './components/field/Dropdown';
+import Email from './components/field/Email';
+import Group from './components/field/Group';
+import Integer from './components/field/Integer';
+import Phone from './components/field/Phone';
+import RadioButtons from './components/field/RadioButtons';
+import TextArea from './components/field/TextArea';
+import TextInput from './components/field/TextInput';
+import URL from './components/field/URL';
+
+const pegaSdkComponentMap: any = {
+  RootContainer: RootContainer,
+  ViewContainer: ViewContainer,
+  reference: Reference,
+  View,
+  Region: Region,
+  FlowContainer: FlowContainer,
+  DefaultForm: DefaultForm,
+  OneColumn: OneColumn,
+  TwoColumn: OneColumn, // Showing TwoColumn template as OneColumn for mobile compatibility
+  Details: Details,
+
+  AutoComplete: AutoComplete,
+  Checkbox: Checkbox,
+  Currency: Currency,
+  Date: Date,
+  Dropdown: Dropdown,
+  Email: Email,
+  Group: Group,
+  Integer: Integer,
+  Phone: Phone,
+  RadioButtons: RadioButtons,
+  TextArea: TextArea,
+  TextInput: TextInput,
+  URL: URL,
+};
+
+export default pegaSdkComponentMap;
+
+/**
+ * Register all SDK components into a ComponentRegistry.
+ * Call once during workarea bootstrap, before initCoreContainers().
+ */
+export function registerComponents(registry: ComponentRegistry<React.ComponentType<any>>) {
+  for (const key in pegaSdkComponentMap) {
+    registry.register(key, pegaSdkComponentMap[key]);
+  }
+}