+
+
+
+
+
+
+
+
Select Storage Plan
+
+ {props.state.storagePlans.map((currentPlan) => (
+
+ ))}
-
-
-
-
-
-
-
Subscribe - {'$' + parseInt(props.state.selectedDetails.amount, 10) / 100} / {props.state.selectedDetails.interval_count} {props.state.selectedDetails.interval}(s)
-
-
-
-
-
-
-
-
-
+
+ {!props.state.loaded ? undefined : props.state.userDetails
+ .activeSubscription ? (
+
+
+ ) : undefined}
-
+
-)
-export default AddStoragePage;
\ No newline at end of file
+
+
+
+
+
+ Subscribe -{" "}
+ {"$" + parseInt(props.state.selectedDetails.amount, 10) / 100} /{" "}
+ {props.state.selectedDetails.interval_count}{" "}
+ {props.state.selectedDetails.interval}(s)
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default AddStoragePage;
diff --git a/src/components/AddStoragePage/index.jsx b/src/components/AddStoragePage/index.jsx
index c9b638a..ae2909c 100644
--- a/src/components/AddStoragePage/index.jsx
+++ b/src/components/AddStoragePage/index.jsx
@@ -1,475 +1,459 @@
import React from "react";
import axios from "../../axiosInterceptor";
-import Swal from "sweetalert2"
+import Swal from "sweetalert2";
import env from "../../enviroment/envFrontEnd";
import AddStoragePage from "./AddStoragePage";
class AddStoragePageContainer extends React.Component {
+ constructor(props) {
+ super(props);
- constructor(props) {
- super(props);
-
- this.state = {
- storagePlans: [],
- loaded: false,
- planSelected: false,
- selectedDetails: {},
- creditCardNumber: "",
- creditCardCVC: "",
- creditCardExpiry: "",
- creditCardNumberError: false,
- creditCardExpiryError: false,
- creditCardCVCError: false,
- userDetails: {},
- loaded: false,
- showCreditCard: false,
- paymentLoading: false,
- }
- }
-
- getUserDetails = () => {
-
- axios.get("/user-service/user-detailed").then((response) => {
-
- this.setState(() => {
- return {
- ...this.state,
- loaded: true,
- userDetails: response.data
- }
- })
- }).catch((err) => {
- console.log("Loading user details error", err);
- })
-
- }
-
- componentDidMount = () => {
-
- this.getUserDetails();
-
- axios.get("/user-service/get-plans").then((response) => {
-
- this.setState(() => {
- return {
- ...this.state,
- storagePlans: response.data.data,
- loaded: true
- }
- })
-
- }).catch((err) => {
- console.log("get plans error");
- })
- }
-
- selectPlan = (plan) => {
-
- if (this.state.planSelected) {
- return this.setState(() => {
- return {
- ...this.state,
- planSelected: false,
- selectedDetails: {},
- showCreditCard: false
- }
- })
- } else {
- this.setState(() => {
- return {
- ...this.state,
- planSelected: true,
- selectedDetails: plan,
- showCreditCard: true
- }
- })
- }
-
-
- }
-
- onChangeCreditCardNumber = (e) => {
-
- let value = e.target.value
-
- if (value.length < this.state.creditCardNumber.length) {
- return this.setState(() => {
- return {
- ...this.state,
- creditCardNumber: value,
- creditCardNumberError: false
- }
- })
- }
-
- const numericalValue = value.replace(/[^0-9.]/g,"")
-
- let reconstucted = '';
-
- for (let currentChar of numericalValue) {
-
- reconstucted += currentChar;
-
- const numericalOnly = reconstucted.replace(/[^0-9.]/g,"")
-
- if (numericalOnly.length !== 16 && numericalOnly.length % 4 === 0) {
- reconstucted += '-'
- } else if (numericalOnly.length >= 16) {
- break;
- }
- }
+ this.state = {
+ storagePlans: [],
+ loaded: false,
+ planSelected: false,
+ selectedDetails: {},
+ creditCardNumber: "",
+ creditCardCVC: "",
+ creditCardExpiry: "",
+ creditCardNumberError: false,
+ creditCardExpiryError: false,
+ creditCardCVCError: false,
+ userDetails: {},
+ loaded: false,
+ showCreditCard: false,
+ paymentLoading: false,
+ };
+ }
+ getUserDetails = () => {
+ axios
+ .get("/user-service/user-detailed")
+ .then((response) => {
this.setState(() => {
- return {
- ...this.state,
- creditCardNumber: reconstucted,
- creditCardNumberError: false
- }
- })
- }
+ return {
+ ...this.state,
+ loaded: true,
+ userDetails: response.data,
+ };
+ });
+ })
+ .catch((err) => {
+ console.log("Loading user details error", err);
+ });
+ };
- onChangeCreditCardCVC = (e) => {
-
- let value = e.target.value
-
- value = value.replace(/[^0-9.]/g,"");
-
- if (value.length >= 4) {
- return;
- }
+ componentDidMount = () => {
+ this.getUserDetails();
+ axios
+ .get("/user-service/get-plans")
+ .then((response) => {
this.setState(() => {
- return {
- ...this.state,
- creditCardCVC: value,
- creditCardCVCError: false
- }
- })
+ return {
+ ...this.state,
+ storagePlans: response.data.data,
+ loaded: true,
+ };
+ });
+ })
+ .catch((err) => {
+ console.log("get plans error");
+ });
+ };
+
+ selectPlan = (plan) => {
+ if (this.state.planSelected) {
+ return this.setState(() => {
+ return {
+ ...this.state,
+ planSelected: false,
+ selectedDetails: {},
+ showCreditCard: false,
+ };
+ });
+ } else {
+ this.setState(() => {
+ return {
+ ...this.state,
+ planSelected: true,
+ selectedDetails: plan,
+ showCreditCard: true,
+ };
+ });
+ }
+ };
+
+ onChangeCreditCardNumber = (e) => {
+ let value = e.target.value;
+
+ if (value.length < this.state.creditCardNumber.length) {
+ return this.setState(() => {
+ return {
+ ...this.state,
+ creditCardNumber: value,
+ creditCardNumberError: false,
+ };
+ });
}
- onChangeCreditCardExpiry = (e) => {
+ const numericalValue = value.replace(/[^0-9.]/g, "");
- let value = e.target.value
+ let reconstucted = "";
- if (value.length < this.state.creditCardExpiry.length) {
- return this.setState(() => {
- return {
- ...this.state,
- creditCardExpiry: value,
- creditCardExpiryError: false,
- }
- })
- }
+ for (let currentChar of numericalValue) {
+ reconstucted += currentChar;
- const numericalValue = value.replace(/[^0-9.]/g,"")
+ const numericalOnly = reconstucted.replace(/[^0-9.]/g, "");
- let reconstucted = ''
+ if (numericalOnly.length !== 16 && numericalOnly.length % 4 === 0) {
+ reconstucted += "-";
+ } else if (numericalOnly.length >= 16) {
+ break;
+ }
+ }
-
- for (let currentChar of numericalValue) {
-
- reconstucted += currentChar;
+ this.setState(() => {
+ return {
+ ...this.state,
+ creditCardNumber: reconstucted,
+ creditCardNumberError: false,
+ };
+ });
+ };
- const numericalOnly = reconstucted.replace(/[^0-9.]/g,"")
+ onChangeCreditCardCVC = (e) => {
+ let value = e.target.value;
- if (numericalOnly.length === 2) {
- reconstucted += '/'
- } else if (numericalOnly.length >= 4) {
- break;
- }
- }
-
+ value = value.replace(/[^0-9.]/g, "");
+
+ if (value.length >= 4) {
+ return;
+ }
+
+ this.setState(() => {
+ return {
+ ...this.state,
+ creditCardCVC: value,
+ creditCardCVCError: false,
+ };
+ });
+ };
+
+ onChangeCreditCardExpiry = (e) => {
+ let value = e.target.value;
+
+ if (value.length < this.state.creditCardExpiry.length) {
+ return this.setState(() => {
+ return {
+ ...this.state,
+ creditCardExpiry: value,
+ creditCardExpiryError: false,
+ };
+ });
+ }
+
+ const numericalValue = value.replace(/[^0-9.]/g, "");
+
+ let reconstucted = "";
+
+ for (let currentChar of numericalValue) {
+ reconstucted += currentChar;
+
+ const numericalOnly = reconstucted.replace(/[^0-9.]/g, "");
+
+ if (numericalOnly.length === 2) {
+ reconstucted += "/";
+ } else if (numericalOnly.length >= 4) {
+ break;
+ }
+ }
+
+ this.setState(() => {
+ return {
+ ...this.state,
+ creditCardExpiry: reconstucted,
+ creditCardExpiryError: false,
+ };
+ });
+ };
+
+ pay = (e) => {
+ e.preventDefault();
+
+ if (this.state.paymentLoading) {
+ return;
+ }
+
+ const creditCardNumber = this.state.creditCardNumber;
+ const creditCardCVC = this.state.creditCardCVC;
+ const creditCardExpiry = this.state.creditCardExpiry;
+
+ let ccNumError = false;
+ let ccCVCError = false;
+ let ccExpiryError = false;
+
+ if (creditCardNumber.replace(/[^0-9.]/g, "").length !== 16) {
+ ccNumError = true;
+ }
+
+ if (creditCardCVC.replace(/[^0-9.]/g, "").length !== 3) {
+ ccCVCError = true;
+ }
+
+ if (creditCardExpiry.replace(/[^0-9.]/g, "").length !== 4) {
+ ccExpiryError = true;
+ }
+
+ if (ccNumError || ccCVCError || ccExpiryError) {
+ return this.setState(() => {
+ return {
+ ...this.state,
+ creditCardNumberError: ccNumError,
+ creditCardExpiryError: ccExpiryError,
+ creditCardCVCError: ccCVCError,
+ };
+ });
+ }
+
+ const data = {
+ card: {
+ number: creditCardNumber,
+ expiry: creditCardExpiry,
+ cvc: creditCardCVC,
+ id: this.state.selectedDetails.id,
+ },
+ };
+
+ Swal.fire({
+ title: "Confirm Payment",
+ text: `Confirm ${
+ "$" + parseInt(this.state.selectedDetails.amount, 10) / 100
+ } payment`,
+ icon: "info",
+ showCancelButton: true,
+ confirmButtonColor: "#3085d6",
+ cancelButtonColor: "#d33",
+ confirmButtonText: "Pay",
+ }).then((result) => {
+ if (result.value) {
this.setState(() => {
- return {
+ return {
+ ...this.state,
+ paymentLoading: true,
+ };
+ });
+
+ axios
+ .post("/user-service/create-subscription", data)
+ .then((response) => {
+ this.setState(() => {
+ return {
...this.state,
- creditCardExpiry: reconstucted,
- creditCardExpiryError: false,
- }
- })
- }
+ paymentLoading: false,
+ };
+ });
- pay = (e) => {
-
- e.preventDefault();
-
- if (this.state.paymentLoading) {
- return;
- }
-
- const creditCardNumber = this.state.creditCardNumber;
- const creditCardCVC = this.state.creditCardCVC;
- const creditCardExpiry = this.state.creditCardExpiry;
-
- let ccNumError = false;
- let ccCVCError = false;
- let ccExpiryError = false;
-
- if (creditCardNumber.replace(/[^0-9.]/g,"").length !== 16) {
- ccNumError = true;
- }
-
- if (creditCardCVC.replace(/[^0-9.]/g,"").length !== 3) {
- ccCVCError = true
- }
-
- if (creditCardExpiry.replace(/[^0-9.]/g,"").length !== 4) {
- ccExpiryError = true;
- }
-
- if (ccNumError || ccCVCError || ccExpiryError) {
- return this.setState(() => {
- return {
- ...this.state,
- creditCardNumberError: ccNumError,
- creditCardExpiryError: ccExpiryError,
- creditCardCVCError: ccCVCError
- }
- })
- }
-
-
- const data = {
- card: {
- number: creditCardNumber,
- expiry: creditCardExpiry,
- cvc: creditCardCVC,
- id: this.state.selectedDetails.id
- }
- }
-
- Swal.fire({
- title: 'Confirm Payment',
- text: `Confirm ${'$' + parseInt(this.state.selectedDetails.amount, 10) / 100} payment`,
- icon: 'info',
- showCancelButton: true,
- confirmButtonColor: '#3085d6',
- cancelButtonColor: '#d33',
- confirmButtonText: 'Pay'
- }).then((result) => {
- if (result.value) {
-
- this.setState(() => {
- return {
- ...this.state,
- paymentLoading: true
- }
- })
-
- axios.post("/user-service/create-subscription", data).then((response) => {
-
- this.setState(() => {
- return {
- ...this.state,
- paymentLoading: false
- }
- })
-
- Swal.fire(
- 'Payment Successful',
- 'Thank You! Payment Was Successful',
- 'success'
- ).then(() => {
- window.location.assign(env.url)
- })
-
- }).catch((e) => {
- console.log("create stripe token err", e);
- this.setState(() => {
- return {
- ...this.state,
- paymentLoading: false
- }
- })
- Swal.fire({
- icon: 'error',
- title: 'Payment Error',
- text: 'Could Not Process Payment',
- })
- })
- }
+ Swal.fire(
+ "Payment Successful",
+ "Thank You! Payment Was Successful",
+ "success"
+ ).then(() => {
+ window.location.assign(env.url);
+ });
})
- }
+ .catch((e) => {
+ console.log("create stripe token err", e);
+ this.setState(() => {
+ return {
+ ...this.state,
+ paymentLoading: false,
+ };
+ });
+ Swal.fire({
+ icon: "error",
+ title: "Payment Error",
+ text: "Could Not Process Payment",
+ });
+ });
+ }
+ });
+ };
- removeSubscription = () => {
-
- Swal.fire({
- title: 'Remove Subscription?',
- text: "This will remove all myDrive files",
- icon: 'warning',
- showCancelButton: true,
- confirmButtonColor: '#3085d6',
- cancelButtonColor: '#d33',
- confirmButtonText: 'Yes, cancel subscription'
- }).then((result) => {
- if (result.value) {
-
- axios.delete('/user-service/remove-subscription').then((response) => {
-
- Swal.fire(
- 'Subscription Removed',
- 'Your subscription for myDrive has been canceled.',
- 'success'
- ).then(() => {
- window.location.assign(env.url)
-
- })
-
- }).catch((err) => {
- console.log("could not remove subscription", err);
- Swal.fire({
- icon: 'error',
- title: 'Remove Subscription Error',
- text: 'Could Not Renive Subscription',
- })
- })
-
-
- }
+ removeSubscription = () => {
+ Swal.fire({
+ title: "Remove Subscription?",
+ text: "This will remove all myDrive files",
+ icon: "warning",
+ showCancelButton: true,
+ confirmButtonColor: "#3085d6",
+ cancelButtonColor: "#d33",
+ confirmButtonText: "Yes, cancel subscription",
+ }).then((result) => {
+ if (result.value) {
+ axios
+ .delete("/user-service/remove-subscription")
+ .then((response) => {
+ Swal.fire(
+ "Subscription Removed",
+ "Your subscription for myDrive has been canceled.",
+ "success"
+ ).then(() => {
+ window.location.assign(env.url);
+ });
})
- }
+ .catch((err) => {
+ console.log("could not remove subscription", err);
+ Swal.fire({
+ icon: "error",
+ title: "Remove Subscription Error",
+ text: "Could Not Renive Subscription",
+ });
+ });
+ }
+ });
+ };
- render() {
+ render() {
+ return (
+
+ //
- return (
+ //
-
- //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
Select Storage Plan
+ //
+ // {this.state.storagePlans.map((currentPlan) =>
)}
+ //
+ //
+ // {!this.state.loaded ? undefined : this.state.userDetails.activeSubscription ?
+ //
+ //
+ //
: undefined}
+ //
+ //
+ //
- //
+ //
+ //
+ //
+ //
+ //
Subscribe - {'$' + parseInt(this.state.selectedDetails.amount, 10) / 100} / {this.state.selectedDetails.interval_count} {this.state.selectedDetails.interval}(s)
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
- //
- //
- //
- //
- //
- //
- //
Select Storage Plan
- //
- // {this.state.storagePlans.map((currentPlan) =>
)}
- //
- //
- // {!this.state.loaded ? undefined : this.state.userDetails.activeSubscription ?
- //
- //
- //
: undefined}
- //
- //
- //
+ // {/* {!this.state.planSelected ?
- //
- //
- //
- //
- //
Subscribe - {'$' + parseInt(this.state.selectedDetails.amount, 10) / 100} / {this.state.selectedDetails.interval_count} {this.state.selectedDetails.interval}(s)
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
+ // //
- // {/* {!this.state.planSelected ?
-
- // //
+ // //
Storage Plans
- // //
Storage Plans
-
- // //
+ // //
- // // {this.state.storagePlans.map((currentPlan) =>
)}
- // //
+ // // {this.state.storagePlans.map((currentPlan) =>
)}
+ // //
- // // {!this.state.loaded ? undefined : this.state.userDetails.activeSubscription ?
- // //
- // //
: undefined}
+ // // {!this.state.loaded ? undefined : this.state.userDetails.activeSubscription ?
+ // //
+ // //
: undefined}
- // //
- //
+ // //
+ //
- //
- //
- //
- //
- //
- //
- //
Select Storage Plan
- //
- // {this.state.storagePlans.map((currentPlan) =>
)}
- //
- //
- //
- //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
Select Storage Plan
+ //
+ // {this.state.storagePlans.map((currentPlan) =>
)}
+ //
+ //
+ //
+ //
- //
-
- // :
+ //
- //
+ // :
- //
- //
- //
+ //
- //
- //
{bytes(+this.state.selectedDetails.metadata.amount)} Plan / {this.state.selectedDetails.interval_count} {this.state.selectedDetails.interval}(s)
- //
+ //
+ //
+ //
- //
- //
- //
+ //
+ //
{bytes(+this.state.selectedDetails.metadata.amount)} Plan / {this.state.selectedDetails.interval_count} {this.state.selectedDetails.interval}(s)
+ //
- //
- //
- //
- //
+ //
+ //
+ //
- //
- //
- //
+ //
+ //
+ //
+ //
- //
-
- // } */}
+ //
+ //
+ //
- //
-
- )
- }
+ //
+
+ // } */}
+
+ //
+ );
+ }
}
-export default AddStoragePageContainer;
\ No newline at end of file
+export default AddStoragePageContainer;
diff --git a/src/components/FolderTree/FolderTree.jsx b/src/components/FolderTree/FolderTree.jsx
index 91f8794..1d97329 100644
--- a/src/components/FolderTree/FolderTree.jsx
+++ b/src/components/FolderTree/FolderTree.jsx
@@ -21,7 +21,7 @@ const FolderTree = (props) => (
@@ -64,7 +64,7 @@ class LeftSection extends React.Component {
) : (
@@ -97,11 +97,11 @@ class LeftSection extends React.Component {
@@ -862,10 +862,10 @@ class SettingsPageContainer extends React.Component {
BACK TO FILES
{" "}
Earn more free space. Get an additional
@@ -1265,9 +1265,9 @@ class SettingsPageContainer extends React.Component {
Invite Friends