@pega/dx-component-builder-sdk 0.25.6 → 0.26.1

package/tests/assets/sdk-r/components/create/override-sdk/infra/ModalViewContainer/DataViewActionButtons/DataViewActionButtons.tsx

@@ -0,0 +1,138 @@
+import { useState } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import Button from '@mui/material/Button';
+import { Grid2, Divider } from '@mui/material';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+function getActionLabel(action: string, constants: { RESOURCE_STATUS: { UPDATE?: unknown; CREATE?: unknown; OPEN_FLOW_ACTION?: unknown } }) {
+  switch (action) {
+    case constants.RESOURCE_STATUS.UPDATE:
+      return 'Update';
+    case constants.RESOURCE_STATUS.CREATE:
+      return 'Submit';
+    case constants.RESOURCE_STATUS.OPEN_FLOW_ACTION:
+      return 'Submit';
+    default:
+      return 'Submit';
+  }
+}
+
+interface DataViewActionButtonsProps extends PConnProps {
+  context: string;
+  classId: string;
+  dataObjectAction: string;
+  dataRecordKeys: string;
+  actionID: string;
+  closeActionsDialog: () => void;
+}
+
+const useStyles = makeStyles(theme => ({
+  divider: {
+    marginTop: '10px',
+    marginBottom: '10px'
+  },
+  actionButtonsArea: {
+    padding: '8px 24px 20px 24px'
+  },
+  secondaryButton: {
+    backgroundColor: (theme as any).actionButtons.secondary.backgroundColor,
+    color: (theme as any).actionButtons.secondary.color
+  },
+  primaryButton: {
+    backgroundColor: (theme as any).actionButtons.primary.backgroundColor,
+    color: (theme as any).actionButtons.primary.color
+  }
+}));
+
+export default function DataViewActionButtons(props: DataViewActionButtonsProps) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { getPConnect, context, classId, dataObjectAction, dataRecordKeys, actionID, closeActionsDialog } = props;
+
+  const classes = useStyles();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Data Object';
+  const actionsAPI = getPConnect().getActionsApi();
+  const constants = PCore.getConstants();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const actionName = localizedVal(getActionLabel(constants.RESOURCE_STATUS[dataObjectAction], constants), localeCategory);
+
+  function handleCancel() {
+    actionsAPI.cancelDataObject(context);
+  }
+
+  function handleSubmitAction() {
+    setIsLoading(true);
+    if (constants.RESOURCE_STATUS[dataObjectAction] === constants.RESOURCE_STATUS.CREATE) {
+      actionsAPI
+        .createDataObject(context)
+        .then(data => {
+          PCore.getPubSubUtils().publish(constants.PUB_SUB_EVENTS.DATA_EVENTS.DATA_OBJECT_CREATED, {
+            classId,
+            data
+          });
+        })
+        .catch(() => {
+          // Error messages are handled by the infrastructure via httpMessages/pageMessages
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    } else if (constants.RESOURCE_STATUS[dataObjectAction] === constants.RESOURCE_STATUS.UPDATE) {
+      actionsAPI
+        .updateDataObject(context, JSON.parse(dataRecordKeys))
+        .then(() => {
+          PCore.getPubSubUtils().publish(constants.PUB_SUB_EVENTS.DATA_EVENTS.DATA_OBJECT_UPDATED, {
+            classId
+          });
+        })
+        .catch(() => {
+          // Error messages are handled by the infrastructure via httpMessages/pageMessages
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    } else if (constants.RESOURCE_STATUS[dataObjectAction] === constants.RESOURCE_STATUS.OPEN_FLOW_ACTION) {
+      actionsAPI
+        .submitDataObjectAction(context, JSON.parse(dataRecordKeys), actionID)
+        .then(() => {
+          PCore.getPubSubUtils().publish(constants.PUB_SUB_EVENTS.DATA_EVENTS.DATA_OBJECT_UPDATED, {
+            classId,
+            actionID
+          });
+        })
+        .catch(() => {
+          // Error messages are handled by the infrastructure via httpMessages/pageMessages
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    }
+  }
+
+  return (
+    <div className={classes.actionButtonsArea}>
+      <Divider className={classes.divider} />
+      <Grid2 container spacing={4} justifyContent='space-between'>
+        <Grid2>
+          <Grid2 container spacing={1}>
+            <Grid2>
+              <Button className={classes.secondaryButton} color='secondary' variant='contained' disabled={isLoading} onClick={handleCancel}>
+                {localizedVal('Cancel', localeCategory)}
+              </Button>
+            </Grid2>
+          </Grid2>
+        </Grid2>
+        <Grid2>
+          <Grid2 container spacing={1}>
+            <Grid2>
+              <Button className={classes.primaryButton} color='primary' variant='contained' disabled={isLoading} onClick={handleSubmitAction}>
+                {actionName}
+              </Button>
+            </Grid2>
+          </Grid2>
+        </Grid2>
+      </Grid2>
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/infra/ModalViewContainer/ModalViewContainer.tsx

@@ -13,11 +13,17 @@ import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpe
 import { getBanners } from '@pega/react-sdk-components/lib/components/helpers/case-utils';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
+
 interface ModalViewContainerProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   loadingInfo?: string;
   routingInfo?: any;
   pageMessages?: string[];
+  httpMessages?: any[];
 }
 
 function isOpenModalAction(prevModalCollection, currentModalList) {
@@ -109,12 +115,12 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
   const Assignment = getComponentFromMap('Assignment');
   const CancelAlert = getComponentFromMap('CancelAlert');
   const ListViewActionButtons = getComponentFromMap('ListViewActionButtons');
-
+  const DataViewActionButtons = getComponentFromMap('DataViewActionButtons');
   const classes = useStyles();
 
   const modalCollection = useRef({});
   const routingInfoRef = useRef({});
-  const { getPConnect, routingInfo = null, pageMessages = [] } = props;
+  const { getPConnect, routingInfo = null, pageMessages = [], httpMessages = [] } = props;
   const pConn = getPConnect();
   const { acTertiary } = pConn.getConfigProps() as any;
   const {
@@ -122,19 +128,28 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
     PUB_SUB_EVENTS: { EVENT_SHOW_CANCEL_ALERT }
   } = PCore.getConstants();
   const { subscribe, unsubscribe } = PCore.getPubSubUtils();
-  const [bShowModal, setShowModal] = useState(false);
   const [bShowCancelAlert, setShowCancelAlert] = useState(false);
-  const [createdView, setCreatedView] = useState<any>(null);
-  const [title, setTitle] = useState('');
-  const [arNewChildrenAsReact, setArNewChildrenAsReact] = useState<any[]>([]);
-  const [itemKey, setItemKey] = useState('');
   const [cancelAlertProps, setCancelAlertProps] = useState({});
-  const [isMultiRecordData, setMultiRecordData] = useState(false);
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
-  const localeCategory = 'Data Object';
+  const localeCategory = 'ModalContainer';
 
   const ERROR_WHILE_RENDERING = 'ERROR_WHILE_RENDERING';
 
+  // Stack of open modals — each entry represents one stacked modal
+  interface ModalEntry {
+    key: string;
+    title: string;
+    createdView: any;
+    arNewChildrenAsReact: any[];
+    isMultiRecordData: boolean;
+    isDataObjectModal: boolean;
+    dataRecordKeys: string;
+    dataObjectActionID: string;
+    dataObjectAction: string;
+    dataObjectClassId: string;
+  }
+  const [modalStack, setModalStack] = useState<ModalEntry[]>([]);
+
   function showAlert(payload) {
     const { latestItem } = getKeyAndLatestItem(routingInfoRef.current, pConn, { acTertiary });
     const isReverseCoexistence = (PCore.getCoexistenceManager().getBroadcastUtils() as any).isReverseCoexistenceCaseLoaded();
@@ -175,7 +190,8 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
       const modifiedModalCollection = { ...tempModalCollection };
       delete modifiedModalCollection[closedModalKey];
       modalCollection.current = modifiedModalCollection;
-      setShowModal(false);
+      // Remove the closed modal from the stack
+      setModalStack(prev => prev.filter(entry => entry.key !== closedModalKey));
     }
   }
 
@@ -183,21 +199,26 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
     setShowCancelAlert(false);
 
     if (dismissAllModals) {
-      setShowModal(false);
+      setModalStack([]);
     }
   };
 
-  function getModalHeading(dataObjectAction) {
-    return dataObjectAction === PCore.getConstants().RESOURCE_STATUS.CREATE
-      ? localizedVal('Add Record', localeCategory)
-      : localizedVal('Edit Record', localeCategory);
+  function getModalHeading(dataObjectAction, actionName) {
+    switch (dataObjectAction) {
+      case PCore.getConstants().RESOURCE_STATUS.CREATE:
+        return localizedVal('Add Record', localeCategory);
+      case PCore.getConstants().RESOURCE_STATUS.OPEN_FLOW_ACTION:
+        return localizedVal(actionName, localeCategory);
+      default:
+        return localizedVal('Edit Record', localeCategory);
+    }
   }
 
-  function determineModalHeaderByAction(actionName, caseTypeName, ID, caseLocaleRef) {
+  function determineModalHeaderByAction(actionName, caseTypeName, caseLocaleRef) {
     if (actionName) {
       return localizedVal(actionName, localeCategory);
     }
-    return `${localizedVal('Create', localeCategory)} ${localizedVal(caseTypeName, undefined, caseLocaleRef)} (${ID})`;
+    return `${localizedVal('Create', localeCategory)} ${localizedVal(caseTypeName, undefined, caseLocaleRef)}`;
   }
 
   useEffect(() => {
@@ -242,7 +263,6 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
         (isOpenModalAction(modalCollection.current, accessedOrder) || isUpdateModalAction(modalCollection.current, accessedOrder))
       ) {
         const { actionName } = latestItem;
-        // const { isDockable = false } = latestItem?.modalOptions || {};
         const configObject: any = getConfigObject(latestItem, null, false);
         const pConnect = configObject.getPConnect();
         const caseInfo: any = pConnect.getCaseInfo();
@@ -250,19 +270,26 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
         const caseTypeName = caseInfo.getCaseTypeName();
         const ID = caseInfo.getBusinessID() || caseInfo.getID();
         const isDataObject = routingInfo.items[latestItem.context].resourceType === PCore.getConstants().RESOURCE_TYPES.DATA;
-        const dataObjectAction = routingInfo.items[latestItem.context].resourceStatus;
-        const isMultiRecord = routingInfo.items[latestItem.context].isMultiRecordData;
-        const headingValue =
-          isDataObject || isMultiRecord
-            ? getModalHeading(dataObjectAction)
-            : determineModalHeaderByAction(actionName, caseTypeName, ID, `${caseInfo?.getClassName()}!CASE!${caseInfo.getName()}`.toUpperCase());
+        const dataObjAction = routingInfo.items[latestItem.context].resourceStatus;
+        const multiRecordData = routingInfo.items[latestItem.context].isMultiRecordData;
+        const actionID = routingInfo.items[latestItem.context].actionID;
+
+        const getHeadingValue = () => {
+          if (multiRecordData) {
+            return routingInfo.items[latestItem.context].heading;
+          }
+          if (isDataObject) {
+            if (actionName) {
+              return localizedVal(actionName, localeCategory);
+            }
+            return getModalHeading(dataObjAction, actionName);
+          }
+          return determineModalHeaderByAction(actionName, caseTypeName, pConnect?.getCaseLocaleReference());
+        };
 
         let arChildrenAsReact: any[] = [];
 
         if (pConnect.getComponentName() === 'reference') {
-          // Reference component doesn't have children. It can build the View we want.
-          // The Reference component getPConnect is in configObject
-
           arChildrenAsReact.push(
             createElement(createPConnectComponent(), {
               ...configObject,
@@ -270,11 +297,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
             })
           );
         } else {
-          // This is the 8.6 implementation. Leaving it in for reference for now.
-          // And create a similar array of the children as React components
-          // passed to Assignment component when rendered
           arChildrenAsReact = (pConnect.getChildren() as []).map((child: any) => {
-            // Use Case Summary ID as the React element's key
             const caseSummaryID = child.getPConnect().getCaseSummary().ID;
             return createElement(createPConnectComponent(), {
               ...child,
@@ -283,19 +306,26 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
           });
         }
 
-        if (arChildrenAsReact.length > 0) setArNewChildrenAsReact(arChildrenAsReact);
-        setMultiRecordData(isMultiRecord);
-        setTitle(headingValue);
-        setCreatedView({ configObject, latestItem });
-        setItemKey(key);
-        setShowModal(true);
+        const modalEntry: ModalEntry = {
+          key,
+          title: getHeadingValue(),
+          createdView: { configObject, latestItem },
+          arNewChildrenAsReact: arChildrenAsReact.length > 0 ? arChildrenAsReact : [],
+          isMultiRecordData: multiRecordData,
+          isDataObjectModal: isDataObject && !multiRecordData,
+          dataRecordKeys: latestItem.key || '',
+          dataObjectActionID: actionID || '',
+          dataObjectAction: dataObjAction || '',
+          dataObjectClassId: pConnect.getValue('.classID') || ''
+        };
 
-        // Update modal use case which happens when assignment in submitted in modal.
         if (isUpdateModalAction(modalCollection.current, accessedOrder)) {
-          // handleModalUpdate(key);
+          // Update existing modal in the stack
+          setModalStack(prev => prev.map(entry => (entry.key === key ? modalEntry : entry)));
         } else if (isOpenModalAction(modalCollection.current, accessedOrder)) {
-          // New modal open scenario
+          // Push new modal onto the stack
           handleModalOpen(key);
+          setModalStack(prev => [...prev, modalEntry]);
         }
       } else if (isCloseModalAction(modalCollection.current, accessedOrder)) {
         handleModalClose(accessedOrder);
@@ -303,43 +333,59 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
     }
   }, [routingInfo]);
 
-  function closeActionsDialog() {
-    // actionsDialog.current = true;
-    setShowModal(false);
+  function closeActionsDialog(modalKey?: string) {
+    if (modalKey) {
+      setModalStack(prev => prev.filter(entry => entry.key !== modalKey));
+    } else {
+      // Close the topmost modal
+      setModalStack(prev => prev.slice(0, -1));
+    }
   }
 
   return (
     <>
-      <Dialog open={bShowModal} aria-labelledby='form-dialog-title' maxWidth={false}>
-        <DialogTitle id='form-dialog-title' className={`${classes.dlgTitle} psdk-dialog-title`}>
-          {title}
-        </DialogTitle>
-        <DialogContent className={`${classes.dlgContent} psdk-dialog-content`}>
-          {bShowModal ? (
+      {modalStack.map(modal => (
+        <Dialog key={modal.key} open aria-labelledby={`form-dialog-title-${modal.key}`} maxWidth='md' fullWidth>
+          <DialogTitle id={`form-dialog-title-${modal.key}`} className={`${classes.dlgTitle} psdk-dialog-title`}>
+            {modal.title}
+          </DialogTitle>
+          <DialogContent className={`${classes.dlgContent} psdk-dialog-content`}>
             <LocalizationProvider dateAdapter={AdapterDayjs}>
               <Assignment
-                getPConnect={createdView.configObject.getPConnect}
-                itemKey={itemKey}
+                getPConnect={modal.createdView.configObject.getPConnect}
+                itemKey={modal.key}
                 isInModal
                 banners={getBanners({
-                  target: itemKey,
-                  pageMessages
+                  target: modal.key,
+                  pageMessages,
+                  httpMessages
                 })}
               >
-                {arNewChildrenAsReact}
+                {modal.arNewChildrenAsReact}
               </Assignment>
             </LocalizationProvider>
-          ) : null}
-        </DialogContent>
-
-        {isMultiRecordData && (
-          <ListViewActionButtons
-            getPConnect={createdView.configObject.getPConnect}
-            context={createdView.latestItem.context}
-            closeActionsDialog={closeActionsDialog}
-          />
-        )}
-      </Dialog>
+          </DialogContent>
+
+          {modal.isMultiRecordData && (
+            <ListViewActionButtons
+              getPConnect={modal.createdView.configObject.getPConnect}
+              context={modal.createdView.latestItem.context}
+              closeActionsDialog={() => closeActionsDialog(modal.key)}
+            />
+          )}
+          {modal.isDataObjectModal && (
+            <DataViewActionButtons
+              getPConnect={modal.createdView.configObject.getPConnect}
+              context={modal.createdView.latestItem.context}
+              classId={modal.dataObjectClassId}
+              dataObjectAction={modal.dataObjectAction}
+              dataRecordKeys={modal.dataRecordKeys}
+              actionID={modal.dataObjectActionID}
+              closeActionsDialog={() => closeActionsDialog(modal.key)}
+            />
+          )}
+        </Dialog>
+      ))}
       {bShowCancelAlert && <CancelAlert {...cancelAlertProps} dismiss={dismissCancelAlert} />}
     </>
   );

package/tests/assets/sdk-r/components/create/override-sdk/infra/MultiStep/MultiStep.css

@@ -146,6 +146,69 @@ mat-horizontal-stepper {
   border-left-color: var(--app-neutral-color);
 }
 
+.psdk-vertical-stepper-container {
+  display: grid;
+  gap: 2rem;
+}
+
+.psdk-vertical-stepper-container.stepper-end {
+  grid-template-columns: 1fr minmax(12rem, auto);
+  grid-template-areas: 'content stepper';
+}
+
+.psdk-vertical-stepper-container.stepper-start {
+  grid-template-columns: minmax(12rem, auto) 1fr;
+  grid-template-areas: 'stepper content';
+}
+
+.psdk-stepper-rail {
+  grid-area: stepper;
+}
+
+.psdk-stepper-content {
+  grid-area: content;
+}
+
+.psdk-stepper-rail .psdk-vertical-step-header {
+  height: auto;
+  overflow: visible;
+  padding: 0.75rem 0;
+}
+
+.psdk-stepper-rail .psdk-vertical-step-icon {
+  flex-shrink: 0;
+}
+
+.psdk-stepper-rail .psdk-vertical-step {
+  position: relative;
+}
+
+.psdk-stepper-rail .psdk-vertical-step-body {
+  display: none;
+}
+
+.psdk-stepper-rail .psdk-vertical-step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 12px;
+  top: calc(0.75rem + 24px + 4px);
+  bottom: -4px;
+  width: 1px;
+  background-color: var(--app-neutral-color);
+}
+
+.psdk-stepper-rail .psdk-vertical-step-label {
+  white-space: nowrap;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: var(--text-secondary-color);
+}
+
+.psdk-stepper-rail .current .psdk-vertical-step-label {
+  font-weight: 700;
+  color: var(--app-text-color);
+}
+
 .psdk-horizontal-stepper {
   background-color: transparent;
   display: block;

package/tests/assets/sdk-r/components/create/override-sdk/infra/MultiStep/MultiStep.tsx

@@ -10,7 +10,7 @@ interface MultiStepProps extends PConnProps {
   itemKey: string;
   actionButtons: any[];
   onButtonPress: any;
-  bIsVertical: boolean;
+  stepIndicator?: 'horizontal' | 'vertical' | 'vertical-start';
   arNavigationSteps: any;
 }
 
@@ -19,7 +19,9 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
   const AssignmentCard = getComponentFromMap('AssignmentCard');
 
   const { getPConnect, children, itemKey = '', actionButtons, onButtonPress } = props;
-  const { bIsVertical, arNavigationSteps } = props;
+  const { stepIndicator = 'horizontal', arNavigationSteps } = props;
+
+  const isVertical = stepIndicator === 'vertical' || stepIndicator === 'vertical-start';
 
   let currentStep = arNavigationSteps.find(({ visited_status: vs }) => vs === 'current');
   if (!currentStep) {
@@ -56,59 +58,28 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
 
   return (
     <div>
-      {bIsVertical ? (
-        <div className='psdk-vertical-stepper'>
-          {arNavigationSteps.map((mainStep, index) => {
-            return (
-              <React.Fragment key={mainStep.actionID}>
-                <div className='psdk-vertical-step'>
-                  <div className={`psdk-vertical-step-header ${mainStep.visited_status}`}>
-                    <div className={`psdk-vertical-step-icon`}>
-                      <div className='psdk-vertical-step-icon-content'>
-                        <span>{index + 1}</span>
-                      </div>
+      {isVertical ? (
+        <div className={`psdk-vertical-stepper-container ${stepIndicator === 'vertical-start' ? 'stepper-start' : 'stepper-end'}`}>
+          <div className='psdk-stepper-rail'>
+            {arNavigationSteps.map((mainStep, index) => (
+              <div key={mainStep.actionID} className='psdk-vertical-step'>
+                <div className={`psdk-vertical-step-header ${mainStep.visited_status}`}>
+                  <div className='psdk-vertical-step-icon'>
+                    <div className='psdk-vertical-step-icon-content'>
+                      <span>{index + 1}</span>
                     </div>
-                    <div className='psdk-vertical-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
-                  </div>
-                  <div className={_getVBodyClass(index)}>
-                    {mainStep?.steps && (
-                      <ul
-                        style={{
-                          paddingInlineStart: '0rem',
-                          marginLeft: '-7px'
-                        }}
-                      >
-                        {mainStep.steps.forEach(subStep => {
-                          <li className='psdk-sub-step-list'>
-                            <div style={{ display: 'inline-flex' }}>
-                              {subStep.visited_status === 'current' && <img className='psdk-current-svg-icon' src='{svgCurrent}' />}
-                              {subStep.visited_status !== 'current' && <img className='psdk-not-current-svg-icon' src='{svgNotCurrent}' />}
-                              {subStep.visited_status === 'current' && <label className='psdk-sub-step-current'>{subStep.name}</label>}
-                              {subStep.visited_status !== 'current' && <label className='psdk-sub-step-not-current'>{subStep.name}</label>}
-                            </div>
-                            {subStep.visited_status === 'current' && (
-                              <div>
-                                <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
-                                  {children}
-                                </AssignmentCard>
-                              </div>
-                            )}
-                          </li>;
-                        })}
-                      </ul>
-                    )}
-                    {!mainStep?.steps && mainStep.visited_status === 'current' && (
-                      <div style={{ paddingLeft: 20 }}>
-                        <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
-                          {children}
-                        </AssignmentCard>
-                      </div>
-                    )}
                   </div>
+                  <div className='psdk-vertical-step-label'>{mainStep.name}</div>
                 </div>
-              </React.Fragment>
-            );
-          })}
+                {!isLastStep(index) && <div className={_getVBodyClass(index)} />}
+              </div>
+            ))}
+          </div>
+          <div className='psdk-stepper-content'>
+            <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+              {children}
+            </AssignmentCard>
+          </div>
         </div>
       ) : (
         <div className='psdk-horizontal-stepper'>