From 9bcc5ba977a3f810af9e64684f696bdfa5104ebd Mon Sep 17 00:00:00 2001 From: Zack Hatlen Date: Fri, 23 Sep 2022 16:05:08 +0300 Subject: [PATCH] v1.1.0 --- package.json | 5 +- src/LoginPage.js | 40 ++++++++++-- src/index.js | 25 ++++---- src/orders/CustomerField.js | 10 ++- src/orders/ListItemsField.js | 49 ++++++++------- src/orders/OrderEdit.js | 49 +++++++++------ src/orders/OrderList.js | 51 +++++++--------- src/orders/OrderNotes.js | 25 +++----- src/orders/OrderShow.js | 19 +++--- src/orders/OrderStatus.js | 115 +++++++++++++++++++++++++++++++++++ src/orders/OrderTotal.js | 80 +++++++++++------------- src/orders/index.js | 2 - src/products/ProductList.js | 2 +- src/refunds/RefundCreate.js | 6 +- src/reportWebVitals.js | 13 ---- yarn.lock | 5 ++ 16 files changed, 312 insertions(+), 184 deletions(-) create mode 100644 src/orders/OrderStatus.js delete mode 100644 src/reportWebVitals.js diff --git a/package.json b/package.json index 563ddb5..94a91aa 100644 --- 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 index 4feda49..0a42034 100644 --- 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,17 +22,18 @@ function Copyright(props) { return ( {'Copyright © '} - - Zackha + + Your Website {' '} {new Date().getFullYear()} + {'.'} ); } const theme = createTheme(); -export default function LoginPage() { +export default function SignInSide() { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const login = useLogin(); @@ -35,8 +41,9 @@ export default function LoginPage() { 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 /> setPassword(event.target.value)} + autoComplete="current-password" + /> + } + label="Remember me" /> + + + + Forgot password? + + + + + {"Don't have an account? Sign Up"} + + + diff --git a/src/index.js b/src/index.js index 5d4fdcf..c038683 100644 --- 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( - - - -); +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(, document.getElementById('root')); \ No newline at end of file diff --git a/src/orders/CustomerField.js b/src/orders/CustomerField.js index 3db7a21..59b72b0 100644 --- 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 ( - - {customer.billing.address_1} + + {customer.billing.first_name} {customer.billing.last_name} +
+ {customer.billing.address_1}
{customer.billing.state} / {customer.billing.city}
- Telefon: {customer.billing.phone} + E-mail: {customer.billing.email} +
+ Phone: {customer.billing.phone} ) }; \ No newline at end of file diff --git a/src/orders/ListItemsField.js b/src/orders/ListItemsField.js index 9554aa4..1b113be 100644 --- 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 ( - - - - - - İmage - Item - Price - Quantity - Total + +
+ + + Image + Item + Price + Quantity + Total + + + + {items.line_items.map((item) => ( + + + {item.name}
{item.sku} - {item.meta_data[0].display_value}
{item.id} + {item.subtotal} {items.currency_symbol} + {item.quantity} + {item.total} {items.currency_symbol} - - - {items.line_items.map((item) => ( - - - {item.name}
{item.sku} - {item.meta_data[0].display_value}
{item.id} - {item.subtotal} - {item.quantity} - {item.total} - - ))} - -
- - + ))} + + + ); } \ No newline at end of file diff --git a/src/orders/OrderEdit.js b/src/orders/OrderEdit.js index 17886d2..4e57b3c 100644 --- 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 = () => ( @@ -32,7 +33,7 @@ const record = useRecordContext(); Order #{record.id} - {new Date(record.date_created).toLocaleDateString('en-EN', dateSettings)} + {new Date(record.date_created).toLocaleDateString('tr-TR', dateSettings)} @@ -42,25 +43,37 @@ const record = useRecordContext(); - - - - + + + + + - + + - - - - - {record.billing.first_name} {record.billing.last_name} - - - - - - - + + + + + + + + + + Customer + + + + + + + + Order Notes + + + + diff --git a/src/orders/OrderList.js b/src/orders/OrderList.js index f044411..a1688b7 100644 --- a/src/orders/OrderList.js +++ b/src/orders/OrderList.js @@ -15,28 +15,27 @@ import Divider from '@mui/material/Divider'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn'; +import AccessTimeIcon from '@mui/icons-material/AccessTime'; -const status = { status: "completed" }; +const completed = { status: "completed" }; +const processing = { status: "processing" }; -const ChangeStatusButton = () => ( - } /> -); - -const PostBulkActionButtons = () => ( - <> - - -); +const ChangeStatusButtonCompleted = () => (} />); +const ChangeStatusButtonProcessing = () => (} />); +const StatusCompleted = () => (); +const StatusProcessing = () => (); const OrderList = () => ( - + ); -const orderFilters = [ - -]; +const orderFilters = []; const tabs = [ { id: 'processing', name: 'processing' }, @@ -61,11 +60,7 @@ const useGetTotals = (filterValues) => { }; }; -const CustomEmpty = () => ( - - No Order - -) +const CustomEmpty = () => (No orders found) const TabbedDatagrid = () => { const dateSettings = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }; @@ -106,20 +101,20 @@ const TabbedDatagrid = () => { {filterValues.status === 'processing' && ( - } empty={} bulkActionButtons={}> + } empty={} bulkActionButtons={}> `${new Date(record.date_created).toLocaleDateString('en-EN', dateSettings)}`} + render={record => `${new Date(record.date_created).toLocaleDateString('tr-TR', dateSettings)}`} /> `${record.billing.first_name} ${record.billing.last_name}`} /> `${record.line_items.reduce((previousValue, currentValue) => previousValue + currentValue.quantity, 0)} item`} /> { )} {filterValues.status === 'completed' && ( - }> + } bulkActionButtons={}> { label="Customer" render={record => `${record.billing.first_name} ${record.billing.last_name}`} /> `${record.line_items.reduce((previousValue, currentValue) => previousValue + currentValue.quantity, 0)} ürün`} + label="Items" + render={record => `${record.line_items.reduce((previousValue, currentValue) => previousValue + currentValue.quantity, 0)} item`} /> `${record.total} ${record.currency_symbol}`} textAlign="right" @@ -169,8 +164,8 @@ const TabbedDatagrid = () => { label="Customer" render={record => `${record.billing.first_name} ${record.billing.last_name}`} /> `${record.line_items.reduce((previousValue, currentValue) => previousValue + currentValue.quantity, 0)} ürün`} + label="Items" + render={record => `${record.line_items.reduce((previousValue, currentValue) => previousValue + currentValue.quantity, 0)} item`} /> ; } - if (error) { return

No notes!

; } + if (error) { return

There are no notes yet.

; } return ( - - - - Order Notes - - {data.map((note) => ( - -
- {new Date(note.date_created).toLocaleDateString('tr-TR', dateSettings)} - - ))} - - + <> + {data.map((note) => ( + +
+ {new Date(note.date_created).toLocaleDateString('tr-TR', dateSettings)} + + ))} + ); }; \ No newline at end of file diff --git a/src/orders/OrderShow.js b/src/orders/OrderShow.js index 5349730..5f9295d 100644 --- a/src/orders/OrderShow.js +++ b/src/orders/OrderShow.js @@ -1,4 +1,4 @@ -import {useRecordContext, ReferenceField} from 'react-admin'; +import { useRecordContext } from 'react-admin'; import Box from '@mui/material/Box'; import Card from '@mui/material/Card'; import Grid from '@mui/material/Grid'; @@ -15,26 +15,21 @@ export default function OrderShow() { - - - {record.billing.first_name} {record.billing.last_name} - - - - Fatura: {record.id} + + Invoice: {record.id} - - Tarih: {new Date(record.date_created).toLocaleDateString()} + + Date: {new Date(record.date_created).toLocaleDateString()} - + - + ); diff --git a/src/orders/OrderStatus.js b/src/orders/OrderStatus.js new file mode 100644 index 0000000..25fc52c --- /dev/null +++ b/src/orders/OrderStatus.js @@ -0,0 +1,115 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; +import Stepper from '@mui/material/Stepper'; +import Step from '@mui/material/Step'; +import StepLabel from '@mui/material/StepLabel'; +import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector'; +import AssignmentIcon from '@mui/icons-material/Assignment'; +import LocalShippingIcon from '@mui/icons-material/LocalShipping'; +import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn'; +import WhereToVoteIcon from '@mui/icons-material/WhereToVote'; +import Typography from '@mui/material/Typography'; + +const ColorlibConnector = styled(StepConnector)(({ theme }) => ({ + [`&.${stepConnectorClasses.alternativeLabel}`]: { + top: 14, + }, + [`&.${stepConnectorClasses.active}`]: { + [`& .${stepConnectorClasses.line}`]: { + backgroundColor: + '#1dbd6b', + }, + }, + [`&.${stepConnectorClasses.completed}`]: { + [`& .${stepConnectorClasses.line}`]: { + backgroundColor: + '#1dbd6b', + }, + }, + [`& .${stepConnectorClasses.line}`]: { + height: 2, + border: 0, + backgroundColor: + theme.palette.mode === 'dark' ? theme.palette.grey[800] : '#eaeaf0', + borderRadius: 1, + }, +})); + +const ColorlibStepIconRoot = styled('div')(({ theme, ownerState }) => ({ + backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc', + zIndex: 1, + color: '#fff', + width: 30, + height: 30, + display: 'flex', + borderRadius: '50%', + justifyContent: 'center', + alignItems: 'center', + ...(ownerState.active && { + backgroundColor: + '#1dbd6b', + }), + ...(ownerState.completed && { + backgroundColor: + '#1dbd6b', + }), +})); + +function ColorlibStepIcon(props) { + const { active, completed, className } = props; + + const icons = { + 1: , + 2: , + 3: , + 4: , + }; + + return ( + + {icons[String(props.icon)]} + + ); +} + +ColorlibStepIcon.propTypes = { + /** + * Whether this step is active. + * @default false + */ + active: PropTypes.bool, + className: PropTypes.string, + /** + * Mark the step as completed. Is passed to child components. + * @default false + */ + completed: PropTypes.bool, + /** + * The label displayed in the step icon. + */ + icon: PropTypes.node, +}; + +const steps = [ + 'Processing', + 'Completed', + 'Shipped', + 'Delivered' +]; + +export default function OrderStatus() { + return ( + }> + {steps.map((label) => ( + + + + {label} + + + + ))} + + ); +} \ No newline at end of file diff --git a/src/orders/OrderTotal.js b/src/orders/OrderTotal.js index ed13ea8..46ac040 100644 --- a/src/orders/OrderTotal.js +++ b/src/orders/OrderTotal.js @@ -2,8 +2,6 @@ import { useRecordContext } from 'react-admin'; import Typography from '@mui/material/Typography'; import Divider from '@mui/material/Divider'; import Grid from '@mui/material/Grid'; -import Card from '@mui/material/Card'; -import CardContent from '@mui/material/CardContent'; export default function OrderTotal() { const record = useRecordContext(); @@ -16,7 +14,7 @@ export default function OrderTotal() { const CouponTitle = () => { if (Object.keys(record.coupon_lines).length === 0) return - return Coupon + return Coupons } const Coupon = () => { @@ -28,13 +26,13 @@ export default function OrderTotal() { const CouponTotal = () => { if (Object.keys(record.coupon_lines).length === 0) return - return -{record.discount_total} + return -{record.discount_total} {record.currency_symbol} } const FeeTitle = () => { if (Object.keys(record.fee_lines).length === 0) return - return Fee + return Fees } const Fee = () => { @@ -46,7 +44,7 @@ export default function OrderTotal() { const FeeTotal = () => { if (Object.keys(record.fee_lines).length === 0) return - return {record.fee_lines[0].total} + return {record.fee_lines[0].total} {record.currency_symbol} } const RefundTitle = () => { @@ -59,51 +57,47 @@ export default function OrderTotal() { if (Object.keys(record.refunds).length === 0) return const totalRefund = record.refunds.reduce((previousValue, currentValue) => previousValue + Number(currentValue.total), 0); - return {totalRefund} + return {totalRefund} {record.currency_symbol} } const NetTotal = () => { if (Object.keys(record.refunds).length === 0) - return {orderTotal} + return {orderTotal} {record.currency_symbol} const totalRefund = record.refunds.reduce((previousValue, currentValue) => previousValue + Number(currentValue.total), 0); const netPayment = totalRefund + orderTotal; - return {netPayment.toFixed(2)} + return {netPayment.toFixed(2)} {record.currency_symbol} } return ( - - - - - Product Total - Shipping - - - Order Total - - - Net Total - - - {productQuantity} item - {shipping} - - -   - - - - {productTotal.toLocaleString()} - {shippingTotal.toLocaleString()} - - - {orderTotal} - - - - - - - + + + Items Subtotal + Shipping + + + Order Total + + + Net Payment + + + {productQuantity} item + {shipping} + + +   + + + + {productTotal.toLocaleString()} {record.currency_symbol} + {shippingTotal.toLocaleString()} {record.currency_symbol} + + + {orderTotal} {record.currency_symbol} + + + + + ); } \ No newline at end of file diff --git a/src/orders/index.js b/src/orders/index.js index abfd6cb..f77ca9e 100644 --- a/src/orders/index.js +++ b/src/orders/index.js @@ -6,6 +6,4 @@ export default { list: OrderList, edit: OrderEdit, icon: InboxIcon, - recordRepresentation: (record) => `${record.billing.first_name} ${record.billing.last_name}`, - options: { label: 'Orders' } }; \ No newline at end of file diff --git a/src/products/ProductList.js b/src/products/ProductList.js index 59ef7d3..247af11 100644 --- a/src/products/ProductList.js +++ b/src/products/ProductList.js @@ -30,7 +30,7 @@ const MyUrlField = () => { } const ProductList = () => ( - + diff --git a/src/refunds/RefundCreate.js b/src/refunds/RefundCreate.js index 0441c48..2f2fd4a 100644 --- a/src/refunds/RefundCreate.js +++ b/src/refunds/RefundCreate.js @@ -47,8 +47,8 @@ export default function RefundCreate() { - - + + @@ -57,7 +57,7 @@ export default function RefundCreate() { - + } fullWidth /> diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3a..0000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/yarn.lock b/yarn.lock index 8de2c11..b359032 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7471,6 +7471,11 @@ proxy-addr@~2.0.7: forwarded "0.2.0" ipaddr.js "1.9.1" +proxy-polyfill@^0.3.2: + version "0.3.2" + resolved "https://registry.yarnpkg.com/proxy-polyfill/-/proxy-polyfill-0.3.2.tgz#55f190054a3044e105d9de16e23719e1e9be0898" + integrity sha512-ENKSXOMCewnQTOyqrQXxEjIhzT6dy572mtehiItbDoIUF5Sv5UkmRUc8kowg2MFvr232Uo8rwRpNg3V5kgTKbA== + psl@^1.1.33: version "1.9.0" resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"