Remove i18n-calypso moment from marketing-survey. (#36786)

* Remove i18n-calypso moment from marketing-survey.

It was only used in `enriched-survey-data`, which doesn't need
localization. It probably doesn't need `moment` either, but I'm leaving
that for future explorations.

* Make timestamp the last enrichedSurveyData param.

This simplifies code by taking advantage of ES6 optional parameters.

* Drop moment and switch to native dates.

Author: sgomes

client/components/marketing-survey/cancel-auto-renewal-form/index.jsx

@@ -1,12 +1,10 @@
-/** @format */
-
 /**
  * External dependencies
  */
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { localize, moment } from 'i18n-calypso';
+import { localize } from 'i18n-calypso';
 
 /**
  * Internal dependencies
@@ -22,6 +20,10 @@ import { submitSurvey } from 'lib/upgrades/actions';
 import { isDomainRegistration, isPlan } from 'lib/products-values';
 import enrichedSurveyData from 'components/marketing-survey/cancel-purchase-form/enriched-survey-data';
 import PrecancellationChatButton from 'components/marketing-survey/cancel-purchase-form/precancellation-chat-button';
+
+/**
+ * Style dependencies
+ */
 import './style.scss';
 
 class CancelAutoRenewalForm extends Component {
@@ -91,7 +93,7 @@ class CancelAutoRenewalForm extends Component {
 		submitSurvey(
 			'calypso-cancel-auto-renewal',
 			selectedSite.ID,
-			enrichedSurveyData( surveyData, moment(), selectedSite, purchase )
+			enrichedSurveyData( surveyData, selectedSite, purchase )
 		);
 
 		this.props.onClose();

client/components/marketing-survey/cancel-purchase-form/enriched-survey-data.js

@@ -1,28 +1,25 @@
-/** @format */
-
 /**
  * External dependencies
  */
-
 import { get } from 'lodash';
 
-export default function enrichedSurveyData( surveyData, moment, site, purchase ) {
+const DAY_IN_MS = 1000 * 60 * 60 * 24;
+
+export default function enrichedSurveyData( surveyData, site, purchase, timestamp = new Date() ) {
 	const purchaseStartDate = get( purchase, 'subscribedDate', null );
 	const siteStartDate = get( site, 'options.created_at', null );
 	const purchaseId = get( purchase, 'id', null );
 	const productSlug = get( purchase, 'productSlug', null );
 
-	return Object.assign(
-		{
-			purchase: productSlug,
-			purchaseId,
-		},
-		purchaseStartDate && {
-			daysSincePurchase: moment.diff( purchaseStartDate, 'days', true ),
-		},
-		siteStartDate && {
-			daysSinceSiteCreation: moment.diff( siteStartDate, 'days', true ),
-		},
-		surveyData
-	);
+	return {
+		purchase: productSlug,
+		purchaseId,
+		...( purchaseStartDate && {
+			daysSincePurchase: ( new Date( timestamp ) - new Date( purchaseStartDate ) ) / DAY_IN_MS,
+		} ),
+		...( siteStartDate && {
+			daysSinceSiteCreation: ( new Date( timestamp ) - new Date( siteStartDate ) ) / DAY_IN_MS,
+		} ),
+		...surveyData,
+	};
 }

client/components/marketing-survey/cancel-purchase-form/index.jsx

@@ -1,14 +1,11 @@
-/** @format */
-
 /**
  * External dependencies
  */
-
 import PropTypes from 'prop-types';
 import React from 'react';
 import { shuffle } from 'lodash';
 import { connect } from 'react-redux';
-import { localize, moment } from 'i18n-calypso';
+import { localize } from 'i18n-calypso';
 
 /**
  * Internal Dependencies
@@ -251,7 +248,7 @@ class CancelPurchaseForm extends React.Component {
 			submitSurvey(
 				'calypso-remove-purchase',
 				selectedSite.ID,
-				enrichedSurveyData( surveyData, moment(), selectedSite, purchase )
+				enrichedSurveyData( surveyData, selectedSite, purchase )
 			).then( () => {
 				this.setState( {
 					isSubmitting: false,

client/components/marketing-survey/cancel-purchase-form/test/enriched-survey-data.js

@@ -1,9 +1,3 @@
-/**
- * External dependencies
- */
-import { expect } from 'chai';
-import moment from 'moment';
-
 /**
  * Internal dependencies
  */
@@ -13,7 +7,7 @@ jest.mock( 'lib/analytics', () => ( {} ) );
 
 describe( 'enrichedSurveyData', () => {
 	test( 'should duplicate survey data if no site or purchase are provided', () => {
-		expect( enrichedSurveyData( { key: 'value' }, moment() ) ).to.deep.equal( {
+		expect( enrichedSurveyData( { key: 'value' } ) ).toEqual( {
 			key: 'value',
 			purchase: null,
 			purchaseId: null,
@@ -23,7 +17,7 @@ describe( 'enrichedSurveyData', () => {
 	test( 'should add purchase id and slug to survey data if purchase is provided', () => {
 		const site = null;
 		const purchase = { id: 'purchase id', productSlug: 'product slug' };
-		expect( enrichedSurveyData( { key: 'value' }, moment(), site, purchase ).purchase ).to.equal(
+		expect( enrichedSurveyData( { key: 'value' }, site, purchase ).purchase ).toEqual(
 			'product slug'
 		);
 	} );
@@ -32,9 +26,8 @@ describe( 'enrichedSurveyData', () => {
 		const site = null;
 		const purchase = { subscribedDate: '2017-01-09T03:00:00+00:00' };
 		expect(
-			enrichedSurveyData( {}, moment( '2017-01-19T03:00:00+00:00' ), site, purchase )
-				.daysSincePurchase
-		).to.equal( 10 );
+			enrichedSurveyData( {}, site, purchase, '2017-01-19T03:00:00+00:00' ).daysSincePurchase
+		).toEqual( 10 );
 	} );
 
 	test( 'should add daysSinceSiteCreation to survey data when site.options.created_at is provided', () => {
@@ -43,8 +36,7 @@ describe( 'enrichedSurveyData', () => {
 		};
 		const purchase = null;
 		expect(
-			enrichedSurveyData( {}, moment( '2017-01-19T03:00:00+00:00' ), site, purchase )
-				.daysSinceSiteCreation
-		).to.equal( 10 );
+			enrichedSurveyData( {}, site, purchase, '2017-01-19T03:00:00+00:00' ).daysSinceSiteCreation
+		).toEqual( 10 );
 	} );
 } );

client/components/marketing-survey/gsuite-cancel-purchase-dialog/index.jsx

@@ -1,10 +1,8 @@
-/** @format */
-
 /**
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { localize, moment } from 'i18n-calypso';
+import { localize } from 'i18n-calypso';
 import page from 'page';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
@@ -106,7 +104,7 @@ class GSuiteCancelPurchaseDialog extends Component {
 			},
 			type: 'remove',
 		};
-		survey.addResponses( enrichedSurveyData( surveyData, moment(), site, purchase ) );
+		survey.addResponses( enrichedSurveyData( surveyData, site, purchase ) );
 
 		const response = await survey.submit();
 		if ( ! response.success ) {

client/my-sites/site-settings/disconnect-site/confirm.jsx

@@ -26,7 +26,6 @@ class ConfirmDisconnection extends PureComponent {
 		reason: PropTypes.string,
 		text: PropTypes.oneOfType( [ PropTypes.string, PropTypes.arrayOf( PropTypes.string ) ] ),
 		// Provided by HOCs
-		moment: PropTypes.func,
 		purchase: PropTypes.object,
 		siteId: PropTypes.number,
 		siteSlug: PropTypes.string,
@@ -44,7 +43,7 @@ class ConfirmDisconnection extends PureComponent {
 	];
 
 	submitSurvey = () => {
-		const { moment, purchase, reason, site, siteId, text } = this.props;
+		const { purchase, reason, site, siteId, text } = this.props;
 
 		const surveyData = {
 			'why-cancel': {
@@ -59,7 +58,7 @@ class ConfirmDisconnection extends PureComponent {
 		submitSurvey(
 			'calypso-disconnect-jetpack-july2019',
 			siteId,
-			enrichedSurveyData( surveyData, moment(), site, purchase )
+			enrichedSurveyData( surveyData, site, purchase )
 		);
 	};