Skip to content

Commit 14f0927

Browse files
w3bdesignw3bdesign
authored
Merge pull request #148 from w3bdesign/development
Development
2 parents d4e1baa + 29a377f commit 14f0927

File tree

9 files changed

+241
-27
lines changed

9 files changed

+241
-27
lines changed

‎components/Cart/AddToCartButton.component.jsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,6 @@ const AddToCartButton = (props) => {
4141
const { loading, error, data, refetch } = useQuery(GET_CART, {
4242
notifyOnNetworkStatusChange: true,
4343
onCompleted: () => {
44-
console.log('Data from add to cart button: ');
45-
console.log(data);
4644
// Update cart in the localStorage.
4745
const updatedCart = getFormattedCart(data);
4846

@@ -75,7 +73,7 @@ const AddToCartButton = (props) => {
7573
onError: (error) => {
7674
if (error) {
7775
console.log('Error inside add to cart');
78-
//setRequestError(error.graphQLErrors[0].message);
76+
setRequestError(error);
7977
console.log(error);
8078
}
8179
},

‎components/Cart/CartPage/CartItemsContainer.component.jsx

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -80,22 +80,18 @@ const CartItemsContainer = () => {
8080
// updateCart={updateCart}
8181
/>
8282
))}
83-
84-
<tr>
85-
<td>
86-
<Link href="/kasse">
87-
<a
88-
className="inline-block px-6 py-3 mt-6 text-xl leading-relaxed uppercase border border-gray-600 border-solid hover:underline"
89-
href="#"
90-
>
91-
gå til kasse
92-
</a>
93-
</Link>
94-
</td>
95-
</tr>
9683
</tbody>
9784
</table>
85+
86+
<div className="mt-4">
87+
<Link href="/kasse">
88+
<button className="px-4 py-2 font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400">
89+
GÅ TIL KASSE
90+
</button>
91+
</Link>
92+
</div>
9893
</div>
94+
9995
) : (
10096
<div className="p-6 mx-auto mt-5">
10197
<h2 className="text-lg">Ingen varer i handlekurven</h2>

‎components/Checkout/Billing.component.jsx

Lines changed: 156 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ const Billing = ({ input, handleOnChange }) => {
1919
value={input.firstName}
2020
type="text"
2121
name="firstName"
22-
className="form-control woo-next-checkout-input"
2322
id="first-name"
2423
/>
2524
<Error errors={input.errors} fieldName={'firstName'} />
@@ -210,12 +209,165 @@ const Billing = ({ input, handleOnChange }) => {
210209

211210
<br />
212211

213-
{ // https://tailwindcss.com/components/forms/#
212+
{
213+
// https://tailwindcss.com/components/forms/#
214214
}
215215

216-
216+
<section className="relative text-gray-700 body-font">
217+
<div className="container px-5 py-24 mx-auto">
218+
<div className="flex flex-col w-full mb-12 text-center">
219+
<h1 className="mb-4 text-2xl font-medium text-gray-900 sm:text-3xl title-font">
220+
Betalingsdetaljer
221+
</h1>
222+
</div>
223+
<div className="mx-auto lg:w-1/2 md:w-2/3">
224+
<div className="flex flex-wrap -m-2">
225+
<div className="w-1/2 p-2">
226+
<input
227+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
228+
placeholder="Fornavn"
229+
type="text"
230+
onChange={handleOnChange}
231+
value={input.firstName}
232+
name="firstName"
233+
id="first-name"
234+
/>
235+
<Error errors={input.errors} fieldName={'firstName'} />
236+
</div>
237+
<div className="w-1/2 p-2">
238+
<input
239+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
240+
placeholder="Etternavn"
241+
type="text"
242+
onChange={handleOnChange}
243+
value={input.lastName}
244+
name="lastName"
245+
id="last-name"
246+
/>
247+
<Error errors={input.errors} fieldName={'lastName'} />
248+
</div>
249+
<div className="w-1/2 p-2">
250+
<input
251+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
252+
placeholder="Firmanavn"
253+
type="text"
254+
onChange={handleOnChange}
255+
value={input.firstName}
256+
name="company"
257+
id="company"
258+
/>
259+
<Error errors={input.errors} fieldName={'company'} />
260+
</div>
261+
<div className="w-1/2 p-2">
262+
<input
263+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
264+
placeholder="Addresse"
265+
type="text"
266+
onChange={handleOnChange}
267+
value={input.firstName}
268+
name="address1"
269+
id="address1"
270+
/>
271+
<Error errors={input.errors} fieldName={'address1'} />
272+
</div>
273+
274+
<div className="w-1/2 p-2">
275+
<select
276+
onChange={handleOnChange}
277+
value={input.country}
278+
name="country"
279+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
280+
id="country-select"
281+
>
282+
<option value="">Velg ditt land ...</option>
283+
{countryList.length &&
284+
countryList.map((country, index) => (
285+
<option
286+
key={`${country}-${index}`}
287+
value={country.countryCode}
288+
>
289+
{country.countryName}
290+
</option>
291+
))}
292+
</select>
293+
<Error errors={input.errors} fieldName={'country'} />
294+
</div>
295+
296+
<div className="w-1/2 p-2">
297+
<input
298+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
299+
placeholder="Addresse"
300+
type="text"
301+
onChange={handleOnChange}
302+
value={input.firstName}
303+
name="address1"
304+
id="address1"
305+
/>
306+
<Error errors={input.errors} fieldName={'address1'} />
307+
</div>
308+
309+
<div className="w-1/2 p-2">
310+
<input
311+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
312+
placeholder="Addresse"
313+
type="text"
314+
onChange={handleOnChange}
315+
value={input.firstName}
316+
name="address1"
317+
id="address1"
318+
/>
319+
<Error errors={input.errors} fieldName={'address1'} />
320+
</div>
321+
322+
<div className="w-1/2 p-2">
323+
<input
324+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
325+
placeholder="Addresse"
326+
type="text"
327+
onChange={handleOnChange}
328+
value={input.firstName}
329+
name="address1"
330+
id="address1"
331+
/>
332+
<Error errors={input.errors} fieldName={'address1'} />
333+
</div>
217334

218-
335+
<div className="w-1/2 p-2">
336+
<input
337+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
338+
placeholder="Addresse"
339+
type="text"
340+
onChange={handleOnChange}
341+
value={input.firstName}
342+
name="address1"
343+
id="address1"
344+
/>
345+
<Error errors={input.errors} fieldName={'address1'} />
346+
</div>
347+
348+
<div className="w-1/2 p-2">
349+
<input
350+
className="w-full px-4 py-2 text-base bg-gray-200 border border-gray-400 rounded focus:outline-none focus:border-black"
351+
placeholder="Addresse"
352+
type="text"
353+
onChange={handleOnChange}
354+
value={input.firstName}
355+
name="address1"
356+
id="address1"
357+
/>
358+
<Error errors={input.errors} fieldName={'address1'} />
359+
</div>
360+
361+
<div className="w-full p-2">
362+
<button className="flex px-4 py-2 mx-auto font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400">
363+
BESTILL
364+
</button>
365+
</div>
366+
367+
</div>
368+
</div>
369+
</div>
370+
</section>
219371
</>
220372
);
221373
};

‎components/Checkout/CheckoutForm.component.jsx

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,20 @@ import { useState, useContext, useEffect } from 'react';
22
import { useQuery, useMutation } from '@apollo/react-hooks';
33

44
import Billing from './Billing.component';
5+
import Payment from "./Payment.component";
56

67
import { GET_CART } from 'utils/const/GQL_QUERIES';
78
import { CHECKOUT_MUTATION } from 'utils/const/GQL_MUTATIONS';
89
import { INITIAL_STATE } from 'utils/const/INITIAL_STATE';
910

1011
import { AppContext } from 'utils/context/AppContext';
1112

12-
import { getFormattedCart } from 'utils/functions/functions';
13+
import {
14+
getFormattedCart,
15+
createCheckoutData,
16+
} from 'utils/functions/functions';
17+
18+
import validateAndSanitizeCheckoutForm from 'utils/validator/checkoutValidator';
1319

1420
const CheckoutForm = () => {
1521
const [cart, setCart] = useContext(AppContext);
@@ -101,11 +107,27 @@ const CheckoutForm = () => {
101107
<Billing input={input} handleOnChange={handleOnChange} />
102108
</div>
103109

110+
{/*Payment*/}
111+
<div className="">
112+
<Payment input={ input } handleOnChange={ handleOnChange }/>
113+
</div>
114+
115+
<div>
116+
<button
117+
className="px-4 py-2 font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400"
118+
type="submit"
119+
>
120+
BESTILL
121+
</button>
122+
</div>
123+
104124
{/* Checkout Loading*/}
105-
{checkoutLoading && <p>Behandler ordre ...</p>}
106-
{requestError && (
107-
<p>Feilmelding: {requestError} :( Vennligst prøv igjen.)</p>
108-
)}
125+
{
126+
//checkoutLoading && <p>Behandler ordre ...</p>
127+
}
128+
{
129+
//requestError && <p>Feilmelding: {requestError} </p>
130+
}
109131
</div>
110132
</form>
111133
) : (

‎components/Checkout/Payment.component.jsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const Payment = ({ input, handleOnChange }) => {
2+
return (
3+
<div className="mt-3">
4+
<label className="form-check-label">
5+
<input
6+
onChange={handleOnChange}
7+
value="bacs"
8+
className="form-check-input"
9+
name="paymentMethod"
10+
type="radio"
11+
/>
12+
<span className="woo-next-payment-content">Direkte bankoverføring</span>
13+
</label>
14+
</div>
15+
);
16+
};
17+
18+
export default Payment;

‎components/Search/AlgoliaSearchBox.component.jsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const searchClient = algoliasearch(
1717
*/
1818
const AlgoliaSearchBox = () => {
1919
const [search, setSearch] = useState(null);
20+
const [hasFocus, sethasFocus] = useState(false);
2021

2122
return (
2223
<>
@@ -26,13 +27,22 @@ const AlgoliaSearchBox = () => {
2627
indexName="wp_posts_product"
2728
searchClient={searchClient}
2829
>
30+
{/*We need to conditionally add a border because the element has position:fixed*/}
2931
<SearchBox
3032
translations={{
3133
submitTitle: 'Søk',
3234
resetTitle: 'Slett søketekst',
3335
placeholder: 'Søk her ...',
3436
}}
35-
className="px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
37+
className={`px-4 py-2 text-base bg-gray-100 border outline-none rounded ${
38+
hasFocus ? 'border-black' : 'border-gray-400'
39+
}`}
40+
onFocus={() => {
41+
sethasFocus(true);
42+
}}
43+
onBlur={() => {
44+
sethasFocus(false);
45+
}}
3646
onReset={() => {
3747
setSearch(null);
3848
}}

‎components/Search/MobileSearch.component.jsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const searchClient = algoliasearch(
1515
*/
1616
const MobileSearch = () => {
1717
const [search, setSearch] = useState(null);
18+
const [hasFocus, sethasFocus] = useState(false);
1819
return (
1920
<>
2021
<div className="inline mt-4">
@@ -25,7 +26,15 @@ const MobileSearch = () => {
2526
resetTitle: 'Slett søketekst',
2627
placeholder: 'Søk her ...',
2728
}}
28-
className="px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
29+
className={`px-4 py-2 text-base bg-gray-100 border outline-none rounded ${
30+
hasFocus ? 'border-black' : 'border-gray-400'
31+
}`}
32+
onFocus={() => {
33+
sethasFocus(true);
34+
}}
35+
onBlur={() => {
36+
sethasFocus(false);
37+
}}
2938
onReset={() => {
3039
setSearch(null);
3140
}}

‎utils/functions/functions.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { v4 } from 'uuid';
2+
13
/**
24
* Convert price from string to floating value and convert it to use two decimals
35
* @param {String} string

‎utils/validator/checkoutValidator.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const validateAndSanitizeCheckoutForm = (data) => {
2+
return {
3+
isValid: true,
4+
};
5+
};
6+
7+
export default validateAndSanitizeCheckoutForm;

0 commit comments

Comments
 (0)