v1.1.0

zackha · Sep 23, 2022 · 9bcc5ba · 9bcc5ba
1 parent b2fa155
commit 9bcc5ba
Show file tree

Hide file tree

Showing 16 changed files with 312 additions and 184 deletions.
diff --git a/package.json b/package.json
@@ -1,10 +1,13 @@
 {
   "name": "woocommerce-admin",
-  "version": "1.0.0",
+  "version": "1.1.0",
+  "private": true,
+  "homepage": "https://terodon.com",
   "dependencies": {
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
+    "proxy-polyfill": "^0.3.2",
     "ra-data-woocommerce": "^1.1.5",
     "react": "^18.2.0",
     "react-admin": "^4.3.3",

diff --git a/src/LoginPage.js b/src/LoginPage.js
@@ -1,10 +1,15 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { useLogin, useNotify } from 'react-admin';
+import { 
+  useLogin, 
+  useNotify,
+} from 'react-admin';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import CssBaseline from '@mui/material/CssBaseline';
 import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
 import Link from '@mui/material/Link';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
@@ -17,26 +22,28 @@ function Copyright(props) {
   return (
     <Typography variant="body2" color="text.secondary" align="center" {...props}>
       {'Copyright © '}
-      <Link color="inherit" href="https://github.com/zackha">
-        Zackha
+      <Link color="inherit" href="https://mui.com/">
+        Your Website
       </Link>{' '}
       {new Date().getFullYear()}
+      {'.'}
     </Typography>
   );
 }
 
 const theme = createTheme();
 
-export default function LoginPage() {
+export default function SignInSide() {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const login = useLogin();
   const notify = useNotify();
 
   const handleSubmit = (event) => {
     event.preventDefault();
+    // will call authProvider.login({ username, password })
     login({ username, password }).catch(() =>
-      notify('Hatalı kullanıcı adı veya şifre')
+      notify('Invalid username or password')
     );
   };
 
@@ -79,16 +86,27 @@ export default function LoginPage() {
                 margin="normal"
                 required
                 fullWidth
+                id="email"
                 label="Username"
+                name="email"
+                autoComplete="email"
                 onChange={event => setUsername(event.target.value)}
+                autoFocus
               />
               <TextField
                 margin="normal"
                 required
                 fullWidth
+                name="password"
                 label="Password"
                 type="password"
+                id="password"
                 onChange={event => setPassword(event.target.value)}
+                autoComplete="current-password"
+              />
+              <FormControlLabel
+                control={<Checkbox value="remember" color="primary" />}
+                label="Remember me"
               />
               <Button
                 type="submit"
@@ -98,6 +116,18 @@ export default function LoginPage() {
               >
                 Sign In
               </Button>
+              <Grid container>
+                <Grid item xs>
+                  <Link href="#" variant="body2">
+                    Forgot password?
+                  </Link>
+                </Grid>
+                <Grid item>
+                  <Link href="#" variant="body2">
+                    {"Don't have an account? Sign Up"}
+                  </Link>
+                </Grid>
+              </Grid>
               <Copyright sx={{ mt: 5 }} />
             </Box>
           </Box>

diff --git a/src/index.js b/src/index.js
@@ -1,16 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+/** @jsxRuntime classic */
+import 'react-app-polyfill/ie11';
+import 'react-app-polyfill/stable';
+import 'proxy-polyfill';
+// IE11 needs "jsxRuntime classic" for this initial file which means that "React" needs to be in scope
+// https://github.com/facebook/create-react-app/issues/9906
+
+import * as React from 'react';
+import ReactDOM from 'react-dom';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+import App from './App';
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/orders/CustomerField.js b/src/orders/CustomerField.js
@@ -4,12 +4,16 @@ import Typography from '@mui/material/Typography';
 export default function CustomerField() {
 const customer = useRecordContext();
     return (
-        <Typography>
-            {customer.billing.address_1} 
+        <Typography variant="body2">
+            {customer.billing.first_name} {customer.billing.last_name}
+            <br />
+            {customer.billing.address_1}
             <br />
             {customer.billing.state} / {customer.billing.city}
             <br/>
-            Telefon: {customer.billing.phone}
+            E-mail: {customer.billing.email}
+            <br/>
+            Phone: {customer.billing.phone}
         </Typography>
     )
 };
diff --git a/src/orders/ListItemsField.js b/src/orders/ListItemsField.js
@@ -7,35 +7,34 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Avatar from '@mui/material/Avatar';
 import Card from '@mui/material/Card';
+import Link from '@mui/material/Link';
 
 export default function ListItemsField() {
 const items = useRecordContext();
   return (
-    <Card variant='outlined'>
-      <TableContainer>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell>İmage</TableCell>
-              <TableCell>Item</TableCell>
-              <TableCell>Price</TableCell>
-              <TableCell align="center">Quantity</TableCell>
-              <TableCell align="right">Total</TableCell>
+    <TableContainer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Image</TableCell>
+            <TableCell>Item</TableCell>
+            <TableCell>Price</TableCell>
+            <TableCell align="center">Quantity</TableCell>
+            <TableCell align="right">Total</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {items.line_items.map((item) => (
+            <TableRow key={item.name} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+              <TableCell component="th" scope="row"><Link href={`https://rays.com.tr/?s=${item.sku}&post_type=product`} target='_blank'><Avatar variant="rounded" src={item.image.src} sx={{ width: 60, height: 90 }}/></Link></TableCell>
+              <TableCell>{item.name}<br /><small>{item.sku} - {item.meta_data[0].display_value}</small><br /><small>{item.id}</small></TableCell>
+              <TableCell>{item.subtotal} {items.currency_symbol}</TableCell>
+              <TableCell align="center">{item.quantity}</TableCell>
+              <TableCell align="right">{item.total} {items.currency_symbol}</TableCell>
             </TableRow>
-          </TableHead>
-          <TableBody>
-            {items.line_items.map((item) => (
-              <TableRow key={item.name} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-                <TableCell component="th" scope="row"><Avatar variant="rounded" src={item.image.src} sx={{ width: 60, height: 90 }}/></TableCell>
-                <TableCell>{item.name}<br /><small>{item.sku} - {item.meta_data[0].display_value}</small><br /><small>{item.id}</small></TableCell>
-                <TableCell>{item.subtotal}</TableCell>
-                <TableCell align="center">{item.quantity}</TableCell>
-                <TableCell align="right">{item.total}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </Card>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/src/orders/OrderEdit.js b/src/orders/OrderEdit.js
@@ -10,6 +10,7 @@ import WestIcon from '@mui/icons-material/West';
 import OrderNotes from './OrderNotes';
 import OrderTotal from './OrderTotal';
 import CreateRefundButton from './CreateRefundButton';
+import OrderStatus from './OrderStatus';
 
 const OrderEdit = () => (
     <Edit component="div">
@@ -32,7 +33,7 @@ const record = useRecordContext();
               <strong>Order #{record.id}</strong>
             </Typography>
             <Typography fontSize={14} color="text.secondary">
-              {new Date(record.date_created).toLocaleDateString('en-EN', dateSettings)}
+              {new Date(record.date_created).toLocaleDateString('tr-TR', dateSettings)}
             </Typography>
           </Grid>
           <Grid item xs={8} align='right'>
@@ -42,25 +43,37 @@ const record = useRecordContext();
       </Box>
       <Grid container spacing={2}>
         <Grid item xs={8}>
-            <Box mb={2}>
-              <ListItemsField />
-            </Box>
-            <Box>
+          <Card sx={{ mb: 2, boxShadow: "rgba(0, 0, 0, 0.1) 0px 4px 12px", borderRadius: 3 }}>
+            <ListItemsField />
+          </Card>
+          <Card sx={{ mb: 2, boxShadow: "rgba(0, 0, 0, 0.1) 0px 4px 12px", borderRadius: 3 }}>
+            <CardContent sx={{ p: 3 }}>
               <OrderTotal />
-            </Box>
+            </CardContent>
+          </Card>
         </Grid>
-          <Grid item xs={4}>
-            <Card sx={{ mb: 2 }} variant="outlined">
-              <CardContent>
-                <Typography gutterBottom variant="h5" component="div">
-                  {record.billing.first_name} {record.billing.last_name}
-                </Typography>
-                <Typography variant="body2" color="text.secondary">
-                  <CustomerField />
-                </Typography>
-              </CardContent>
-            </Card>
-          <OrderNotes />
+        <Grid item xs={4}>
+          <Card sx={{ mb: 2, boxShadow: "rgba(0, 0, 0, 0.1) 0px 4px 12px", borderRadius: 3 }}>
+            <CardContent sx={{mt: 1}}>
+              <OrderStatus />
+            </CardContent>
+          </Card>
+          <Card sx={{ mb: 2, boxShadow: "rgba(0, 0, 0, 0.1) 0px 4px 12px", borderRadius: 3 }}>
+            <CardContent>
+              <Typography gutterBottom variant="h6" component="div">
+                <strong>Customer</strong>
+              </Typography>
+              <CustomerField />
+            </CardContent>
+          </Card>
+          <Card sx={{ mb: 2, boxShadow: "rgba(0, 0, 0, 0.1) 0px 4px 12px", borderRadius: 3 }}>
+            <CardContent>
+              <Typography gutterBottom variant="h6" component="div">
+                <strong>Order Notes</strong>
+              </Typography>
+              <OrderNotes />
+            </CardContent>
+          </Card>
         </Grid>
       </Grid>
     </Form>