iceholidays-frontend 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/iceholidays/frontend/layout.scss +10 -1
- data/app/javascript/api-services/contact-us-api.service.ts +19 -0
- data/app/javascript/api-services/testimonials-api.service.ts +1 -1
- data/app/javascript/interfaces/testimonial.interface.ts +1 -1
- data/app/javascript/react/components/Testimonials.tsx +1 -1
- data/app/javascript/react/index.js +2 -1
- data/app/javascript/react/layouts/MainFooter.tsx +43 -35
- data/app/javascript/react/layouts/MainLayout.tsx +1 -1
- data/app/javascript/react/pages/ContactUsPage.tsx +128 -101
- data/app/views/iceholidays/frontend/site/index.html.erb +7 -1
- data/lib/iceholidays/frontend/version.rb +1 -1
- data/public/iceholidays-assets/application.css +8 -1
- data/public/iceholidays-assets/application.js +95 -95
- data/public/iceholidays-assets/application.js.map +4 -4
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1997e35efb30d45dd06e1453ab369de2c2a06304ba6a7af1bc0d8b83b6b55470
|
|
4
|
+
data.tar.gz: b492bbe782f6c15950eb6b6b18c3c8ba51bec70e892bdef614ef97a291b62b7f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2b3e0a7c2aae85d4bd6ba9ff20d19913d817839642e264d765b4fb85a66cdf83bd027f0152b437c2e92df0ab972b4330d3be47934821b9228302a94fc6fce9e8
|
|
7
|
+
data.tar.gz: 655a05ac3125ab3c04dd4bd110411795030cffb4aecb196987fdb86eee38b46e32415ce34f568d0488bb807b8d8d4fae31022b01f4d0cafd71cb7b5b48938426
|
|
@@ -115,9 +115,18 @@
|
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
.contact-info{
|
|
118
|
+
.ant-flex{
|
|
119
|
+
display: inline-flex;
|
|
120
|
+
}
|
|
121
|
+
|
|
118
122
|
.link-group-title{
|
|
119
123
|
text-align: center;
|
|
120
124
|
}
|
|
125
|
+
|
|
126
|
+
a{
|
|
127
|
+
display: flex;
|
|
128
|
+
align-items: center;
|
|
129
|
+
}
|
|
121
130
|
}
|
|
122
131
|
}
|
|
123
132
|
|
|
@@ -254,7 +263,7 @@
|
|
|
254
263
|
}
|
|
255
264
|
|
|
256
265
|
#main-footer{
|
|
257
|
-
height:
|
|
266
|
+
height: auto;
|
|
258
267
|
background: linear-gradient(270deg, #AA853E 0%, $secondary-color 33.5%, #FFF3A6 50%, $secondary-color 65.5%, #E1B65B 100%),
|
|
259
268
|
linear-gradient(4.08deg, rgba(170, 133, 62, 0.5) -2.54%, rgba(249, 225, 151, 0.5) 7.02%);
|
|
260
269
|
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import axios from "axios";
|
|
2
|
+
|
|
3
|
+
class ContactUsApi
|
|
4
|
+
{
|
|
5
|
+
|
|
6
|
+
getStates(): Promise<any[]> {
|
|
7
|
+
const apiUrl = "/api/v1/states";
|
|
8
|
+
|
|
9
|
+
return axios.get(apiUrl)
|
|
10
|
+
.then(response => {
|
|
11
|
+
const states = response.data.map(res => ({value: res, label: res}));
|
|
12
|
+
return Promise.resolve(states);
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export default ContactUsApi
|
|
19
|
+
;
|
|
@@ -12,7 +12,7 @@ class TestimonialsApi {
|
|
|
12
12
|
const testimonialData = responseData.attributes;
|
|
13
13
|
const testimonial:Testimonial = {
|
|
14
14
|
id: testimonialData.id,
|
|
15
|
-
|
|
15
|
+
title: testimonialData.title,
|
|
16
16
|
author: testimonialData.author,
|
|
17
17
|
comment: testimonialData.body,
|
|
18
18
|
}
|
|
@@ -53,7 +53,7 @@ export default class Testimonials extends React.Component {
|
|
|
53
53
|
<div className="tour">
|
|
54
54
|
<img src="/iceholidays-assets/images/logomark.png" className="st-logo"/>
|
|
55
55
|
<div>
|
|
56
|
-
<span> {review.
|
|
56
|
+
<span> {review.title} </span>
|
|
57
57
|
</div>
|
|
58
58
|
</div>
|
|
59
59
|
<div className="comment">
|
|
@@ -1,44 +1,52 @@
|
|
|
1
1
|
import { Col, Flex, notification, Row, Space } from "antd";
|
|
2
2
|
import React from "react";
|
|
3
|
-
import { Link } from "react-router-dom";
|
|
4
3
|
import LocationsApi from "../../api-services/locations-api.service";
|
|
5
4
|
import { Country } from "../../interfaces/country.interface";
|
|
6
5
|
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
{
|
|
14
|
-
label: "pdpa",
|
|
15
|
-
link: "/app"
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
label: "about us",
|
|
19
|
-
link: "/app/about-us"
|
|
20
|
-
},
|
|
21
|
-
{
|
|
22
|
-
label: "privacy policy",
|
|
23
|
-
link: "/app"
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
label: "contact us",
|
|
27
|
-
link: "/app/contact-us"
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
label: "terms & conditions",
|
|
31
|
-
link: "/app"
|
|
32
|
-
},
|
|
33
|
-
]
|
|
7
|
+
interface IMainFooterProps {
|
|
8
|
+
PDPA:string;
|
|
9
|
+
PRIVACY:string;
|
|
10
|
+
TNC:string;
|
|
11
|
+
}
|
|
34
12
|
|
|
35
|
-
export default class MainFooter extends React.Component {
|
|
13
|
+
export default class MainFooter extends React.Component<IMainFooterProps> {
|
|
36
14
|
api = new LocationsApi;
|
|
37
15
|
|
|
38
16
|
state = {
|
|
39
17
|
countries: []
|
|
40
18
|
}
|
|
41
19
|
|
|
20
|
+
menus = [
|
|
21
|
+
{
|
|
22
|
+
label: "Home",
|
|
23
|
+
link: "/app"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
label: "pdpa",
|
|
27
|
+
link: this.props.PDPA,
|
|
28
|
+
target: "_blank"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
label: "about us",
|
|
32
|
+
link: "/app/about-us"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
label: "privacy policy",
|
|
36
|
+
link: this.props.PRIVACY,
|
|
37
|
+
target: "_blank"
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
label: "contact us",
|
|
41
|
+
link: "/app/contact-us"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
label: "terms & conditions",
|
|
45
|
+
link: this.props.TNC,
|
|
46
|
+
target: "_blank"
|
|
47
|
+
},
|
|
48
|
+
]
|
|
49
|
+
|
|
42
50
|
componentDidMount() {
|
|
43
51
|
this.api.getCountries()
|
|
44
52
|
.then(locationsData => {
|
|
@@ -58,7 +66,7 @@ export default class MainFooter extends React.Component {
|
|
|
58
66
|
<div className="link-group-title">Countries</div>
|
|
59
67
|
<div className="link-group-items">
|
|
60
68
|
{
|
|
61
|
-
this.state.countries.map((country: Country)=> <
|
|
69
|
+
this.state.countries.map((country: Country)=> <a key={country.id} href={`/app/listing?location_id=${country.id}`} target="_self"> {country.name} </a> )
|
|
62
70
|
}
|
|
63
71
|
</div>
|
|
64
72
|
</Space>
|
|
@@ -67,7 +75,7 @@ export default class MainFooter extends React.Component {
|
|
|
67
75
|
<Space direction="vertical">
|
|
68
76
|
<div className="link-group-items">
|
|
69
77
|
{
|
|
70
|
-
menus.map(menu
|
|
78
|
+
this.menus.map((menu, index) =><a key={index} target={menu.target} href={menu.link}> {menu.label} </a>)
|
|
71
79
|
}
|
|
72
80
|
</div>
|
|
73
81
|
</Space>
|
|
@@ -76,13 +84,13 @@ export default class MainFooter extends React.Component {
|
|
|
76
84
|
<Space direction="vertical" align="center">
|
|
77
85
|
<Flex vertical gap="20px" align="center">
|
|
78
86
|
<div className="link-group-title">Contact Us</div>
|
|
79
|
-
<div><
|
|
87
|
+
<div><a href="/app/contact-agents">contact agents</a></div>
|
|
80
88
|
<div className="link-group-title">Follow us on</div>
|
|
81
89
|
<Flex gap={20} justify="space-between">
|
|
82
|
-
<img src="/iceholidays-assets/images/social/ico_fb.png"
|
|
83
|
-
<img src="/iceholidays-assets/images/social/ico_twitter.png"
|
|
84
|
-
<img src="/iceholidays-assets/images/social/ico_yt.png"
|
|
85
|
-
<img src="/iceholidays-assets/images/social/ico_ig.png"
|
|
90
|
+
<a target="_blank" href="https://www.facebook.com/thesignaturetour"><img src="/iceholidays-assets/images/social/ico_fb.png"/></a>
|
|
91
|
+
<a target="_blank" style={{pointerEvents: "none"}} href="javascript:void(0)"><img src="/iceholidays-assets/images/social/ico_twitter.png"/></a>
|
|
92
|
+
<a target="_blank" style={{pointerEvents: "none"}} href="javascript:void(0)"><img src="/iceholidays-assets/images/social/ico_yt.png"/></a>
|
|
93
|
+
<a target="_blank" href="https://www.instagram.com/thesignaturetours"><img src="/iceholidays-assets/images/social/ico_ig.png"/></a>
|
|
86
94
|
</Flex>
|
|
87
95
|
</Flex>
|
|
88
96
|
</Space>
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import Headline from "../components/shared/Headline";
|
|
3
|
-
import { Button, Col, Flex, Form, Input, Row, Select, Space } from "antd";
|
|
3
|
+
import { Button, Col, Flex, Form, Input, notification, Row, Select, Space } from "antd";
|
|
4
4
|
import { mdiFacebook, mdiInstagram, mdiTwitter, mdiYoutube } from "@mdi/js";
|
|
5
5
|
import Icon from "@mdi/react";
|
|
6
|
+
import ContactUsApi from "../../api-services/contact-us-api.service";
|
|
6
7
|
const { TextArea } = Input;
|
|
7
8
|
|
|
8
9
|
const bannerPath = '/iceholidays-assets/images/contact_us.png';
|
|
@@ -11,112 +12,138 @@ const breadcrumbs = [
|
|
|
11
12
|
{ title: 'Contact Us' }
|
|
12
13
|
]
|
|
13
14
|
|
|
14
|
-
const ContactUsPage = React.FC = () => {
|
|
15
|
-
const [form] = Form.useForm();
|
|
16
|
-
|
|
17
|
-
return (
|
|
18
|
-
<div id="contact-us-page">
|
|
19
|
-
<Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="contact us"/>
|
|
20
|
-
|
|
21
|
-
<div id="contact-us-page_body">
|
|
22
|
-
<img src="/iceholidays-assets/images/contact_us_form.png"/>
|
|
23
|
-
|
|
24
|
-
<div id="contact-us-form">
|
|
25
|
-
<div id="contact-us-form_header">
|
|
26
|
-
<h2>Get in touch</h2>
|
|
27
|
-
<span>Send us your enquiry</span>
|
|
28
|
-
</div>
|
|
29
|
-
<Form
|
|
30
|
-
form={form}
|
|
31
|
-
autoComplete="off"
|
|
32
|
-
layout="vertical"
|
|
33
|
-
variant="filled"
|
|
34
|
-
>
|
|
35
|
-
<Form.Item label="Enter Name" name="name">
|
|
36
|
-
<Input placeholder="Enter Here" />
|
|
37
|
-
</Form.Item>
|
|
38
15
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
</Col>
|
|
50
|
-
</Row>
|
|
16
|
+
const validateMessages = {
|
|
17
|
+
required: '${label} is required!',
|
|
18
|
+
types: {
|
|
19
|
+
email: '${label} is not a valid email!',
|
|
20
|
+
number: '${label} is not a valid number!',
|
|
21
|
+
},
|
|
22
|
+
number: {
|
|
23
|
+
range: '${label} must be between ${min} and ${max}',
|
|
24
|
+
},
|
|
25
|
+
};
|
|
51
26
|
|
|
52
|
-
<Form.Item label="Select State" name="state">
|
|
53
|
-
<Select
|
|
54
|
-
placeholder="Please Select"
|
|
55
|
-
defaultValue="lucy"
|
|
56
|
-
options={[
|
|
57
|
-
{ value: 'jack', label: 'Jack' },
|
|
58
|
-
]}
|
|
59
|
-
/>
|
|
60
|
-
</Form.Item>
|
|
61
27
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
placeholder="Please Select"
|
|
65
|
-
defaultValue="lucy"
|
|
66
|
-
options={[
|
|
67
|
-
{ value: 'jack', label: 'Jack' },
|
|
68
|
-
]}
|
|
69
|
-
/>
|
|
70
|
-
</Form.Item>
|
|
28
|
+
export default class ContactUsPage extends React.Component {
|
|
29
|
+
api = new ContactUsApi;
|
|
71
30
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
defaultValue="lucy"
|
|
76
|
-
options={[
|
|
77
|
-
{ value: 'jack', label: 'Jack' },
|
|
78
|
-
]}
|
|
79
|
-
/>
|
|
80
|
-
</Form.Item>
|
|
31
|
+
state = {
|
|
32
|
+
states: []
|
|
33
|
+
}
|
|
81
34
|
|
|
82
|
-
<Form.Item label="Write your message" name="message">
|
|
83
|
-
<TextArea rows={4} placeholder="Write Here"/>
|
|
84
|
-
</Form.Item>
|
|
85
35
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
36
|
+
componentDidMount() {
|
|
37
|
+
this.api.getStates()
|
|
38
|
+
.then(statesData => {
|
|
39
|
+
this.setState({states: statesData})
|
|
40
|
+
})
|
|
41
|
+
.catch(error => {
|
|
42
|
+
notification.error({ message: 'An error occured while loading states.'});
|
|
43
|
+
});
|
|
44
|
+
}
|
|
91
45
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
46
|
+
submitForm(formValues) {
|
|
47
|
+
console.log(formValues)
|
|
48
|
+
}
|
|
95
49
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
<
|
|
105
|
-
<div>
|
|
106
|
-
<
|
|
107
|
-
<
|
|
108
|
-
<Icon path={mdiFacebook} size={1} />
|
|
109
|
-
<Icon path={mdiInstagram} size={1} />
|
|
110
|
-
<Icon path={mdiTwitter} size={1} />
|
|
111
|
-
<Icon path={mdiYoutube} size={1} />
|
|
112
|
-
<img src="/iceholidays-assets/images/social.png" className="social-icon"/>
|
|
113
|
-
</Space>
|
|
50
|
+
render(){
|
|
51
|
+
return (
|
|
52
|
+
<div id="contact-us-page">
|
|
53
|
+
<Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="contact us"/>
|
|
54
|
+
|
|
55
|
+
<div id="contact-us-page_body">
|
|
56
|
+
<img src="/iceholidays-assets/images/contact_us_form.png"/>
|
|
57
|
+
|
|
58
|
+
<div id="contact-us-form">
|
|
59
|
+
<div id="contact-us-form_header">
|
|
60
|
+
<h2>Get in touch</h2>
|
|
61
|
+
<span>Send us your enquiry</span>
|
|
114
62
|
</div>
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
|
|
63
|
+
<Form
|
|
64
|
+
autoComplete="off"
|
|
65
|
+
layout="vertical"
|
|
66
|
+
variant="filled"
|
|
67
|
+
validateMessages={validateMessages}
|
|
68
|
+
onFinish={(formValues)=>this.submitForm(formValues)}
|
|
69
|
+
>
|
|
70
|
+
<Form.Item label="Enter Name" name="name">
|
|
71
|
+
<Input placeholder="Enter Here" />
|
|
72
|
+
</Form.Item>
|
|
73
|
+
|
|
74
|
+
<Row gutter={20}>
|
|
75
|
+
<Col span={12}>
|
|
76
|
+
<Form.Item label="Enter Email" name="email" rules={[{ type: 'email' }]}>
|
|
77
|
+
<Input placeholder="Enter Here" />
|
|
78
|
+
</Form.Item>
|
|
79
|
+
</Col>
|
|
80
|
+
<Col span={12}>
|
|
81
|
+
<Form.Item label="Enter Phone Number" name="phoneNumber">
|
|
82
|
+
<Input placeholder="Enter Here" />
|
|
83
|
+
</Form.Item>
|
|
84
|
+
</Col>
|
|
85
|
+
</Row>
|
|
86
|
+
|
|
87
|
+
<Form.Item label="Select State" name="state">
|
|
88
|
+
<Select
|
|
89
|
+
placeholder="Please Select"
|
|
90
|
+
options={this.state?.states}
|
|
91
|
+
/>
|
|
92
|
+
</Form.Item>
|
|
93
|
+
|
|
94
|
+
<Form.Item label="Select Area" name="area">
|
|
95
|
+
<Input placeholder="Enter Here" />
|
|
96
|
+
</Form.Item>
|
|
97
|
+
|
|
98
|
+
<Form.Item label="Select Subject" name="subject">
|
|
99
|
+
<Input placeholder="Enter Here" />
|
|
100
|
+
</Form.Item>
|
|
101
|
+
|
|
102
|
+
<Form.Item label="Write your message" name="message">
|
|
103
|
+
<TextArea rows={4} placeholder="Write Here"/>
|
|
104
|
+
</Form.Item>
|
|
105
|
+
|
|
106
|
+
<Flex align="center" justify="center">
|
|
107
|
+
<Button type="primary" htmlType="submit">
|
|
108
|
+
Submit
|
|
109
|
+
</Button>
|
|
110
|
+
</Flex>
|
|
111
|
+
|
|
112
|
+
</Form>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div id="contact-us-page_footer">
|
|
117
|
+
<Row gutter={[29, 20]} >
|
|
118
|
+
<Col xs={24} sm={24} lg={12}>
|
|
119
|
+
<div>
|
|
120
|
+
<label>Contact Us</label>
|
|
121
|
+
<span>feedback@gd.my</span>
|
|
122
|
+
</div>
|
|
123
|
+
</Col>
|
|
124
|
+
<Col xs={24} sm={24} lg={12}>
|
|
125
|
+
<div>
|
|
126
|
+
<label>Connect with Us</label>
|
|
127
|
+
<Space size={29}>
|
|
128
|
+
<a target="_blank" href="https://www.facebook.com/thesignaturetour">
|
|
129
|
+
<Icon path={mdiFacebook} size={1} />
|
|
130
|
+
</a>
|
|
131
|
+
<a target="_blank" href="https://www.instagram.com/thesignaturetours">
|
|
132
|
+
<Icon path={mdiInstagram} size={1} />
|
|
133
|
+
</a>
|
|
134
|
+
<a target="_blank" href="javascript:void(0)" style={{pointerEvents: "none"}}>
|
|
135
|
+
<Icon path={mdiTwitter} size={1} />
|
|
136
|
+
</a>
|
|
137
|
+
<a target="_blank" href="javascript:void(0)" style={{pointerEvents: "none"}}>
|
|
138
|
+
<Icon path={mdiYoutube} size={1} />
|
|
139
|
+
</a>
|
|
140
|
+
<img src="/iceholidays-assets/images/social.png" className="social-icon"/>
|
|
141
|
+
</Space>
|
|
142
|
+
</div>
|
|
143
|
+
</Col>
|
|
144
|
+
</Row>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
@@ -450,9 +450,16 @@ a {
|
|
|
450
450
|
grid-template-rows: 1fr;
|
|
451
451
|
column-gap: 34px;
|
|
452
452
|
}
|
|
453
|
+
#main-footer_links .contact-info .ant-flex {
|
|
454
|
+
display: inline-flex;
|
|
455
|
+
}
|
|
453
456
|
#main-footer_links .contact-info .link-group-title {
|
|
454
457
|
text-align: center;
|
|
455
458
|
}
|
|
459
|
+
#main-footer_links .contact-info a {
|
|
460
|
+
display: flex;
|
|
461
|
+
align-items: center;
|
|
462
|
+
}
|
|
456
463
|
#main-footer #copyright {
|
|
457
464
|
text-align: center;
|
|
458
465
|
padding: 20px 0 0;
|
|
@@ -557,7 +564,7 @@ a {
|
|
|
557
564
|
display: block;
|
|
558
565
|
}
|
|
559
566
|
#main-footer {
|
|
560
|
-
height:
|
|
567
|
+
height: auto;
|
|
561
568
|
background: linear-gradient(270deg, #AA853E 0%, #F9E298 33.5%, #FFF3A6 50%, #F9E298 65.5%, #E1B65B 100%), linear-gradient(4.08deg, rgba(170, 133, 62, 0.5) -2.54%, rgba(249, 225, 151, 0.5) 7.02%);
|
|
562
569
|
}
|
|
563
570
|
#main-footer_links {
|