// store/orderSlice.ts

import {createSlice, current} from '@reduxjs/toolkit'
import type { PayloadAction } from '@reduxjs/toolkit'
import {cloneDeep} from 'lodash'

type Customer = {
 name: String;
 email: String;
 profile: String;
 phoneNumber: String;
 address1: String;
 address2: String;
};
type Status = {
 paid: boolean;
 fulfilled: boolean;
};
type Price = {
 price: Number;
 currency: String;
};
type Timeline = {
 order: Date;
 packed?: Date;
 shipped?: Date;
 delivered?: Date;
};

type Timeline2 = {
 type: String;
 description: String;
 timeline: Date;
};

interface Order {
 id: String;
 customer: Customer;
 status: Status;
 location: String;
 price: Price;
 timeline: Array;
}
interface Orders extends Array {}

const Orders: Orders = [
 {
 id: "INVEVO99J3",
 customer: {
 profile: "/images/user-profile.png",
 name: "Olivia Chan",
 email: "olivia@emailaddress.com",
 phoneNumber: "92365872358",
 address1: "Room 26K, Tower 0, Harbour City",
 address2: "Kowloom, Hong Kong",
 },
 status: {
 paid: true,
 fulfilled: true,
 },
 location: "Hong Kong",
 price: {
 price: 139500,
 currency: "HKD",
 },
 timeline: [
 {
 type: "Account Created",
 description: "Order confirmation email was sent to chanolivia@emailaddress.com on Feb 9,2023",
 timeline: new Date("09 January 2023 15:20:23"),
 },
 {
 type: "Login",
 description: "Lorem ipsum dolor sit amet, consectetur adipiscing on Feb 9, 2023",
 timeline: new Date("09 January 2023 15:20:23"),
 },
 {
 type: "Items changed in cart",
 description: "Lorem ipsum dolor sit amet, consectetur adipiscing on Feb 9, 2023",
 timeline: new Date("09 March 2023 15:20:23"),
 },
 {
 type: "Order Placed",
 description: "Order 1 was placed on Monday, March 13, 2023 at 1:49PM HKT",
 timeline: new Date("09 March 2023 15:20:23"),
 },
 {
 type: "Payment Received",
 description: "Payment for Order 1 was recieved on Monday, March 13, 2023 at 1:50PM HKT",
 timeline: new Date("09 January 2023 15:20:23"),
 },
 {
 type: "Order Fulfilled",
 description: "Order 1 was fufilled on Monday, March 13, 2023 at 1:51PM HKT",
 timeline: new Date("13 March 2023 15:20:23"),
 },
 ],
 },
 {
 id: "INVEVO99J4",
 customer: {
 profile: "/images/user-profile.png",
 name: "Hannah Chan",
 email: "olivia@emailaddress.com",
 phoneNumber: "92365872358",
 address1: "Room 26K, Tower 0, Harbour City",
 address2: "Kowloom, Hong Kong",
 },
 status: {
 paid: false,
 fulfilled: false,
 },
 location: "Hong Kong",
 price: {
 price: 150000,
 currency: "IDR",
 },
 timeline: [
 {
 type: "Account Created",
 description: "Order confirmation email was sent to chanolivia@emailaddress.com on Feb 9,2023",
 timeline: new Date("09 January 2023 15:20:23"),
 },
 {
 type: "Login",
 description: "Lorem ipsum dolor sit amet, consectetur adipiscing on Feb 9, 2023",
 timeline: new Date("09 January 2023 15:20:23"),
 },
 {
 type: "Items changed in cart",
 description: "Lorem ipsum dolor sit amet, consectetur adipiscing on Feb 9, 2023",
 timeline: new Date("09 January 2023 15:20:23"),
 },
 {
 type: "Order Placed",
 description: "Order 1 was placed on Monday, March 13, 2023 at 1:49PM HKT",
 timeline: new Date("09 January 2023 15:20:23"),
 },
 {
 type: "Payment Received",
 description: "Payment for Order 1 was recieved on Monday, March 13, 2023 at 1:50PM HKT",
 timeline: new Date("09 January 2023 15:20:23"),
 },
 ],
 },
 {
 id: "INVEVO99J0",
 customer: {
 profile: "/images/user-profile.png",
 name: "hAnnah Chan",
 email: "olivia@emailaddress.com",
 phoneNumber: "92365872358",
 address1: "Room 26K, Tower 0, Harbour City",
 address2: "Kowloom, Hong Kong",
 },
 status: {
 paid: true,
 fulfilled: false,
 },
 location: "Indonesia",
 price: {
 price: 150000,
 currency: "IDR",
 },
 timeline: [
 {
 type: "Account Created",
 description: "Order confirmation email was sent to chanolivia@emailaddress.com on Feb 9,2023",
 timeline: new Date("09 January 2023 15:20:23"),
 },
 {
 type: "Login",
 description: "Lorem ipsum dolor sit amet, consectetur adipiscing on Feb 9, 2023",
 timeline: new Date("09 January 2023 15:20:23"),
 },
 {
 type: "Items changed in cart",
 description: "Lorem ipsum dolor sit amet, consectetur adipiscing on Feb 9, 2023",
 timeline: new Date("09 January 2023 15:20:23"),
 },
 {
 type: "Order Placed",
 description: "Order 1 was placed on Monday, March 13, 2023 at 1:49PM HKT",
 timeline: new Date("09 January 2023 15:20:23"),
 },
 {
 type: "Payment Received",
 description: "Payment for Order 1 was recieved on Monday, March 13, 2023 at 1:50PM HKT",
 timeline: new Date("09 January 2023 15:20:23"),
 },
 ],
 },
];

const initialState = {
 value: Orders
}
export const orderSlice = createSlice({
 name: 'order',
 initialState,
 reducers: {
 updateTimeline: (state, action) => {
 const {id, timeline}: {id: String, timeline: Timeline2} = action.payload;
 let temp = cloneDeep(current(state.value))
 let toChange = temp.find(item => item.id === id)
 toChange?.timeline.push(timeline)
 state.value = temp;
 console.log(state.value)
 },
 }
})

export const {
 updateTimeline
} = orderSlice.actions;
export default orderSlice.reducer;
export type {Customer, Status, Price, Timeline2, Order}
/ store/orderSlice.ts'@reduxjs/toolkit'에서 {createSlice, current}를 임포트합니다.'@reduxjs/toolkit'에서 유형 { 페이로드 액션 }을 임포트합니다.'lodash'에서 {cloneDeep}을 임포트합니다.유형 Customer = { 이름: 문자열 email: String; profile: String; 전화 번호: String; address1: String; address2: String;};유형 Status = { paid: boolean; fulfilled: boolean;};유형 Price = { 가격 숫자; 통화: String;};유형 타임라인 = { order: Date; packed? Date; shipped? 날짜 delivered? Date;};유형 타임라인2 = { type: String; 설명: String; 타임라인: 날짜;};인터페이스 Order { id: String; 고객: 고객; 상태: 상태; 위치: 문자열; 가격: 가격; 타임라인: 배열;}인터페이스 Orders는 Array {}를 확장합니다.const Orders: Orders = [ { id: "INVEVO99J3", customer: { profile: "/이미지/사용자-프로필.png", 이름: "올리비아 챈", email: "olivia@emailaddress.com", 전화 번호: "92365872358", 주소1: "하버시티 타워 0, 26K호실", address2: "홍콩 카오룽", }, status: { paid: true, fulfilled: true, }, 위치: "홍콩", price: { price: 139500, 통화: "HKD", }, timeline: [ { type: "계정 생성됨", 설명: "주문 확인 이메일이 2023년 2월 9일에 chanolivia@emailaddress.com 으로 전송되었습니다.", timeline: new Date("2023년 1월 9일 15:20:23"), }, { type: "로그인", 설명: "2023년 2월 9일에 로그인할 예정입니다.", timeline: new Date("2023년 1월 9일 15:20:23"), }, { type: "카트에서 변경된 항목", 설명: "2023년 2월 9일에 변경되었습니다.", timeline: new Date("2023년 3월 9일 15:20:23"), }, { type: "주문 완료", 설명: "주문 1은 2023년 3월 13일 월요일 오후 1시 49분(홍콩 시간)에 접수되었습니다.", timeline: new Date("2023년 3월 9일 15:20:23"), }, { type: "결제 완료", 설명: "주문 1에 대한 결제가 2023년 3월 13일 월요일 오후 1시 50분(홍콩 시간)에 접수되었습니다.", timeline: new Date("2023년 1월 9일 15:20:23"), }, { type: "주문 처리됨", 설명: "주문 1은 2023년 3월 13일 월요일 오후 1시 51분(한국 시간)에 처리되었습니다.", timeline: new Date("2023년 3월 13일 15:20:23"), }, ], }, { id: "INVEVO99J4", customer: { profile: "/이미지/사용자-프로필.png", 이름: "한나 챈", email: "olivia@emailaddress.com", 전화 번호: "92365872358", 주소1: "하버시티 타워 0, 26K호실", address2: "홍콩 카오룽", }, status: { paid: false, fulfilled: false, }, 위치: "홍콩", price: { price: 150000, 통화: "IDR", }, timeline: [ { type: "계정 생성됨", 설명: "주문 확인 이메일이 2023년 2월 9일에 chanolivia@emailaddress.com 으로 전송되었습니다.", timeline: new Date("2023년 1월 9일 15:20:23"), }, { type: "로그인", 설명: "2023년 2월 9일에 로그인할 예정입니다.", timeline: new Date("2023년 1월 9일 15:20:23"), }, { type: "카트에서 변경된 항목", 설명: "2023년 2월 9일에 Lorem ipsum dolor sit amet, consectetur adipiscing", timeline: new Date("2023년 1월 9일 15:20:23"), }, { type: "주문 완료", 설명: "주문 1은 2023년 3월 13일 월요일 오후 1시 49분(홍콩 시간)에 접수되었습니다.", timeline: new Date("2023년 1월 9일 15:20:23"), }, { type: "결제 완료", 설명: "주문 1에 대한 결제가 2023년 3월 13일 월요일 오후 1시 50분(홍콩 시간)에 접수되었습니다.", timeline: new Date("2023년 1월 9일 15:20:23"), }, ], }, { id: "INVEVO99J0", customer: { profile: "/이미지/사용자-프로필.png", name: "hAnnah Chan", email: "olivia@emailaddress.com", phoneNumber: "92365872358", address1: "하버시티 타워 0, 26K호실", address2: "홍콩 카오룽", }, status: { paid: true, fulfilled: false, }, 위치: "인도네시아", price: { price: 150000, 통화: "IDR", }, timeline: [ { type: "계정 생성됨", 설명: "주문 확인 이메일이 2023년 2월 9일에 chanolivia@emailaddress.com 으로 전송되었습니다.", timeline: new Date("2023년 1월 9일 15:20:23"), }, { type: "로그인", 설명: "2023년 2월 9일에 로그인할 예정입니다.", timeline: new Date("2023년 1월 9일 15:20:23"), }, { type: "카트에서 변경된 항목", 설명: "2023년 2월 9일에 Lorem ipsum dolor sit amet, consectetur adipiscing", timeline: new Date("2023년 1월 9일 15:20:23"), }, { type: "주문 완료", 설명: "주문 1은 2023년 3월 13일 월요일 오후 1시 49분(홍콩 시간)에 접수되었습니다.", timeline: new Date("2023년 1월 9일 15:20:23"), }, { type: "결제 완료", 설명: "주문 1에 대한 결제가 2023년 3월 13일 월요일 오후 1시 50분(홍콩 시간)에 접수되었습니다.", timeline: new Date("2023년 1월 9일 15:20:23"), }, ], },];const initialState = { 값: Orders}export const orderSlice = createSlice({ name: 'order', initialState, 감속기: { updateTimeline: (state, action) => { const {id, timeline}: {id: 문자열, 타임라인: Timeline2} = action.payload; let temp = cloneDeep(current(state.value)) let toChange = temp.find(item => item.id === id) toChange?.timeline.push(timeline) state.value = temp; console.log(state.value) }, }})export const { updateT