|
1 | | -import React, { Fragment } from "react"; |
2 | | -import Media from "react-media"; |
3 | | -import { Row, Col } from "reactstrap"; |
4 | | -import { Link } from "react-router-dom"; |
| 1 | +import React from "react"; |
| 2 | +import { Route, Redirect } from 'react-router-dom'; |
5 | 3 |
|
6 | | -import { PinkDiv, H3Text } from './successStoriesStyledComponents'; |
7 | | -import TextImage from './textImage'; |
8 | | -import ImageText from './imageText'; |
9 | | -import MobileStoryView from './mobileStoryView'; |
10 | | -import JoshCarousel from '../home/carousel'; |
11 | | -import previousSvg from "../../assets/images/previous.svg"; |
12 | | -import nextSvg from "../../assets/images/next.svg"; |
13 | | - |
14 | | -const FFD = (props) => { |
15 | | - let storyTitles = ["Freedom from Diabetes"] |
16 | | - |
17 | | - const carouseItems = storyTitles.map(item => { |
18 | | - return ( |
19 | | - <div class="border-right border-muted text-center"> |
20 | | - <Col> |
21 | | - <Link to="success_stories" className="text-dark"> {item} </Link> |
22 | | - </Col> |
23 | | - </div> |
24 | | - ) |
25 | | - }) |
26 | | - |
27 | | - const NextArrow = (props) => { |
28 | | - const { className, onClick } = props; |
29 | | - return ( |
30 | | - <img |
31 | | - src={nextSvg} |
32 | | - className={className} |
33 | | - onClick={onClick} |
34 | | - alt="Next" |
35 | | - /> |
36 | | - ); |
37 | | - } |
38 | | - |
39 | | - const PrevArrow = (props) => { |
40 | | - const { className, onClick } = props; |
41 | | - return ( |
42 | | - <img |
43 | | - src={previousSvg} |
44 | | - className={className} |
45 | | - onClick={onClick} |
46 | | - alt="Previous" |
47 | | - /> |
48 | | - ); |
49 | | - } |
50 | | - |
51 | | - const settings = { |
52 | | - dots: false, |
53 | | - slidesToShow: 1, |
54 | | - slidesToScroll: 1, |
55 | | - arrows: true, |
56 | | - nextArrow: <NextArrow />, |
57 | | - prevArrow: <PrevArrow />, |
58 | | - responsive: [{ |
59 | | - breakpoint: 600, |
60 | | - settings: { |
61 | | - slidesToShow: 1, |
62 | | - slidesToScroll: 1, |
63 | | - initialSlide: 0, |
64 | | - arrows: false, |
65 | | - dots: true |
66 | | - } |
67 | | - }, |
68 | | - { |
69 | | - breakpoint: 330, |
70 | | - settings: { |
71 | | - slidesToShow: 1, |
72 | | - slidesToScroll: 1, |
73 | | - initialSlide: 0, |
74 | | - arrows: false, |
75 | | - dots: true |
76 | | - |
77 | | - } |
78 | | - }] |
79 | | - } |
80 | | - |
81 | | - const carouselMobile = <Row className="w-80 m-auto justify-content-around text-danger pt-2"> |
82 | | - <Col> |
83 | | - <JoshCarousel items={carouseItems} settings={settings} /> |
84 | | - </Col> |
85 | | - </Row> |
86 | | - |
87 | | - const carouselWeb = <Row className="w-75 m-auto justify-content-around text-danger pt-2"> |
88 | | - <Col> |
89 | | - <JoshCarousel items={carouseItems} settings={settings} /> |
90 | | - </Col> |
91 | | - </Row> |
| 4 | +import * as routes from '../../routeConstants'; |
| 5 | +import SuccessStoriesLayout from "./successStoriesLayout.js"; |
92 | 6 |
|
| 7 | +const SuccessStories = (props) => { |
93 | 8 | return ( |
94 | | - <Media query="(max-width: 900px)"> |
95 | | - {matches => |
96 | | - matches ? ( |
97 | | - <Fragment> |
98 | | - <PinkDiv /> |
99 | | - {carouselMobile} |
100 | | - <H3Text className="mt-5 text-center mb-5" color="#0F0F0F"> {props.title} </H3Text> |
101 | | - {props.contentKeys.map((key) => { |
102 | | - return <MobileStoryView text={props[key].text} subHeading={props[key].subHeading} image={props[key].image} /> |
103 | | - })} |
104 | | - </Fragment> |
105 | | - ) : ( |
106 | | - <Fragment> |
107 | | - <PinkDiv /> |
108 | | - {carouselWeb} |
109 | | - <H3Text className="mt-5 text-center mb-5" color="#CF4338"> {props.title} </H3Text> |
110 | | - {props.contentKeys.map((key, index) => { |
111 | | - if (index % 2 === 0) { |
112 | | - return <TextImage text={props[key].text} subHeading={props[key].subHeading} image={props[key].image} /> |
113 | | - } |
114 | | - else |
115 | | - return <ImageText text={props[key].text} subHeading={props[key].subHeading} image={props[key].image} /> |
116 | | - })} |
117 | | - </Fragment> |
118 | | - ) |
119 | | - } |
120 | | - </Media> |
| 9 | + <> |
| 10 | + <Route path={`${routes.SUCCESS_STORIES_URL}/:story`} component={SuccessStoriesLayout} /> |
| 11 | + {props.location.pathname === routes.SUCCESS_STORIES_URL && <Redirect to={`${routes.SUCCESS_STORIES_URL}/ffd`} from={routes.SUCCESS_STORIES_URL} />} |
| 12 | + </> |
121 | 13 | ) |
122 | 14 | } |
123 | 15 |
|
124 | | -FFD.defaultProps = { |
125 | | - title: 'ENABLING STORIES OF FREEDOM', |
126 | | - contentKeys: ['summary', 'challenge', 'insight', 'joshEdge', 'impact'], |
127 | | - summary: { |
128 | | - subHeading: 'SUMMARY', |
129 | | - image: 'summary', |
130 | | - text: <><p><strong>The International Diabetes Federation projects that the number of diabetes patients in the South East Asian region will double by 2045. Currently, 8.8% of the Indian adult population suffers from diabetes. This is cause for extreme concern.</strong></p><p>Traditionally incurable, diabetes is a deeply rooted health concern making millions miserable. But when the best of tech and medicine come together, there's hope for radical improvement. Freedom From Diabetes (FFD), launched in 2013 by Dr. Pramod Tripathi has a singular aim: not just cure diabetes, but eliminate it completely. The program has 18,000 diabetes-free success stories to its credit and this number is only growing with each passing year. With a steadily increasing number of medical practitioners on board, FFD, headquartered in Pune, now has a network in more than 10 Indian cities. </p> </> |
131 | | - }, |
132 | | - |
133 | | - challenge: { |
134 | | - subHeading: 'CHALLENGE', |
135 | | - image: 'challenge', |
136 | | - text: <p>The number of patients grew incrementally in the first two years of the program, and by 2015 there were a few thousand knocking on FFD’s door. The biggest challenge was maintaining patient records offline, and the need for digitisation meant only one thing: tech intervention. The first version of the CRM and mobile application was built, but it failed at scale. Both doctors and patients were using this app, at the cost of a high turnaround time, major performance lags and extremely poor customer experience.</p> |
137 | | - }, |
138 | | - insight: { |
139 | | - subHeading: 'INSIGHT', |
140 | | - image: 'insight', |
141 | | - text: <p>Revamping the initial applications was not possible, since it had been built on a legacy tech stack that was not connected to FFD’s other digital systems. A new version of the app backed by new age tech was the need of the hour. </p> |
142 | | - }, |
143 | | - |
144 | | - joshEdge: { |
145 | | - subHeading: 'THE JOSH EDGE', |
146 | | - image: 'joshEdge', |
147 | | - text: <p>Keeping the rescue mission philosophy in mind, the Josh team started building the app from scratch. We built the CRM system on the backs of Trailblazer, Ruby on Rails, Mongo and ElasticSearch, along with Android and iOS compatibility. The foundation of the application was implemented one step at a time. A centrally accessible database was also created to enable seamless integration of patient records with the existing website & marketing systems. The team also introduced a call tracker for the in house marketing teams to stay updated in real time. A chat module was also rolled out to enable round the clock communication between doctors and patients. The app ensured that patients could upload blood test reports every 3 to 4 hours. The doctors were also notified about patient behaviour in real time, ensuring a transparent, efficient treatment program. Designed to scale up with the program, the app is a huge success with all stakeholders, new and old! </p> |
148 | | - }, |
149 | | - |
150 | | - impact: { |
151 | | - subHeading: 'IMPACT', |
152 | | - image: 'impact', |
153 | | - text: <><p>Reduced turnaround time. Doctor-patient interactions in seconds, not hours. </p> <p>No wait time for patients, with a provision to share reports and readings digitally.</p> <p>More than 18,000 active users.</p><p>Real time mapping of blood sugar and insulin levels.</p><p>Improved end customer experience with maximum operational efficiency and no performance lags.</p></> |
154 | | - } |
155 | | -} |
156 | | - |
157 | | -export default FFD; |
| 16 | +export default SuccessStories; |
0 commit comments