From a259a05e132f846b2d8618a95ff31cffc2ae1d52 Mon Sep 17 00:00:00 2001
From: zanivan <victorzanivan@gmail.com>
Date: Tue, 16 Apr 2024 10:35:09 -0300
Subject: [PATCH] Add payment type to styled card

---
 .../templates/checkout/PaymentForm.js         | 29 +++++++------------
 .../templates/checkout/PaymentForm.tsx        | 29 +++++++------------
 2 files changed, 20 insertions(+), 38 deletions(-)

diff --git a/docs/data/material/getting-started/templates/checkout/PaymentForm.js b/docs/data/material/getting-started/templates/checkout/PaymentForm.js
index 32435d5a755287..5c067d125c0d57 100644
--- a/docs/data/material/getting-started/templates/checkout/PaymentForm.js
+++ b/docs/data/material/getting-started/templates/checkout/PaymentForm.js
@@ -21,7 +21,7 @@ import CreditCardRoundedIcon from '@mui/icons-material/CreditCardRounded';
 import SimCardRoundedIcon from '@mui/icons-material/SimCardRounded';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 
-const Card = styled(MuiCard)(({ theme }) => ({
+const Card = styled(MuiCard)(({ theme, selected }) => ({
   border: '1px solid',
   borderColor: theme.palette.divider,
   width: '100%',
@@ -40,6 +40,13 @@ const Card = styled(MuiCard)(({ theme }) => ({
     flexGrow: 1,
     maxWidth: `calc(50% - ${theme.spacing(1)})`,
   },
+  ...(selected && {
+    backgroundColor: theme.palette.action.selected,
+    borderColor:
+      theme.palette.mode === 'light'
+        ? theme.palette.primary.light
+        : theme.palette.primary.dark,
+  }),
 }));
 
 const PaymentContainer = styled('div')(({ theme }) => ({
@@ -117,15 +124,7 @@ export default function PaymentForm() {
             gap: 2,
           }}
         >
-          <Card
-            sx={(theme) => ({
-              ...(paymentType === 'creditCard' && {
-                backgroundColor: 'action.selected',
-                borderColor:
-                  theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark',
-              }),
-            })}
-          >
+          <Card selected={paymentType === 'creditCard'}>
             <CardActionArea
               onClick={() => setPaymentType('creditCard')}
               sx={{
@@ -151,15 +150,7 @@ export default function PaymentForm() {
               </CardContent>
             </CardActionArea>
           </Card>
-          <Card
-            sx={(theme) => ({
-              ...(paymentType === 'bankTransfer' && {
-                backgroundColor: 'action.selected',
-                borderColor:
-                  theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark',
-              }),
-            })}
-          >
+          <Card selected={paymentType === 'bankTransfer'}>
             <CardActionArea
               onClick={() => setPaymentType('bankTransfer')}
               sx={{
diff --git a/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx b/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx
index 0820caf0a8fad7..02d4e8d78919ea 100644
--- a/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx
+++ b/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx
@@ -21,7 +21,7 @@ import CreditCardRoundedIcon from '@mui/icons-material/CreditCardRounded';
 import SimCardRoundedIcon from '@mui/icons-material/SimCardRounded';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 
-const Card = styled(MuiCard)(({ theme }) => ({
+const Card = styled(MuiCard)<{ selected?: boolean }>(({ theme, selected }) => ({
   border: '1px solid',
   borderColor: theme.palette.divider,
   width: '100%',
@@ -40,6 +40,13 @@ const Card = styled(MuiCard)(({ theme }) => ({
     flexGrow: 1,
     maxWidth: `calc(50% - ${theme.spacing(1)})`,
   },
+  ...(selected && {
+    backgroundColor: theme.palette.action.selected,
+    borderColor:
+      theme.palette.mode === 'light'
+        ? theme.palette.primary.light
+        : theme.palette.primary.dark,
+  }),
 }));
 
 const PaymentContainer = styled('div')(({ theme }) => ({
@@ -119,15 +126,7 @@ export default function PaymentForm() {
             gap: 2,
           }}
         >
-          <Card
-            sx={(theme) => ({
-              ...(paymentType === 'creditCard' && {
-                backgroundColor: 'action.selected',
-                borderColor:
-                  theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark',
-              }),
-            })}
-          >
+          <Card selected={paymentType === 'creditCard'}>
             <CardActionArea
               onClick={() => setPaymentType('creditCard')}
               sx={{
@@ -153,15 +152,7 @@ export default function PaymentForm() {
               </CardContent>
             </CardActionArea>
           </Card>
-          <Card
-            sx={(theme) => ({
-              ...(paymentType === 'bankTransfer' && {
-                backgroundColor: 'action.selected',
-                borderColor:
-                  theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark',
-              }),
-            })}
-          >
+          <Card selected={paymentType === 'bankTransfer'}>
             <CardActionArea
               onClick={() => setPaymentType('bankTransfer')}
               sx={{