@pega/sdk 0.0.1

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

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import { isValidElement } from 'react';
+
+export function prepareCaseSummaryData(caseSummaryRegion, portalSpecificVisibilityChecker?) {
+  const filterVisibleChildren = children => {
+    return children
+      ?.getPConnect()
+      ?.getChildren()
+      ?.filter(child => {
+        const configProps = child.getPConnect().getConfigProps();
+        const defaultVisibilityCn = !('visibility' in configProps) || configProps.visibility === true;
+        return defaultVisibilityCn && (portalSpecificVisibilityChecker?.(configProps) ?? true);
+      });
+  };
+  const convertChildrenToSummaryData = children => {
+    return children?.map(childItem => {
+      const childPConnData = childItem.getPConnect().resolveConfigProps(childItem.getPConnect().getRawMetadata());
+      return childPConnData;
+    });
+  };
+
+  const summaryFieldChildren = caseSummaryRegion.props
+    .getPConnect()
+    .getChildren()[0]
+    ?.getPConnect()
+    ?.getReferencedViewPConnect()
+    ?.getPConnect()
+    ?.getChildren();
+
+  const primarySummaryFields =
+    summaryFieldChildren && summaryFieldChildren.length > 0
+      ? convertChildrenToSummaryData(filterVisibleChildren(summaryFieldChildren[0]))
+      : undefined;
+  const secondarySummaryFields =
+    summaryFieldChildren && summaryFieldChildren.length > 1
+      ? convertChildrenToSummaryData(filterVisibleChildren(summaryFieldChildren[1]))
+      : undefined;
+
+  return {
+    primarySummaryFields,
+    secondarySummaryFields
+  };
+}
+
+export const filterUtilities = (utils: ReactNode) => {
+  let utilsMeta;
+  if (isValidElement(utils)) {
+    const pConnect = utils.props.getPConnect();
+    utilsMeta = pConnect.getRawMetadata?.();
+    if (!utilsMeta?.children?.length) return;
+    utilsMeta = {
+      ...utilsMeta,
+      children: utilsMeta.children.filter((child: any) => child.config?.availableInChannel?.selfService === true)
+    };
+    return utilsMeta.children?.length ? pConnect.createComponent(utilsMeta) : undefined;
+  }
+  return utilsMeta;
+};

package/templates/react-sdk-reference/src/components/widget/AppAnnouncement/AppAnnouncement.tsx

@@ -0,0 +1,60 @@
+import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface AppAnnouncementProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  header?: string;
+  description?: string;
+  datasource?: any;
+  whatsnewlink?: string;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    borderLeft: '6px solid',
+    borderLeftColor: theme.palette.primary.light
+  }
+}));
+
+export default function AppAnnouncement(props: AppAnnouncementProps) {
+  const { header = '', description = '', datasource = [], whatsnewlink = '' } = props;
+  let details = [];
+  if (datasource && datasource.source) {
+    details = datasource.source.map(item => {
+      return item.name;
+    });
+  }
+
+  const classes = useStyles();
+
+  const handleClick = () => {
+    window.open(whatsnewlink);
+  };
+
+  return (
+    <Card title='AppAnnouncement' className={classes.root}>
+      <CardHeader title={<Typography variant='h6'>{header}</Typography>} />
+      <CardContent>
+        <Typography variant='body1' gutterBottom>
+          {description}
+        </Typography>
+        {details.map((itm, idx) => {
+          const theKey = `AppAnn-item-${idx}`;
+          return (
+            <Typography key={theKey} variant='body2'>
+              - {itm}
+            </Typography>
+          );
+        })}
+      </CardContent>
+      <CardActions>
+        <Button color='primary' onClick={handleClick} size='small'>
+          See what&apos;s new
+        </Button>
+      </CardActions>
+    </Card>
+  );
+}

package/templates/react-sdk-reference/src/components/widget/AppAnnouncement/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "AppAnnouncement",
+  "label": "App announcement",
+  "description": "App announcement widget",
+  "type": "Widget",
+  "subtype": "PAGE",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/widget/AppAnnouncement/index.tsx

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

package/templates/react-sdk-reference/src/components/widget/Attachment/Attachment.css

@@ -0,0 +1,95 @@
+.label {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.file-div {
+  border: 1px dashed var(--app-neutral-dark-color);
+  width: 100%;
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.file-div-error {
+  border: 1px dashed var(--app-error-color);
+  width: 100%;
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.progress-div {
+  text-align: center;
+  position: absolute;
+  left: 47%;
+}
+
+.file-label::after {
+  display: inline;
+  content: ' *';
+  vertical-align: top;
+  color: var(--app-neutral-dark-color);
+}
+
+.file-error {
+  color: var(--app-error-color);
+  font-size: 14px;
+}
+
+.psdk-utility-card {
+  display: flex;
+  flex-direction: row;
+  padding: 0.25rem 0rem 0.25rem 0.25rem;
+  margin-bottom: 0.5rem;
+  align-items: center;
+  border: 0.0625rem solid var(--utility-card-border-color);
+  border-radius: calc(0.25rem);
+  min-height: 3rem;
+}
+
+.psdk-utility-card-icon {
+  flex-grow: 1;
+  max-width: 2.813rem;
+  align-content: center;
+  display: flex;
+}
+
+.psdk-utility-card-svg-icon {
+  width: 2.5rem;
+  display: inline-block;
+  filter: var(--svg-color);
+}
+
+.psdk-utility-card-main {
+  flex-grow: 2;
+  margin-left: 5px;
+}
+
+.psdk-utility-card-main-primary-label {
+  font-weight: bold;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: normal;
+}
+
+.psdk-utility-card-action-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  filter: var(--svg-color);
+}
+
+.psdk-utility-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.psdk-utility-action {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.file-disabled {
+  opacity: 0.4;
+}