lolololol

components/x-gift-article/package.json

@@ -2,9 +2,9 @@
   "name": "@financial-times/x-gift-article",
   "version": "0.0.0",
   "description": "This module provides gift article form",
-  "main": "dist/GiftArticleWrapper.cjs.js",
-  "browser": "dist/GiftArticleWrapper.es5.js",
-  "module": "dist/GiftArticleWrapper.esm.js",
+  "main": "dist/GiftArticle.cjs.js",
+  "browser": "dist/GiftArticle.es5.js",
+  "module": "dist/GiftArticle.esm.js",
   "style": "dist/GiftArticle.css",
   "scripts": {
     "prepare": "npm run build",
@@ -18,7 +18,7 @@
   "license": "ISC",
   "dependencies": {
     "@financial-times/x-engine": "file:../../packages/x-engine",
-    "@financial-times/x-interaction": "0.0.4",
+    "@financial-times/x-interaction": "0.0.5",
     "classnames": "^2.2.6"
   },
   "devDependencies": {

components/x-gift-article/readme.md

@@ -28,12 +28,12 @@ Component provided by this module expects a map of [gift article properties](#pr
 
 ```jsx
 import React from 'react';
-import { GiftArticleWrapper } from '@financial-times/x-gift-article';
+import { GiftArticle } from '@financial-times/x-gift-article';
 
 // A == B == C
-const a = GiftArticleWrapper(props);
-const b = <GiftArticleWrapper {...props} />;
-const c = React.createElement(GiftArticleWrapper, props);
+const a = GiftArticle(props);
+const b = <GiftArticle {...props} />;
+const c = React.createElement(GiftArticle, props);
 ```
 
 Your app should dispatch a custom event (`xDash.giftArticle.activate`) to activate the gift article form when your app actually displays the form.  

components/x-gift-article/src/Buttons.jsx

@@ -1,5 +1,5 @@
 import { h } from '@financial-times/x-engine';
-import { shareType } from './lib/constants';
+import { ShareType } from './lib/constants';
 import styles from './GiftArticle.css';
 
 const ButtonsClassName = styles.buttons;
@@ -31,7 +31,7 @@ export default ({
 	shareByNativeShare
 }) => {
 
-	if (isGiftUrlCreated || shareType === shareType.nonGift) {
+	if (isGiftUrlCreated || shareType === ShareType.nonGift) {
 
 		if (showNativeShareButton) {
 			return (
@@ -47,12 +47,12 @@ export default ({
 					<button
 						className={ ButtonWithGapClassNames }
 						type="button"
-						onClick={ shareType === shareType.gift ? copyGiftUrl : copyNonGiftUrl }
+						onClick={ shareType === ShareType.gift ? copyGiftUrl : copyNonGiftUrl }
 					>
 						Copy link
 					</button>
 				}
-				<a className={ ButtonClassNames } href={ mailtoUrl } target="_blank" rel="noopener noreferrer" onClick={ shareType === shareType.gift ? emailGiftUrl : emailNonGiftUrl }>Email link</a>
+				<a className={ ButtonClassNames } href={ mailtoUrl } target="_blank" rel="noopener noreferrer" onClick={ shareType === ShareType.gift ? emailGiftUrl : emailNonGiftUrl }>Email link</a>
 			</div>
 		);
 	}

components/x-gift-article/src/GiftArticle.jsx

@@ -22,26 +22,30 @@ const withGiftFormActions = withActions(
 
 		return {
 			showGiftUrlSection() {
-				return updaters.showGiftUrlSection();
+				return updaters.showGiftUrlSection;
 			},
 
-			async showNonGiftUrlSection() {
-				if (!updaters.isNonGiftUrlShortened) {
-					const { url, isShortened } = await api.getShorterUrl(updaters.urls.nonGift);
+			showNonGiftUrlSection() {
+				return async (state) => {
+					if (!state.isNonGiftUrlShortened) {
+						const { url, isShortened } = await api.getShorterUrl(state.urls.nonGift);
+
 						if (isShortened) {
-							updaters.setShortenedNonGiftUrl(url);
+							return updaters.setShortenedNonGiftUrl(url)(state);
 						}
-				}
+					}
 
-				return updaters.showNonGiftUrlSection();
+					return updaters.showNonGiftUrlSection(state);
+				}
 			},
 
 			async createGiftUrl() {
-				const { redemptionUrl, redemptionLimit } = await api.getGiftUrl(articleId);
+				const { redemptionUrl, redemptionLimit } = await api.getGiftUrl(props.articleId);
 
 				if (redemptionUrl) {
 					const { url, isShortened } = await api.getShorterUrl(redemptionUrl);
 					tracking.createGiftLink(url, redemptionUrl);
+
 					return updaters.setGiftUrl(url, redemptionLimit, isShortened);
 				} else {
 					// TODO do something
@@ -81,7 +85,7 @@ const withGiftFormActions = withActions(
 			},
 
 			async activate() {
-				if (isFreeArticle) {
+				if (props.isFreeArticle) {
 					const { url, isShortened } = await api.getShorterUrl(updaters.urls.nonGift);
 
 					if (isShortened) {

components/x-gift-article/src/Message.jsx

@@ -1,5 +1,5 @@
 import { h } from '@financial-times/x-engine';
-import { shareType } from './lib/constants';
+import { ShareType } from './lib/constants';
 import styles from './GiftArticle.css';
 
 const messageClassName = styles.message;
@@ -15,7 +15,7 @@ export default ({ shareType, isGiftUrlCreated, isFreeArticle, giftCredits, month
 		);
 	}
 
-	if (shareType === shareType.gift) {
+	if (shareType === ShareType.gift) {
 		if (giftCredits === 0) {
 			return (
 				<div className={ messageClassName }>
@@ -40,7 +40,7 @@ export default ({ shareType, isGiftUrlCreated, isFreeArticle, giftCredits, month
 		);
 	}
 
-	if (shareType === shareType.nonGift) {
+	if (shareType === ShareType.nonGift) {
 		return (
 			<div className={ messageClassName }>
 			This link can only be read by existing subscribers

components/x-gift-article/src/RadioButtonsSection.jsx

@@ -1,5 +1,5 @@
 import { h } from '@financial-times/x-engine';
-import { shareType } from './lib/constants';
+import { ShareType } from './lib/constants';
 import styles from './GiftArticle.css';
 
 const boldTextClassName = styles.bold;
@@ -18,7 +18,7 @@ export default ({ shareType, showGiftUrlSection, showNonGiftUrlSection }) => (
 			value="giftLink"
 			className="o-forms__radio"
 			id="giftLink"
-			checked={ shareType === shareType.gift }
+			checked={ shareType === ShareType.gift }
 			onChange={ showGiftUrlSection }
 		/>
 
@@ -32,7 +32,7 @@ export default ({ shareType, showGiftUrlSection, showNonGiftUrlSection }) => (
 			value="nonGiftLink"
 			className="o-forms__radio"
 			id="nonGiftLink"
-			checked={ shareType === shareType.nonGift }
+			checked={ shareType === ShareType.nonGift }
 			onChange={ showNonGiftUrlSection }/>
 
 		<label htmlFor="nonGiftLink" className="o-forms__label">

components/x-gift-article/src/Url.jsx

@@ -1,5 +1,5 @@
 import { h } from '@financial-times/x-engine';
-import { shareType.gift } from './lib/constants';
+import { ShareType } from './lib/constants';
 import styles from './GiftArticle.css';
 
 const urlClassNames = [
@@ -14,7 +14,7 @@ export default ({ shareType, isGiftUrlCreated, url, urlType }) => {
 			name={ urlType }
 			value={ url }
 			className={ urlClassNames }
-			disabled={ shareType === shareType.gift && !isGiftUrlCreated }
+			disabled={ shareType === ShareType.gift && !isGiftUrlCreated }
 			readOnly
 		/>
 	);

components/x-gift-article/src/UrlSection.jsx

@@ -1,5 +1,5 @@
 import { h } from '@financial-times/x-engine';
-import { shareType.gift } from './lib/constants';
+import { ShareType } from './lib/constants';
 import Url from './Url';
 import Message from './Message';
 import Buttons from './Buttons';
@@ -31,7 +31,7 @@ export default ({
 	shareByNativeShare
 }) => {
 
-	const hideUrlShareElements = ( giftCredits === 0 && shareType === shareType.gift );
+	const hideUrlShareElements = ( giftCredits === 0 && shareType === ShareType.gift );
 	const showUrlShareElements = !hideUrlShareElements;
 
 	return (

components/x-gift-article/src/lib/constants.js

@@ -1,9 +1,9 @@
-export const shareType = {
+export const ShareType = {
 	gift: 'gift',
 	nonGift: 'nonGift'
 };
 
-export const urlType = {
+export const UrlType = {
 	dummy: 'example-gift-link',
 	gift: 'gift-link',
 	nonGift: 'non-gift-link'

components/x-gift-article/src/lib/updaters.js

@@ -0,0 +1,70 @@
+import { createMailtoUrl } from './share-link-actions';
+import { ShareType, UrlType } from './constants';
+
+const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+export const showGiftUrlSection = (props) => ({
+	shareType: ShareType.gift,
+	url: props.urls.gift || props.urls.dummy,
+	urlType: props.urls.gift ? UrlType.gift : UrlType.dummy,
+	mailtoUrl: props.mailtoUrls.gift,
+	showCopyConfirmation: false
+});
+
+export const showNonGiftUrlSection = (props) => ({
+	shareType: ShareType.nonGift,
+	url: props.urls.nonGift,
+	urlType: UrlType.nonGift,
+	mailtoUrl: props.mailtoUrls.nonGift,
+	showCopyConfirmation: false
+});
+
+export const setGiftUrl = (url, redemptionLimit, isShortened) => {
+	const mailtoUrl = createMailtoUrl(this.articleTitle, url);
+
+	return props => ({
+		url,
+		mailtoUrl,
+		redemptionLimit,
+		isGiftUrlCreated: true,
+		isGiftUrlShortened: isShortened,
+		urlType: UrlType.gift,
+
+		urls: Object.assign(props.urls, {
+			gift: url,
+		}),
+
+		mailtoUrls: Object.assign(props.mailtoUrls, {
+			gift: mailtoUrl,
+		})
+	});
+};
+
+export const setAllowance = (giftCredits, monthlyAllowance, nextRenewalDate) => {
+	const date = new Date(nextRenewalDate);
+	const nextRenewalDateText = `${ monthNames[date.getMonth()] } ${ date.getDate() }`;
+
+	return {
+		giftCredits,
+		monthlyAllowance,
+		nextRenewalDateText
+	};
+};
+
+export const setShortenedNonGiftUrl = (shortenedUrl) => props => {
+	const mailtoUrl = createMailtoUrl(props.articleTitle, shortenedUrl);
+
+	return {
+		url: shortenedUrl,
+		mailtoUrl: mailtoUrl,
+		isNonGiftUrlShortened: true,
+
+		urls: Object.assign(props.urls, {
+			gift: shortenedUrl,
+		}),
+
+		mailtoUrls: Object.assign(props.mailtoUrls, {
+			gift: mailtoUrl,
+		})
+	};
+};

components/x-gift-article/stories/index.js

@@ -1,6 +1,6 @@
-const { GiftArticleWrapper } = require('../');
+const { GiftArticle } = require('../');
 
-exports.component = GiftArticleWrapper;
+exports.component = GiftArticle;
 
 exports.package = require('../package.json');