-
-
- Welcome!
- 1-800-555-1234 or you can chat with us.
-
-
-
-
+
+
+
+
+
Get excited for your new phone!
+
+ We have received your order of a {ModelName}. It will ship out within 1 business day to {Address}. Your tracking information will be sent to{' '}
+ {Email}.
+
- Chat Now
-
-
+ Thank you for your business!
+
+
+
+ Done
+
);
diff --git a/src/samples/Embedded/ShoppingOptionCard/index.tsx b/src/samples/Embedded/ShoppingOptionCard/index.tsx
index e0e9c6057..1facbc57b 100644
--- a/src/samples/Embedded/ShoppingOptionCard/index.tsx
+++ b/src/samples/Embedded/ShoppingOptionCard/index.tsx
@@ -1,161 +1,118 @@
-import makeStyles from '@mui/styles/makeStyles';
+import { makeStyles } from '@mui/styles';
const useStyles = makeStyles(theme => ({
- swatchHeader: {
- display: 'flex',
- flexDirection: 'row',
- backgroundColor: '#333000'
- },
- swatchPackage: {
+ planCard: {
+ backgroundColor: 'var(--utility-background-color)',
+ padding: '2rem',
+ borderRadius: '16px',
+ textAlign: 'center',
+ position: 'relative',
+ overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
- justifyContent: 'space-around',
- width: '260px',
- height: '70px',
- backgroundColor: '#333000',
- padding: '5px'
- },
- swatchPlay: {
- letterSpacing: 'normal',
- color: 'white',
- fontSize: '25px'
- },
- swatchLevel: {
- letterSpacing: 'normal',
- color: 'white',
- fontSize: '28px',
- fontWeight: 'bold'
- },
- swatchChannels: {
+ transition: 'transform 0.3s ease, box-shadow 0.3s ease',
+ '&:hover': {
+ transform: 'translateY(-10px)',
+ boxShadow: '0 10px 20px rgba(0, 0, 0, 0.2)'
+ },
+ '&::before': {
+ content: '""',
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ borderRadius: '16px',
+ border: '2px solid transparent',
+ background: `linear-gradient(to bottom, ${theme.actionButtons.secondary.backgroundColor}, ${theme.actionButtons.primary.backgroundColor}) border-box`,
+ '-webkit-mask': 'linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0)',
+ '-webkit-mask-composite': 'destination-out',
+ pointerEvents: 'none'
+ }
+ },
+ phoneImage: {
+ marginBottom: '1.5rem',
+ height: '150px',
display: 'flex',
- flexDirection: 'column',
- justifyContent: 'space-evenly',
- letterSpacing: 'normal',
alignItems: 'center',
- backgroundColor: theme.palette.primary.main,
- width: '100px'
- },
- swatchCount: {
- letterSpacing: 'normal',
- color: 'white',
- fontSize: '40px',
- fontWeight: 'bold'
- },
- swatchLabel: {
- letterSpacing: 'normal',
- color: 'white',
- fontSize: '17px'
- },
- swatchBody: {
- letterSpacing: 'normal',
- border: '1px solid lightgray',
- backgroundColor: '#fafafa',
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- paddingBottom: '20px'
- },
- swatchBanner: {
- letterSpacing: 'normal',
- fontWeight: 'bold',
- fontSize: '15px',
- padding: '5px'
- },
- swatchPrice: {
- display: 'flex',
- flexDirection: 'row',
- alignItems: 'center'
- },
- swatchFromGroup: {
- height: '90px'
- },
- swatchFrom: {
- color: theme.palette.primary.main,
- textAlign: 'right'
- },
- swatchCurrency: {
- letterSpacing: 'normal',
- color: theme.palette.primary.main,
- fontSize: '30px',
- fontWeight: 'bold',
- fontFamily: 'Tahoma'
- },
- swatchDollars: {
- letterSpacing: 'normal',
- color: theme.palette.primary.main,
- fontSize: '90px',
- fontWeight: 'bold',
- fontFamily: 'Tahoma'
- },
- swatchCents: {
- letterSpacing: 'normal',
- color: theme.palette.primary.main,
- fontSize: '20px',
- fontWeight: 'bold',
- fontFamily: 'Tahoma'
- },
- swatchMonthly: {
- display: 'flex',
- flexDirection: 'column'
- },
- swatchShopButton: {
- color: 'white',
- backgroundColor: theme.palette.warning.main,
- fontSize: '25px',
- fontWeight: 'bold',
- borderRadius: '25px',
- border: '0px',
- margin: '20px',
- padding: '10px 30px'
+ justifyContent: 'center',
+ '& img': {
+ maxHeight: '100%',
+ width: 'auto'
+ }
+ },
+ planName: {
+ fontSize: '1.5rem',
+ fontWeight: 600,
+ marginBottom: '0.5rem',
+ color: theme.palette.text.primary,
+ margin: 0
+ },
+ saveAmount: {
+ color: '#34d399',
+ fontWeight: 600,
+ marginBottom: '1rem',
+ margin: 0
+ },
+ monthlyPrice: {
+ fontSize: '1rem',
+ color: theme.palette.text.primary,
+ margin: 0
+ },
+ tenure: {
+ fontSize: '0.8rem',
+ color: theme.palette.text.secondary,
+ marginBottom: '1rem',
+ margin: 0
+ },
+ retailPrice: {
+ fontSize: '0.8rem',
+ color: theme.palette.text.secondary,
+ marginBottom: '1.5rem',
+ flexGrow: 1,
+ margin: 0
+ },
+ buyButton: {
+ display: 'inline-block',
+ background: `linear-gradient(90deg, ${theme.actionButtons.primary.backgroundColor}, ${theme.palette.primary.dark}, ${theme.actionButtons.primary.backgroundColor})`,
+ backgroundSize: '200% auto',
+ color: `${theme.actionButtons.primary.color} !important`,
+ padding: '0.75rem 1.5rem',
+ borderRadius: '50px',
+ textAlign: 'center',
+ fontWeight: 600,
+ border: 'none',
+ cursor: 'pointer',
+ textDecoration: 'none',
+ transition: 'background-position 0.4s ease-in-out, transform 0.3s ease',
+ '&:hover': {
+ backgroundPosition: 'right center',
+ transform: 'scale(1.05)',
+ color: theme.actionButtons.primary.color
+ }
}
}));
export default function ShoppingOptionCard(props) {
const classes = useStyles();
-
- const { play, level, channels, channels_full: channelsFull, banner, price, internetSpeed, calling } = props;
+ const { name, imageSrc, saveAmount, monthlyPrice, tenure, retailPrice, level, onClick } = props;
return (
-
-
-
-
-
{channels}
-
Channels
-
+
+
+
-
-
{banner}
-
- {channelsFull} channels plus FREE HD
- Thousands of On Demand choices
- Watch on the {PCore.getEnvironmentInfo().getApplicationLabel()} App
- Up to {internetSpeed} Internet Speeds
- Unlimited nationwide calling {calling}
-
-
-
+
{name}
-
{price.substring(0, price.indexOf('.'))}
-
-
{price.substring(price.indexOf('.') + 1)}
-
for 12 months
-
when bundled
-
-
-
- props.onClick(level)}>
- SHOP NOW
-
-
-
+
{saveAmount}
+
{monthlyPrice}
+
{tenure}
+
{retailPrice}
+
+
onClick(level)}>
+ Buy now
+
);
}
diff --git a/src/samples/Embedded/index.tsx b/src/samples/Embedded/index.tsx
index a73f8eebc..bae2218e1 100644
--- a/src/samples/Embedded/index.tsx
+++ b/src/samples/Embedded/index.tsx
@@ -10,6 +10,7 @@ import MainScreen from './MainScreen';
import localSdkComponentMap from '../../../sdk-local-component-map';
import { initializeAuthentication } from './utils';
import { theme } from '../../theme';
+import './styles.css';
declare const myLoadMashup: any;
diff --git a/src/samples/Embedded/styles.css b/src/samples/Embedded/styles.css
new file mode 100755
index 000000000..030d563d6
--- /dev/null
+++ b/src/samples/Embedded/styles.css
@@ -0,0 +1,26 @@
+/* global styles*/
+#pega-part-of-page .psdk-flow-container-top {
+ max-width: 1400px;
+ width: 50%;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 5%;
+ padding: 16px;
+}
+
+#pega-part-of-page .psdk-horizontal-stepper-header-container {
+ display: none;
+ margin-bottom: 2rem;
+}
+
+#pega-part-of-page .MuiCard-root {
+ padding: 16px;
+}
+
+#pega-part-of-page .MuiCardContent-root:first-child {
+ padding-top: 0px !important;
+}
+
+#pega-part-of-page .MuiCardContent-root:last-child {
+ padding-bottom: 0px !important;
+}
diff --git a/src/samples/Embedded/utils.ts b/src/samples/Embedded/utils.ts
index 89181c7fb..0a7bb0c7b 100644
--- a/src/samples/Embedded/utils.ts
+++ b/src/samples/Embedded/utils.ts
@@ -2,34 +2,31 @@ import { sdkSetAuthHeader, sdkSetCustomTokenParamsCB } from '@pega/auth/lib/sdk-
export const shoppingOptions = [
{
- play: 'Triple Play',
- level: 'Basic',
- channels: '100+',
- channels_full: '100+ (Basic +)',
- banner: 'Value package',
- price: '99.00',
- internetSpeed: '100 Mbps',
- calling: ''
+ name: 'Oceonix 25',
+ imageSrc: './assets/img/WhitePhone.png',
+ saveAmount: 'Save $150',
+ monthlyPrice: 'Starting at $18.05/mo',
+ tenure: 'for 36 months',
+ retailPrice: 'Retail price: $800.00',
+ level: 'Basic'
},
{
- play: 'Triple Play',
- level: 'Silver',
- channels: '125+',
- channels_full: '125+ (Deluxe)',
- banner: 'Most popular',
- price: '120.00',
- internetSpeed: '300 Mbps',
- calling: ''
+ name: 'Oceonix 25 Max',
+ imageSrc: './assets/img/SilverPhone.png',
+ saveAmount: 'Save $200',
+ monthlyPrice: 'Starting at $22.22/mo',
+ tenure: 'for 36 months',
+ retailPrice: 'Retail price: $1,000.00',
+ level: 'Silver'
},
{
- play: 'Triple Play',
- level: 'Gold',
- channels: '175+',
- channels_full: '175+ (Premium)',
- banner: 'All the channels you want',
- price: '150.00',
- internetSpeed: '1 Gbps',
- calling: ' & International'
+ name: 'Oceonix 25 Ultra',
+ imageSrc: './assets/img/GoldPhone.png',
+ saveAmount: 'Save $250',
+ monthlyPrice: 'Starting at $26.38/mo',
+ tenure: 'for 36 months',
+ retailPrice: 'Retail price: $1,200.00',
+ level: 'Gold'
}
];
- 
+ 
- 
+ 
+
+