Introduce a test drive mode into the onboarding process

changelog/add-test-drive-mode

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Enhance Sandbox mode onboarding by skipping KYC and making it fully automated for all supported countries.

client/components/account-status/index.js

@@ -60,10 +60,12 @@ const AccountStatusError = () => {
 
 const AccountStatusDetails = ( props ) => {
 	const { accountStatus, accountFees } = props;
-	const accountLink = addQueryArgs( accountStatus.accountLink, {
-		from: 'WCPAY_ACCOUNT_DETAILS',
-		source: 'wcpay-account-details',
-	} );
+	const accountLink = accountStatus.accountLink
+		? addQueryArgs( accountStatus.accountLink, {
+				from: 'WCPAY_ACCOUNT_DETAILS',
+				source: 'wcpay-account-details',
+		  } )
+		: false;
 	const cardTitle = (
 		<>
 			<FlexItem className={ 'account-details' }>
@@ -78,21 +80,23 @@ const AccountStatusDetails = ( props ) => {
 					}
 				/>
 			</FlexBlock>
-			<FlexItem className={ 'edit-details' }>
-				<Button
-					variant={ 'link' }
-					onClick={ () =>
-						recordEvent( 'wcpay_account_details_link_clicked', {
-							from: 'WCPAY_ACCOUNT_DETAILS',
-							source: 'wcpay-account-details',
-						} )
-					}
-					href={ accountLink }
-					target={ '_blank' }
-				>
-					{ __( 'Edit details', 'woocommerce-payments' ) }
-				</Button>
-			</FlexItem>
+			{ accountLink && (
+				<FlexItem className={ 'edit-details' }>
+					<Button
+						variant={ 'link' }
+						onClick={ () =>
+							recordEvent( 'wcpay_account_details_link_clicked', {
+								from: 'WCPAY_ACCOUNT_DETAILS',
+								source: 'wcpay-account-details',
+							} )
+						}
+						href={ accountLink }
+						target={ '_blank' }
+					>
+						{ __( 'Edit details', 'woocommerce-payments' ) }
+					</Button>
+				</FlexItem>
+			) }
 		</>
 	);
 
@@ -104,6 +108,7 @@ const AccountStatusDetails = ( props ) => {
 				<PaymentsStatus
 					paymentsEnabled={ accountStatus.paymentsEnabled }
 					accountStatus={ accountStatus.status }
+					iconSize={ 24 }
 				/>
 			</AccountStatusItem>
 			<AccountStatusItem
@@ -117,6 +122,7 @@ const AccountStatusDetails = ( props ) => {
 					poComplete={
 						accountStatus.progressiveOnboarding.isComplete
 					}
+					iconSize={ 24 }
 				/>
 			</AccountStatusItem>
 			<AccountTools />

client/components/account-status/test/__snapshots__/index.js.snap

@@ -1,5 +1,160 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`AccountStatus does not render edit details when no account link 1`] = `
+<div>
+  <div
+    class="components-surface components-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
+    data-wp-c16t="true"
+    data-wp-component="Card"
+  >
+    <div
+      class="css-mgwsf4-View-Content em57xhy0"
+    >
+      <div
+        class="components-flex components-card__header components-card-header woocommerce-account-status__header css-1g7xfrj-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
+        data-wp-c16t="true"
+        data-wp-component="CardHeader"
+      >
+        <div
+          class="components-flex-item account-details css-mw3lhz-View-Item-sx-Base em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="FlexItem"
+        >
+          Account details
+        </div>
+        <div
+          class="components-flex-item components-flex-block account-status css-14wzr73-View-Item-sx-Base-block em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="FlexBlock"
+        >
+          <span
+            class="chip chip-success"
+          >
+            Complete
+          </span>
+        </div>
+      </div>
+      <div
+        class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
+        data-wp-c16t="true"
+        data-wp-component="CardBody"
+      >
+        <div
+          class="components-flex woocommerce-account-status-item css-h2ogiv-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
+        >
+          <div
+            class="components-flex-item item-label css-mw3lhz-View-Item-sx-Base em57xhy0"
+            data-wp-c16t="true"
+            data-wp-component="FlexItem"
+          >
+            Payments:
+          </div>
+          <div
+            class="components-flex-item components-flex-block item-value css-14wzr73-View-Item-sx-Base-block em57xhy0"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
+          >
+            <span
+              class="account-status__info__green"
+            >
+              <svg
+                class="gridicon gridicons-checkmark-circle"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g>
+                  <path
+                    d="M11 17.768l-4.884-4.884 1.768-1.768L11 14.232l8.658-8.658A9.98 9.98 0 0012 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10a9.94 9.94 0 00-.966-4.266L11 17.768z"
+                  />
+                </g>
+              </svg>
+              Enabled
+            </span>
+          </div>
+        </div>
+        <div
+          class="components-flex woocommerce-account-status-item css-h2ogiv-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
+        >
+          <div
+            class="components-flex-item item-label css-mw3lhz-View-Item-sx-Base em57xhy0"
+            data-wp-c16t="true"
+            data-wp-component="FlexItem"
+          >
+            Deposits:
+          </div>
+          <div
+            class="components-flex-item components-flex-block item-value css-14wzr73-View-Item-sx-Base-block em57xhy0"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
+          >
+            <span
+              class="account-status__info__green"
+            >
+              <svg
+                class="gridicon gridicons-checkmark-circle"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g>
+                  <path
+                    d="M11 17.768l-4.884-4.884 1.768-1.768L11 14.232l8.658-8.658A9.98 9.98 0 0012 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10a9.94 9.94 0 00-.966-4.266L11 17.768z"
+                  />
+                </g>
+              </svg>
+              Automatic
+            </span>
+          </div>
+        </div>
+        <div
+          class="account-fees"
+        >
+          <hr
+            aria-orientation="horizontal"
+            class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
+            data-wp-c16t="true"
+            data-wp-component="CardDivider"
+            role="separator"
+          />
+          <h4>
+            Active discounts
+          </h4>
+        </div>
+        <p>
+          Card transactions
+          :
+        </p>
+        Euro 
+        (EUR) 
+        <s>
+          2.9% + 0,00 € per transaction
+        </s>
+         2.9% + 0,30 € per transaction
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+      data-wp-c16t="true"
+      data-wp-component="Elevation"
+    />
+    <div
+      aria-hidden="true"
+      class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+      data-wp-c16t="true"
+      data-wp-component="Elevation"
+    />
+  </div>
+</div>
+`;
+
 exports[`AccountStatus renders account tools 1`] = `
 <div>
   <div
@@ -40,7 +195,7 @@ exports[`AccountStatus renders account tools 1`] = `
         >
           <a
             class="components-button is-link"
-            href="?from=WCPAY_ACCOUNT_DETAILS&source=wcpay-account-details"
+            href="https://stripe.example.com/account?from=WCPAY_ACCOUNT_DETAILS&source=wcpay-account-details"
             target="_blank"
           >
             Edit details
@@ -276,7 +431,7 @@ exports[`AccountStatus renders normal status 1`] = `
         >
           <a
             class="components-button is-link"
-            href="?from=WCPAY_ACCOUNT_DETAILS&source=wcpay-account-details"
+            href="https://stripe.example.com/account?from=WCPAY_ACCOUNT_DETAILS&source=wcpay-account-details"
             target="_blank"
           >
             Edit details

client/components/account-status/test/index.js

@@ -43,6 +43,48 @@ describe( 'AccountStatus', () => {
 		const { container: accountStatus } = renderAccountStatus(
 			{
 				status: 'complete',
+				accountLink: 'https://stripe.example.com/account',
+				paymentsEnabled: 1,
+				deposits: {
+					status: 'enabled',
+					interval: 'weekly',
+				},
+				progressiveOnboarding: {
+					isEnabled: false,
+					isComplete: false,
+				},
+			},
+			[
+				{
+					payment_method: 'card',
+					fee: {
+						base: {
+							currency: 'EUR',
+							percentage_rate: 0.029,
+							fixed_rate: 0.3,
+						},
+						discount: [
+							{
+								end_time: null,
+								volume_allowance: null,
+								volume_currency: null,
+								current_volume: null,
+								percentage_rate: 0.029,
+								fixed_rate: 30,
+							},
+						],
+					},
+				},
+			]
+		);
+		expect( accountStatus ).toMatchSnapshot();
+	} );
+
+	test( 'does not render edit details when no account link', () => {
+		const { container: accountStatus } = renderAccountStatus(
+			{
+				status: 'complete',
+				accountLink: false,
 				paymentsEnabled: 1,
 				deposits: {
 					status: 'enabled',
@@ -85,6 +127,7 @@ describe( 'AccountStatus', () => {
 		const { container: accountStatus } = renderAccountStatus(
 			{
 				status: 'complete',
+				accountLink: 'https://stripe.example.com/account',
 				paymentsEnabled: 1,
 				deposits: {
 					status: 'enabled',