Skip to content
This repository was archived by the owner on Dec 22, 2022. It is now read-only.

Commit 3157dfb

Browse files
joshistoastjoshistoast
authored
Merge pull request #7 from joshwcorbett/kooki.cart-getter-types
Updated useCart with getter types
2 parents f3ae813 + c8e916a commit 3157dfb

File tree

2 files changed

+183
-169
lines changed

2 files changed

+183
-169
lines changed

‎store.config.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@ import { storeConfig } from './types'
22

33
// Enter your store config here
44
export const useStoreConfig: storeConfig = {
5-
65
// example: xczxc98x7cz7cx67zx9c8zx7c6cxzic1
7-
storefrontApiToken: '',
6+
storefrontApiToken: process.env.STOREFRONT_API_ACCESS_TOKEN,
87

98
// example: https://my-store-url.myshopify.com/api/2022-07/graphql.json
10-
storefrontApiUrl: ''
9+
storefrontApiUrl: process.env.STOREFRONT_API_ENDPOINT,
1110
}

‎stores/cart.ts

Lines changed: 181 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -40,182 +40,197 @@ interface CartActions {
4040
updateCartItem(lines: CartLineUpdateInput[]): Promise<CartState>
4141
}
4242

43-
export const useCart = defineStore<'cart', CartState, {}, CartActions>('cart', {
44-
state: () => ({
45-
cart: {
46-
attributes: [],
47-
buyerIdentity: {},
48-
createdAt: '',
49-
checkoutUrl: '',
50-
deliveryGroups: {
51-
edges: [],
52-
pageInfo: {
53-
hasPreviousPage: false,
54-
hasNextPage: false,
55-
},
56-
},
57-
discountCodes: [],
58-
estimatedCost: {
59-
subtotalAmount: {
60-
amount: 0,
61-
currencyCode: CurrencyCode.USD,
62-
},
63-
totalTaxAmount: {
64-
amount: 0,
65-
currencyCode: CurrencyCode.USD,
66-
},
67-
totalDutyAmount: {
68-
amount: 0,
69-
currencyCode: CurrencyCode.USD,
43+
type GetterFunctions =
44+
| 'lineItems'
45+
| 'lineItemsCount'
46+
| 'subtotalAmount'
47+
| 'totalDutyAmount'
48+
| 'totalTaxAmount'
49+
| 'totalAmount'
50+
51+
type CartGetters = {
52+
[key in GetterFunctions]: (state: CartState) => any
53+
}
54+
55+
export const useCart = defineStore<'cart', CartState, CartGetters, CartActions>(
56+
'cart',
57+
{
58+
state: () => ({
59+
cart: {
60+
attributes: [],
61+
buyerIdentity: {},
62+
createdAt: '',
63+
checkoutUrl: '',
64+
deliveryGroups: {
65+
edges: [],
66+
pageInfo: {
67+
hasPreviousPage: false,
68+
hasNextPage: false,
69+
},
7070
},
71-
totalAmount: {
72-
amount: 0,
73-
currencyCode: CurrencyCode.USD,
71+
discountCodes: [],
72+
estimatedCost: {
73+
subtotalAmount: {
74+
amount: 0,
75+
currencyCode: CurrencyCode.USD,
76+
},
77+
totalTaxAmount: {
78+
amount: 0,
79+
currencyCode: CurrencyCode.USD,
80+
},
81+
totalDutyAmount: {
82+
amount: 0,
83+
currencyCode: CurrencyCode.USD,
84+
},
85+
totalAmount: {
86+
amount: 0,
87+
currencyCode: CurrencyCode.USD,
88+
},
7489
},
75-
},
76-
id: '',
77-
lines: {
78-
edges: [],
79-
pageInfo: {
80-
hasPreviousPage: false,
81-
hasNextPage: false,
90+
id: '',
91+
lines: {
92+
edges: [],
93+
pageInfo: {
94+
hasPreviousPage: false,
95+
hasNextPage: false,
96+
},
8297
},
98+
updatedAt: '',
8399
},
84-
updatedAt: '',
85-
},
86-
loading: false,
87-
}),
88-
actions: {
89-
async cartCreate() {
90-
try {
91-
this.loading = true
92-
const { data } = await useClient().mutate<CartMutCreate>({
93-
mutation: cartCreate,
94-
})
95-
if (!data.cartCreate.cart.id) {
96-
throw 'cartCreate: error'
100+
loading: false,
101+
}),
102+
actions: {
103+
async cartCreate() {
104+
try {
105+
this.loading = true
106+
const { data } = await useClient().mutate<CartMutCreate>({
107+
mutation: cartCreate,
108+
})
109+
if (!data.cartCreate.cart.id) {
110+
throw 'cartCreate: error'
111+
}
112+
const { cart } = data.cartCreate
113+
this.cart = cart
114+
} catch (e) {
115+
return e
116+
} finally {
117+
this.loading = false
118+
return this
97119
}
98-
const { cart } = data.cartCreate
99-
this.cart = cart
100-
} catch (e) {
101-
return e
102-
} finally {
103-
this.loading = false
104-
return this
105-
}
106-
},
107-
async getCart() {
108-
if (!this.cart.id) {
109-
await this.cartCreate()
110-
}
111-
112-
try {
113-
this.loading = true
114-
} catch (e) {
115-
return e
116-
} finally {
117-
this.loading = false
118-
return this
119-
}
120-
},
121-
async addToCart(lines) {
122-
try {
123-
this.loading = true
120+
},
121+
async getCart() {
124122
if (!this.cart.id) {
125123
await this.cartCreate()
126124
}
127-
const { data } = await useClient().mutate<CartMutAdd>({
128-
mutation: cartLinesAdd,
129-
variables: {
130-
cartId: this.cart.id,
131-
lines,
132-
},
133-
})
134-
if (!data.cartLinesAdd) {
135-
throw 'cartLinesAdd: error'
125+
126+
try {
127+
this.loading = true
128+
} catch (e) {
129+
return e
130+
} finally {
131+
this.loading = false
132+
return this
136133
}
137-
this.cart = data.cartLinesAdd.cart
138-
} catch (e) {
139-
return e
140-
} finally {
141-
this.loading = false
142-
return this
143-
}
144-
},
145-
async removeFromCart(lines) {
146-
try {
147-
this.loading = true
148-
const { data } = await useClient().mutate<CartMutRemove>({
149-
mutation: cartLinesRemove,
150-
variables: {
151-
cartId: this.cart.id,
152-
lineIds: lines,
153-
},
154-
})
155-
if (!data.cartLinesRemove) {
156-
throw 'cartLinesRemove: error'
134+
},
135+
async addToCart(lines) {
136+
try {
137+
this.loading = true
138+
if (!this.cart.id) {
139+
await this.cartCreate()
140+
}
141+
const { data } = await useClient().mutate<CartMutAdd>({
142+
mutation: cartLinesAdd,
143+
variables: {
144+
cartId: this.cart.id,
145+
lines,
146+
},
147+
})
148+
if (!data.cartLinesAdd) {
149+
throw 'cartLinesAdd: error'
150+
}
151+
this.cart = data.cartLinesAdd.cart
152+
} catch (e) {
153+
return e
154+
} finally {
155+
this.loading = false
156+
return this
157157
}
158-
this.cart = data.cartLinesRemove.cart
159-
} catch (e) {
160-
return e
161-
} finally {
162-
this.loading = false
163-
return this
164-
}
165-
},
166-
async updateCartItem(lines: CartLineUpdateInput[]) {
167-
try {
168-
this.loading = true
169-
if (!this.cart.id) {
170-
await this.cartCreate()
158+
},
159+
async removeFromCart(lines) {
160+
try {
161+
this.loading = true
162+
const { data } = await useClient().mutate<CartMutRemove>({
163+
mutation: cartLinesRemove,
164+
variables: {
165+
cartId: this.cart.id,
166+
lineIds: lines,
167+
},
168+
})
169+
if (!data.cartLinesRemove) {
170+
throw 'cartLinesRemove: error'
171+
}
172+
this.cart = data.cartLinesRemove.cart
173+
} catch (e) {
174+
return e
175+
} finally {
176+
this.loading = false
177+
return this
171178
}
172-
const { data } = await useClient().mutate({
173-
mutation: cartLinesUpdate,
174-
variables: {
175-
cartId: this.cart.id,
176-
lines,
177-
},
178-
})
179-
this.cart = data?.cartLinesUpdate?.cart
180-
} catch (e) {
181-
return e
182-
} finally {
183-
this.loading = false
184-
return this
185-
}
186-
},
187-
},
188-
getters: {
189-
lineItems: (state) => state.cart.lines.edges,
190-
lineItemsCount() {
191-
return this.lineItems.length
192-
},
193-
subtotalAmount: (state): string => {
194-
const amount = +state.cart.estimatedCost.subtotalAmount.amount
195-
const code = state.cart.estimatedCost.subtotalAmount.currencyCode
196-
return formatLocalePrice(+amount, 'en-US', code)
197-
},
198-
totalDutyAmount: (state): string => {
199-
if (!state.cart.estimatedCost.totalDutyAmount) {
200-
return null
201-
}
202-
const amount = +state.cart.estimatedCost.totalDutyAmount.amount
203-
const code = state.cart.estimatedCost.totalDutyAmount.currencyCode
204-
return formatLocalePrice(+amount, 'en-US', code)
205-
},
206-
totalTaxAmount: (state): string => {
207-
if (!state?.cart?.estimatedCost?.totalTaxAmount) {
208-
return null
209-
}
210-
const amount = +state.cart.estimatedCost.totalTaxAmount.amount
211-
const code = state.cart.estimatedCost.totalTaxAmount.currencyCode
212-
return formatLocalePrice(+amount, 'en-US', code)
179+
},
180+
async updateCartItem(lines: CartLineUpdateInput[]) {
181+
try {
182+
this.loading = true
183+
if (!this.cart.id) {
184+
await this.cartCreate()
185+
}
186+
const { data } = await useClient().mutate({
187+
mutation: cartLinesUpdate,
188+
variables: {
189+
cartId: this.cart.id,
190+
lines,
191+
},
192+
})
193+
this.cart = data?.cartLinesUpdate?.cart
194+
} catch (e) {
195+
return e
196+
} finally {
197+
this.loading = false
198+
return this
199+
}
200+
},
213201
},
214-
totalAmount: (state): string => {
215-
const amount = +state.cart.estimatedCost.totalAmount.amount
216-
const code = state.cart.estimatedCost.totalAmount.currencyCode
217-
return formatLocalePrice(+amount, 'en-US', code)
202+
getters: {
203+
lineItems: (state) => state.cart.lines.edges,
204+
lineItemsCount() {
205+
return this.lineItems.length
206+
},
207+
subtotalAmount: (state): string => {
208+
const amount = +state.cart.estimatedCost.subtotalAmount.amount
209+
const code = state.cart.estimatedCost.subtotalAmount.currencyCode
210+
return formatLocalePrice(+amount, 'en-US', code)
211+
},
212+
totalDutyAmount: (state): string => {
213+
if (!state.cart.estimatedCost.totalDutyAmount) {
214+
return null
215+
}
216+
const amount = +state.cart.estimatedCost.totalDutyAmount.amount
217+
const code = state.cart.estimatedCost.totalDutyAmount.currencyCode
218+
return formatLocalePrice(+amount, 'en-US', code)
219+
},
220+
totalTaxAmount: (state): string => {
221+
if (!state?.cart?.estimatedCost?.totalTaxAmount) {
222+
return null
223+
}
224+
const amount = +state.cart.estimatedCost.totalTaxAmount.amount
225+
const code = state.cart.estimatedCost.totalTaxAmount.currencyCode
226+
return formatLocalePrice(+amount, 'en-US', code)
227+
},
228+
totalAmount: (state): string => {
229+
const amount = +state.cart.estimatedCost.totalAmount.amount
230+
const code = state.cart.estimatedCost.totalAmount.currencyCode
231+
return formatLocalePrice(+amount, 'en-US', code)
232+
},
218233
},
219-
},
220-
persist: true,
221-
})
234+
persist: true,
235+
}
236+
)

0 commit comments

Comments
 (0)