@selfcommunity/react-theme-default 0.4.5-payments.213 → 0.4.5-payments.215

package/lib/esm/components/SCGroupHeader.js

@@ -38,6 +38,18 @@ const Component = {
                         justifyContent: 'center',
                         alignItems: 'center',
                         gap: theme.spacing(0.5)
+                    },
+                    '& .SCBuyButton-request-root': {
+                        fontWeight: theme.typography.fontWeightBold,
+                        '& .MuiButton-startIcon': {
+                            marginRight: theme.spacing(0.5),
+                            '& .MuiIcon-root': {
+                                fontSize: '1.5rem'
+                            }
+                        },
+                        '&.Mui-selected, &:hover': {
+                            backgroundColor: 'transparent'
+                        }
                     }
                 },
                 '& .SCGroupHeader-multi-actions': {

package/lib/esm/components/SCGroupSubscribeButton.d.ts

@@ -0,0 +1,18 @@
+declare const Component: {
+    styleOverrides: {
+        buyButtonRoot: ({ theme }: {
+            theme: any;
+        }) => {
+            border: string;
+            '&:hover, &:active': {
+                backgroundColor: any;
+                color: any;
+                border: string;
+                '& .MuiIcon-root': {
+                    color: any;
+                };
+            };
+        };
+    };
+};
+export default Component;

package/lib/esm/components/SCGroupSubscribeButton.js

@@ -0,0 +1,16 @@
+const Component = {
+    styleOverrides: {
+        buyButtonRoot: ({ theme }) => ({
+            border: `1px solid transparent`,
+            '&:hover, &:active': {
+                backgroundColor: theme.palette.common.white,
+                color: theme.palette.primary.main,
+                border: `1px solid ${theme.palette.primary.main}`,
+                '& .MuiIcon-root': {
+                    color: theme.palette.primary.main
+                }
+            }
+        })
+    }
+};
+export default Component;

package/lib/esm/components/SCPaymentProduct.d.ts

@@ -3,47 +3,45 @@ declare const Component: {
         root: ({ theme }: {
             theme: any;
         }) => {
+            marginBottom: any;
             borderRadius: string;
-            '& .MuiAccordionSummary-root': {
-                backgroundColor: any;
-                '& .MuiAccordionSummary-content': {
-                    display: string;
-                    flexDirection: string;
-                    '& .SCBaseItem-root': {
-                        backgroundColor: string;
-                    };
-                    '& .MuiTypography-body1': {
-                        [x: number]: {
-                            fontSize: any;
-                        };
-                        fontWeight: number;
-                        color: any;
-                    };
+            boxShadow: string;
+            backgroundColor: any;
+            '& .MuiCardContent-root': {
+                '& .SCBaseItem-root': {
+                    backgroundColor: string;
                 };
-                '& .MuiAccordionDetails-root': {
-                    marginTop: any;
+                '& .MuiTypography-body1': {
+                    [x: number]: {
+                        fontSize: any;
+                    };
+                    fontWeight: number;
+                    color: any;
                 };
             };
             '& .SCPaymentProductPrice-root': {
-                marginBottom: any;
                 width: string;
-                borderRadius: string;
+                paddingLeft: string;
             };
         };
         skeletonRoot: ({ theme }: {
             theme: any;
         }) => {
+            marginBottom: any;
             borderRadius: string;
-            '& .MuiAccordionSummary-root': {
-                backgroundColor: any;
+            boxShadow: string;
+            backgroundColor: any;
+            '& .MuiCardContent-root': {
                 marginBottom: any;
                 '& .SCBaseItem-root': {
                     backgroundColor: string;
+                    boxShadow: string;
                 };
             };
             '& .SCPaymentProductPrice-skeleton-root': {
-                marginBottom: any;
+                marginTop: any;
                 width: string;
+                paddingLeft: string;
             };
         };
     };

package/lib/esm/components/SCPaymentProduct.js

@@ -1,45 +1,43 @@
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
-            borderRadius: '3px !important',
-            '& .MuiAccordionSummary-root': {
-                backgroundColor: theme.palette.grey[50],
-                '& .MuiAccordionSummary-content': {
-                    display: 'block',
-                    flexDirection: 'row',
-                    '& .SCBaseItem-root': {
-                        backgroundColor: 'transparent'
-                    },
-                    '& .MuiTypography-body1': {
-                        fontWeight: 200,
-                        color: theme.palette.grey[600],
-                        [theme.breakpoints.down('sm')]: {
-                            fontSize: theme.typography.pxToRem(12)
-                        }
-                    }
+            marginBottom: theme.spacing(2),
+            borderRadius: '10px',
+            boxShadow: 'none',
+            backgroundColor: theme.palette.grey['A200'],
+            '& .MuiCardContent-root': {
+                '& .SCBaseItem-root': {
+                    backgroundColor: 'transparent'
                 },
-                '& .MuiAccordionDetails-root': {
-                    marginTop: theme.spacing()
+                '& .MuiTypography-body1': {
+                    fontWeight: 200,
+                    color: theme.palette.grey[600],
+                    [theme.breakpoints.down('sm')]: {
+                        fontSize: theme.typography.pxToRem(12)
+                    }
                 }
             },
             '& .SCPaymentProductPrice-root': {
-                marginBottom: theme.spacing(),
                 width: 'auto',
-                borderRadius: '3px'
+                paddingLeft: `${theme.spacing(0)} !important`
             }
         }),
         skeletonRoot: ({ theme }) => ({
-            borderRadius: '3px !important',
-            '& .MuiAccordionSummary-root': {
-                backgroundColor: theme.palette.grey[50],
+            marginBottom: theme.spacing(2),
+            borderRadius: '10px',
+            boxShadow: 'none',
+            backgroundColor: theme.palette.grey['A200'],
+            '& .MuiCardContent-root': {
                 marginBottom: theme.spacing(1),
                 '& .SCBaseItem-root': {
-                    backgroundColor: 'transparent'
+                    backgroundColor: 'transparent',
+                    boxShadow: 'none'
                 }
             },
             '& .SCPaymentProductPrice-skeleton-root': {
-                marginBottom: theme.spacing(),
-                width: 'auto'
+                marginTop: theme.spacing(1),
+                width: 'auto',
+                paddingLeft: `${theme.spacing(0)} !important`
             }
         })
     }

package/lib/esm/components/SCPaymentProductPrice.d.ts

@@ -3,7 +3,24 @@ declare const Component: {
         root: ({ theme }: {
             theme: any;
         }) => {
-            borderRadius: string;
+            borderRadius: number;
+            boxShadow: string;
+            '& .SCPaymentProductPrice-primary': {
+                fontSize: string;
+                fontWeight: string;
+                color: string;
+            };
+            '& .SCPaymentProductPrice-button': {
+                textTransform: string;
+                '&:hover, &:active': {
+                    backgroundColor: any;
+                    color: any;
+                    border: string;
+                    '& .MuiIcon-root': {
+                        color: any;
+                    };
+                };
+            };
             '& .SCPaymentProductPrice-button-purchased': {
                 backgroundColor: string;
                 color: string;
@@ -15,7 +32,7 @@ declare const Component: {
         skeletonRoot: ({ theme }: {
             theme: any;
         }) => {
-            borderRadius: string;
+            borderRadius: number;
         };
     };
 };

package/lib/esm/components/SCPaymentProductPrice.js

@@ -1,7 +1,24 @@
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
-            borderRadius: '3px',
+            borderRadius: 0,
+            boxShadow: 'none',
+            '& .SCPaymentProductPrice-primary': {
+                fontSize: '18px',
+                fontWeight: '600 !important',
+                color: `${theme.palette.primary.main} !important`
+            },
+            '& .SCPaymentProductPrice-button': {
+                textTransform: 'uppercase',
+                '&:hover, &:active': {
+                    backgroundColor: theme.palette.common.white,
+                    color: theme.palette.primary.main,
+                    border: `1px solid ${theme.palette.primary.main}`,
+                    '& .MuiIcon-root': {
+                        color: theme.palette.primary.main
+                    }
+                }
+            },
             '& .SCPaymentProductPrice-button-purchased': {
                 backgroundColor: `${theme.palette.secondary.main} !important`,
                 color: `${theme.palette.secondary.contrastText} !important`
@@ -11,7 +28,7 @@ const Component = {
             }
         }),
         skeletonRoot: ({ theme }) => ({
-            borderRadius: '3px'
+            borderRadius: 0
         })
     }
 };

package/lib/esm/components/SCPaymentProducts.js

@@ -1,7 +1,7 @@
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
-            padding: theme.spacing(0.5),
+            padding: theme.spacing(0.5)
         }),
         skeletonRoot: ({ theme }) => ({
             padding: theme.spacing(0.5)

package/lib/esm/index.d.ts

@@ -2156,6 +2156,18 @@ declare const theme: {
                                     alignItems: string;
                                     gap: any;
                                 };
+                                '& .SCBuyButton-request-root': {
+                                    fontWeight: any;
+                                    '& .MuiButton-startIcon': {
+                                        marginRight: any;
+                                        '& .MuiIcon-root': {
+                                            fontSize: string;
+                                        };
+                                    };
+                                    '&.Mui-selected, &:hover': {
+                                        backgroundColor: string;
+                                    };
+                                };
                             };
                         };
                     };
@@ -2282,6 +2294,16 @@ declare const theme: {
                                 };
                                 margin: string;
                                 gap: string;
+                                '& .SCBuyButton-request-root': {
+                                    '&:hover, &:active': {
+                                        backgroundColor: any;
+                                        color: any;
+                                        border: string;
+                                        '& .MuiIcon-root': {
+                                            color: any;
+                                        };
+                                    };
+                                };
                             };
                         };
                         '& .SCCourseDashboard-lessons-sections': {
@@ -4955,6 +4977,18 @@ declare const theme: {
                                 alignItems: string;
                                 gap: any;
                             };
+                            '& .SCBuyButton-request-root': {
+                                fontWeight: any;
+                                '& .MuiButton-startIcon': {
+                                    marginRight: any;
+                                    '& .MuiIcon-root': {
+                                        fontSize: string;
+                                    };
+                                };
+                                '&.Mui-selected, &:hover': {
+                                    backgroundColor: string;
+                                };
+                            };
                         };
                         '& .SCGroupHeader-multi-actions': {
                             display: string;
@@ -5193,6 +5227,23 @@ declare const theme: {
                 };
             };
         };
+        SCGroupSubscribeButton: {
+            styleOverrides: {
+                buyButtonRoot: ({ theme }: {
+                    theme: any;
+                }) => {
+                    border: string;
+                    '&:hover, &:active': {
+                        backgroundColor: any;
+                        color: any;
+                        border: string;
+                        '& .MuiIcon-root': {
+                            color: any;
+                        };
+                    };
+                };
+            };
+        };
         SCGroupTemplate: {
             styleOverrides: {
                 root: ({ theme }: any) => {
@@ -7886,6 +7937,9 @@ declare const theme: {
                             alignItems: string;
                             marginRight: any;
                             '& .MuiIcon-root': {
+                                /**
+                                 * Style assets - Imports - Start
+                                 */
                                 margin: any;
                             };
                         };
@@ -10163,6 +10217,18 @@ declare const theme: {
                 requestRoot: ({ theme }: {
                     theme: any;
                 }) => {};
+                buyButtonRoot: ({ theme }: {
+                    theme: any;
+                }) => {
+                    '&:hover, &:active': {
+                        backgroundColor: any;
+                        color: any;
+                        border: string;
+                        '& .MuiIcon-root': {
+                            color: any;
+                        };
+                    };
+                };
                 menuRoot: ({ theme }: {
                     theme: any;
                 }) => {
@@ -11640,47 +11706,45 @@ declare const theme: {
                 root: ({ theme }: {
                     theme: any;
                 }) => {
+                    marginBottom: any;
                     borderRadius: string;
-                    '& .MuiAccordionSummary-root': {
-                        backgroundColor: any;
-                        '& .MuiAccordionSummary-content': {
-                            display: string;
-                            flexDirection: string;
-                            '& .SCBaseItem-root': {
-                                backgroundColor: string;
-                            };
-                            '& .MuiTypography-body1': {
-                                [x: number]: {
-                                    fontSize: any;
-                                };
-                                fontWeight: number;
-                                color: any;
-                            };
+                    boxShadow: string;
+                    backgroundColor: any;
+                    '& .MuiCardContent-root': {
+                        '& .SCBaseItem-root': {
+                            backgroundColor: string;
                         };
-                        '& .MuiAccordionDetails-root': {
-                            marginTop: any;
+                        '& .MuiTypography-body1': {
+                            [x: number]: {
+                                fontSize: any;
+                            };
+                            fontWeight: number;
+                            color: any;
                         };
                     };
                     '& .SCPaymentProductPrice-root': {
-                        marginBottom: any;
                         width: string;
-                        borderRadius: string;
+                        paddingLeft: string;
                     };
                 };
                 skeletonRoot: ({ theme }: {
                     theme: any;
                 }) => {
+                    marginBottom: any;
                     borderRadius: string;
-                    '& .MuiAccordionSummary-root': {
-                        backgroundColor: any;
+                    boxShadow: string;
+                    backgroundColor: any;
+                    '& .MuiCardContent-root': {
                         marginBottom: any;
                         '& .SCBaseItem-root': {
                             backgroundColor: string;
+                            boxShadow: string;
                         };
                     };
                     '& .SCPaymentProductPrice-skeleton-root': {
-                        marginBottom: any;
+                        marginTop: any;
                         width: string;
+                        paddingLeft: string;
                     };
                 };
             };
@@ -11726,7 +11790,24 @@ declare const theme: {
                 root: ({ theme }: {
                     theme: any;
                 }) => {
-                    borderRadius: string;
+                    borderRadius: number;
+                    boxShadow: string;
+                    '& .SCPaymentProductPrice-primary': {
+                        fontSize: string;
+                        fontWeight: string;
+                        color: string;
+                    };
+                    '& .SCPaymentProductPrice-button': {
+                        textTransform: string;
+                        '&:hover, &:active': {
+                            backgroundColor: any;
+                            color: any;
+                            border: string;
+                            '& .MuiIcon-root': {
+                                color: any;
+                            };
+                        };
+                    };
                     '& .SCPaymentProductPrice-button-purchased': {
                         backgroundColor: string;
                         color: string;
@@ -11738,7 +11819,7 @@ declare const theme: {
                 skeletonRoot: ({ theme }: {
                     theme: any;
                 }) => {
-                    borderRadius: string;
+                    borderRadius: number;
                 };
             };
         };
@@ -11765,6 +11846,7 @@ declare const theme: {
                         maxWidth: number;
                         display: string;
                         gridTemplateColumns: string;
+                        padding: any;
                         gap: number;
                         "& .SCCheckout-content-object": {
                             [x: number]: {
@@ -11777,6 +11859,9 @@ declare const theme: {
                             alignItems: string;
                             '& .SCWidget-root': {
                                 width: string;
+                                '& .SCEvent-preview-content': {
+                                    padding: string;
+                                };
                             };
                         };
                         "& .SCCheckout-content-coverage": {
@@ -11794,7 +11879,6 @@ declare const theme: {
                             justifyContent: string;
                             alignItems: string;
                             maxWidth: number;
-                            padding: any;
                         };
                     };
                     "& .SCCheckout-checkout": {
@@ -11806,7 +11890,6 @@ declare const theme: {
                             minWidth: number;
                             width: string;
                         };
-                        margin: any;
                         width: string;
                     };
                     "& .SCCheckout-payment-order": {
@@ -11872,22 +11955,10 @@ declare const theme: {
                         '& .SCWidget-root': {
                             minWidth: number;
                         };
-                        '& .SCGroup-root': {
-                            paddingLeft: any;
+                        '& .MuiTypography-body2': {
+                            marginTop: any;
                         };
                     };
-                    '& .SCCheckoutSuccessDialog-content-object': {
-                        width: string;
-                    };
-                    '& .SCCourse-preview-root': {
-                        minHeight: string;
-                    };
-                    '& .SCCategory-category-image': {
-                        paddingLeft: any;
-                    };
-                    '& .SCGroup-avatar': {
-                        marginLeft: any;
-                    };
                 };
             };
         };
@@ -12154,6 +12225,39 @@ declare const theme: {
                 };
             };
         };
+        SCCheckoutHeaderInfoWidget: {
+            styleOverrides: {
+                root: ({ theme }: {
+                    theme: any;
+                }) => {
+                    '& .SCCheckoutHeaderInfoWidget-header': {
+                        height: any;
+                        position: string;
+                        backgroundColor: any;
+                        color: string;
+                        textAlign: string;
+                        '& img': {
+                            position: string;
+                            left: string;
+                            top: any;
+                            transform: string;
+                        };
+                        '& .MuiIcon-root': {
+                            top: any;
+                            position: string;
+                        };
+                    };
+                    '& .SCCheckoutHeaderInfoWidget-content': {
+                        padding: any;
+                        justifyContent: string;
+                        '& .MuiTypography-body2': {
+                            paddingTop: any;
+                            whiteSpace: string;
+                        };
+                    };
+                };
+            };
+        };
     };
     selfcommunity: {
         user: {

package/lib/esm/index.js

@@ -113,6 +113,7 @@ import SCGroupMembersWidget from './components/SCGroupMembersWidget';
 import SCGroupRequestsWidget from './components/SCGroupRequestsWidget';
 import SCGroups from './components/SCGroups';
 import SCGroupSettingsIconButton from './components/SCGroupSettingsIconButton';
+import SCGroupSubscribeButton from './components/SCGroupSubscribeButton';
 import SCGroupTemplate from './components/SCGroupTemplate';
 import SCIncubator from './components/SCIncubator';
 import SCIncubatorDetail from './components/SCIncubatorDetail';
@@ -215,6 +216,7 @@ import SCPaywalls from './components/SCPaywalls';
 import SCPaywallsConfigurator from './components/SCPaywallsConfigurator';
 import SCPdfPreview from './components/SCPdfPreview';
 import SCPaymentOrders from './components/SCPaymentOrders';
+import SCCheckoutHeaderInfoWidget from './components/SCCheckoutHeaderInfoWidget';
 /**
  * Style fragments - Imports - End
  */
@@ -387,6 +389,7 @@ const theme = {
         SCGroupMembersWidget,
         SCGroupRequestsWidget,
         SCGroupSettingsIconButton,
+        SCGroupSubscribeButton,
         SCGroupTemplate,
         SCGroups,
         SCIncubator,
@@ -508,7 +511,8 @@ const theme = {
         SCPaywalls,
         SCPaywallsConfigurator,
         SCPdfPreview,
-        SCPaymentOrders
+        SCPaymentOrders,
+        SCCheckoutHeaderInfoWidget
     },
     selfcommunity: {
         user: {