@sikka/hawa 0.0.15 → 0.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/hawa-publish-push.yml +1 -0
- package/es/index.es.js +1 -1
- package/lib/index.js +1 -1
- package/package.json +1 -1
- package/src/blocks/Account/UserProfileForm.js +79 -43
- package/src/blocks/Account/UserSettingsForm.js +7 -2
- package/src/blocks/AuthForms/SignInForm.js +5 -1
- package/src/blocks/AuthForms/SignUpForm.js +6 -2
- package/src/blocks/Payment/ChargeWalletForm.js +29 -20
- package/src/elements/HawaAlert.js +1 -24
- package/src/elements/HawaTable.js +39 -0
- package/src/elements/HawaTypography.js +0 -19
- package/src/elements/OfflineBanner.js +20 -0
- package/src/elements/index.js +2 -0
- package/src/layout/HawaDialog.js +45 -0
- package/src/layout/index.js +1 -0
- package/storybook-static/{0.f47eb24a4893a96ec307.manager.bundle.js → 0.42b12e88e2d7c13fc83c.manager.bundle.js} +1 -1
- package/storybook-static/{4.0fcda1281dc1961dbe94.manager.bundle.js → 4.6efb4495a449edfbd0b0.manager.bundle.js} +2 -2
- package/storybook-static/{4.0fcda1281dc1961dbe94.manager.bundle.js.LICENSE.txt → 4.6efb4495a449edfbd0b0.manager.bundle.js.LICENSE.txt} +0 -0
- package/storybook-static/{5.63ab4f94d50a3acf080d.manager.bundle.js → 5.fdf5c7287259585b43a3.manager.bundle.js} +1 -1
- package/storybook-static/{6.704d1e8d.iframe.bundle.js → 6.19c48a8c.iframe.bundle.js} +1 -1
- package/storybook-static/{6.a6d45262f7e98f3f18d3.manager.bundle.js → 6.8f7b9049856bdace5643.manager.bundle.js} +2 -2
- package/storybook-static/{6.a6d45262f7e98f3f18d3.manager.bundle.js.LICENSE.txt → 6.8f7b9049856bdace5643.manager.bundle.js.LICENSE.txt} +0 -0
- package/storybook-static/{7.097710753af9a1c41b80.manager.bundle.js → 7.dfc01154563c92ef9ccf.manager.bundle.js} +1 -1
- package/storybook-static/{8.76c3cbf398692028e834.manager.bundle.js → 8.c1928a9f13347c159613.manager.bundle.js} +1 -1
- package/storybook-static/iframe.html +1 -1
- package/storybook-static/index.html +1 -1
- package/storybook-static/main.c1b22dad.iframe.bundle.js +1 -0
- package/storybook-static/main.d9e1c87c8c22202eed3c.manager.bundle.js +1 -0
- package/storybook-static/{runtime~main.c8dac23bc753439736f0.manager.bundle.js → runtime~main.1373976137528887a7ad.manager.bundle.js} +1 -1
- package/storybook-static/{runtime~main.f1ebae9b.iframe.bundle.js → runtime~main.2c77505f.iframe.bundle.js} +1 -1
- package/storybook-static/vendors~main.41b22d5a0c6132a028f1.manager.bundle.js +2 -0
- package/storybook-static/{vendors~main.a697e07137d366f95f76.manager.bundle.js.LICENSE.txt → vendors~main.41b22d5a0c6132a028f1.manager.bundle.js.LICENSE.txt} +0 -0
- package/storybook-static/vendors~main.78f2cf4f.iframe.bundle.js +76 -0
- package/storybook-static/{vendors~main.b4186832.iframe.bundle.js.LICENSE.txt → vendors~main.78f2cf4f.iframe.bundle.js.LICENSE.txt} +0 -0
- package/storybook-static/vendors~main.78f2cf4f.iframe.bundle.js.map +1 -0
- package/src/stories/BlocksStories/Account/UserProfile.stories.js +0 -21
- package/src/stories/BlocksStories/Account/UserSettings.stories.js +0 -55
- package/src/stories/BlocksStories/Auth/NewPassword.stories.js +0 -61
- package/src/stories/BlocksStories/Auth/ResetPassword.stories.js +0 -58
- package/src/stories/BlocksStories/Auth/SignIn.stories.js +0 -89
- package/src/stories/BlocksStories/Auth/SignUp.stories.js +0 -91
- package/src/stories/BlocksStories/Payment/ChargeWallet.stories.js +0 -30
- package/src/stories/BlocksStories/Payment/PayWithCreditCard.stories.js +0 -37
- package/src/stories/BlocksStories/Payment/PayWithWallet.stories.js +0 -17
- package/src/stories/BlocksStories/Payment/PaymentSelection.stories.js +0 -60
- package/src/stories/BlocksStories/Pricing/BillingPlans.stories.js +0 -63
- package/src/stories/BlocksStories/Pricing/LandingPlans.stories.js +0 -63
- package/src/stories/ElementsStories/AdaptiveButton.stories.js +0 -51
- package/src/stories/ElementsStories/Alert.stories.js +0 -41
- package/src/stories/ElementsStories/InputLabel.stories.js +0 -13
- package/src/stories/ElementsStories/ItemCard.stories.js +0 -18
- package/src/stories/ElementsStories/LogoButtons.stories.js +0 -73
- package/src/stories/ElementsStories/PricingCard.stories.js +0 -91
- package/src/stories/ElementsStories/RadioSelector.stories.js +0 -36
- package/src/stories/ElementsStories/SettingsRow.stories.js +0 -63
- package/src/stories/ElementsStories/TextField.stories.js +0 -49
- package/src/stories/Introduction.stories.mdx +0 -229
- package/src/stories/LayoutStories/AppBar.stories.js +0 -29
- package/src/stories/LayoutStories/AppLayout.stories.js +0 -52
- package/src/stories/LayoutStories/Box.stories.js +0 -36
- package/storybook-static/main.66955578.iframe.bundle.js +0 -1
- package/storybook-static/main.ac6e4b72b033097dad76.manager.bundle.js +0 -1
- package/storybook-static/vendors~main.a697e07137d366f95f76.manager.bundle.js +0 -2
- package/storybook-static/vendors~main.b4186832.iframe.bundle.js +0 -76
- package/storybook-static/vendors~main.b4186832.iframe.bundle.js.map +0 -1
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vendors~main.78f2cf4f.iframe.bundle.js","sources":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;A","sourceRoot":""}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { UserProfileForm } from "../../../blocks/Account";
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: "Blocks/Account/User Profile",
|
|
6
|
-
component: [UserProfile],
|
|
7
|
-
argTypes: {}
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
const ProfileTemplate = (args) => {
|
|
11
|
-
return <UserProfileForm {...args} />;
|
|
12
|
-
};
|
|
13
|
-
export const UserProfile = ProfileTemplate.bind({});
|
|
14
|
-
UserProfile.args = {
|
|
15
|
-
viaGoogle: true,
|
|
16
|
-
viaGithub: true,
|
|
17
|
-
viaTwitter: true,
|
|
18
|
-
showError: false,
|
|
19
|
-
errorTitle: "Error",
|
|
20
|
-
errorText: "Something went wrong"
|
|
21
|
-
};
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { UserSettingsForm } from "../../../blocks/Account";
|
|
3
|
-
import { HawaSettingsRow } from "../../../elements";
|
|
4
|
-
|
|
5
|
-
export default {
|
|
6
|
-
title: "Blocks/Account/User Settings",
|
|
7
|
-
component: UserSettingsForm,
|
|
8
|
-
argTypes: {
|
|
9
|
-
theme: {
|
|
10
|
-
options: ["primary", "secondary", "default"],
|
|
11
|
-
control: { type: "select" }
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
export const UserSettings = (args) => {
|
|
16
|
-
return (
|
|
17
|
-
<UserSettingsForm {...args}>
|
|
18
|
-
<HawaSettingsRow settingsType="checkbox" settingsLabel="Hide Watermark" />
|
|
19
|
-
<HawaSettingsRow
|
|
20
|
-
settingsType="text"
|
|
21
|
-
placeholder="Your handle"
|
|
22
|
-
settingsLabel="Custom Handle"
|
|
23
|
-
/>
|
|
24
|
-
<HawaSettingsRow
|
|
25
|
-
handleChange={(e) => console.log("changing to ", e)}
|
|
26
|
-
settingsType="radio"
|
|
27
|
-
defaultValue="sar"
|
|
28
|
-
options={[
|
|
29
|
-
{ value: "sar", label: "SAR" },
|
|
30
|
-
{ value: "usd", label: "USD" }
|
|
31
|
-
]}
|
|
32
|
-
settingsLabel="Currency"
|
|
33
|
-
/>
|
|
34
|
-
<HawaSettingsRow
|
|
35
|
-
handleChange={(e) => console.log("changing to ", e)}
|
|
36
|
-
settingsType="radio"
|
|
37
|
-
defaultValue="en"
|
|
38
|
-
options={[
|
|
39
|
-
{ value: "en", label: "English" },
|
|
40
|
-
{ value: "ar", label: "Arabic" }
|
|
41
|
-
]}
|
|
42
|
-
settingsLabel="Language"
|
|
43
|
-
/>
|
|
44
|
-
<HawaSettingsRow
|
|
45
|
-
settingsType="boolean"
|
|
46
|
-
placeholder="Your handle"
|
|
47
|
-
settingsLabel="Show Analytics"
|
|
48
|
-
/>
|
|
49
|
-
</UserSettingsForm>
|
|
50
|
-
);
|
|
51
|
-
};
|
|
52
|
-
UserSettings.args = {
|
|
53
|
-
theme: "primary",
|
|
54
|
-
title: "red"
|
|
55
|
-
};
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { NewPasswordForm } from "../../../blocks/AuthForms";
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: "Blocks/Auth/New Password",
|
|
6
|
-
component: [NewPasswordForm],
|
|
7
|
-
argTypes: {
|
|
8
|
-
showError: {
|
|
9
|
-
default: false,
|
|
10
|
-
control: "boolean",
|
|
11
|
-
description: "Display the error when auth fails",
|
|
12
|
-
table: { defaultValue: { summary: true } }
|
|
13
|
-
},
|
|
14
|
-
errorTitle: {
|
|
15
|
-
default: " ",
|
|
16
|
-
control: "text",
|
|
17
|
-
description: "The error text for the auth failure",
|
|
18
|
-
table: { defaultValue: { summary: "" } }
|
|
19
|
-
},
|
|
20
|
-
errorText: {
|
|
21
|
-
default: "Something went wrong",
|
|
22
|
-
control: "text",
|
|
23
|
-
description: "The error text for the auth failure",
|
|
24
|
-
table: { defaultValue: { summary: "Something went wrong" } }
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
const NewPasswordTemplate = (args) => {
|
|
30
|
-
return (
|
|
31
|
-
<NewPasswordForm
|
|
32
|
-
{...args}
|
|
33
|
-
texts={{
|
|
34
|
-
emailLabel: "Email",
|
|
35
|
-
emailPlaceholder: "Enter your email",
|
|
36
|
-
emailRequiredText: "Email is required",
|
|
37
|
-
passwordPlaceholder: "Enter password",
|
|
38
|
-
updatePassword: "Update Password",
|
|
39
|
-
passwordRequiredText: "Password is required",
|
|
40
|
-
passwordLabel: "Choose new password",
|
|
41
|
-
confirmPasswordPlaceholder: "Confirm password",
|
|
42
|
-
confirmPasswordLabel: "Confirm",
|
|
43
|
-
confirmPasswordRequiredText: "Confirmation is required",
|
|
44
|
-
passwordMatchError: "Password doesn't match",
|
|
45
|
-
forgotPasswordText: "Forgot password?",
|
|
46
|
-
newUserText: "New user?",
|
|
47
|
-
signUpText: "Sign up",
|
|
48
|
-
signInText: "Sign in",
|
|
49
|
-
googleButtonLabel: "Sign in with Google",
|
|
50
|
-
githubButtonLabel: "Sign in with Github",
|
|
51
|
-
twitterButtonLabel: "Sign in with Twitter"
|
|
52
|
-
}}
|
|
53
|
-
error={args.showError}
|
|
54
|
-
/>
|
|
55
|
-
);
|
|
56
|
-
};
|
|
57
|
-
export const NewPassword = NewPasswordTemplate.bind({});
|
|
58
|
-
NewPassword.args = {
|
|
59
|
-
showError: false,
|
|
60
|
-
passwordChanged: false
|
|
61
|
-
};
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { ResetPasswordForm } from "../../../blocks/AuthForms";
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: "Blocks/Auth/Reset Password",
|
|
6
|
-
component: [ResetPasswordForm],
|
|
7
|
-
argTypes: {
|
|
8
|
-
showError: {
|
|
9
|
-
default: false,
|
|
10
|
-
control: "boolean",
|
|
11
|
-
description: "Display the error when auth fails",
|
|
12
|
-
table: { defaultValue: { summary: true } }
|
|
13
|
-
},
|
|
14
|
-
errorTitle: {
|
|
15
|
-
default: " ",
|
|
16
|
-
control: "text",
|
|
17
|
-
description: "The error text for the auth failure",
|
|
18
|
-
table: { defaultValue: { summary: "" } }
|
|
19
|
-
},
|
|
20
|
-
errorText: {
|
|
21
|
-
default: "Something went wrong",
|
|
22
|
-
control: "text",
|
|
23
|
-
description: "The error text for the auth failure",
|
|
24
|
-
table: { defaultValue: { summary: "Something went wrong" } }
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
const ResetPasswordTemplate = (args) => {
|
|
30
|
-
return (
|
|
31
|
-
<ResetPasswordForm
|
|
32
|
-
error={args.showError}
|
|
33
|
-
texts={{
|
|
34
|
-
emailLabel: "Email",
|
|
35
|
-
emailPlaceholder: "Enter your email",
|
|
36
|
-
emailRequiredText: "Email is required",
|
|
37
|
-
emailInvalidText: "Invalid email address",
|
|
38
|
-
passwordLabel: "Password",
|
|
39
|
-
resetPassword: "Reset Password",
|
|
40
|
-
passwordRequiredText: "Password is required",
|
|
41
|
-
forgotPasswordText: "Forgot password?",
|
|
42
|
-
newUserText: "New user?",
|
|
43
|
-
signUpText: "Sign up",
|
|
44
|
-
signInText: "Sign in",
|
|
45
|
-
googleButtonLabel: "Sign in with Google",
|
|
46
|
-
githubButtonLabel: "Sign in with Github",
|
|
47
|
-
twitterButtonLabel: "Sign in with Twitter"
|
|
48
|
-
}}
|
|
49
|
-
{...args}
|
|
50
|
-
handleResetPassword={(e) => console.log("resetting password,", e)}
|
|
51
|
-
/>
|
|
52
|
-
);
|
|
53
|
-
};
|
|
54
|
-
export const ResetPassword = ResetPasswordTemplate.bind({});
|
|
55
|
-
ResetPassword.args = {
|
|
56
|
-
showError: false,
|
|
57
|
-
sent: false
|
|
58
|
-
};
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { SignInForm } from "../../../blocks/AuthForms";
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: "Blocks/Auth/Sign In",
|
|
6
|
-
component: [SignInForm],
|
|
7
|
-
argTypes: {
|
|
8
|
-
viaGoogle: {
|
|
9
|
-
default: true,
|
|
10
|
-
control: "boolean",
|
|
11
|
-
description: "Display the sign in via Google button",
|
|
12
|
-
table: { defaultValue: { summary: true } }
|
|
13
|
-
},
|
|
14
|
-
viaTwitter: {
|
|
15
|
-
default: true,
|
|
16
|
-
control: "boolean",
|
|
17
|
-
description: "Display the sign in via Twitter button",
|
|
18
|
-
table: { defaultValue: { summary: true } }
|
|
19
|
-
},
|
|
20
|
-
viaGithub: {
|
|
21
|
-
default: true,
|
|
22
|
-
control: "boolean",
|
|
23
|
-
description: "Display the sign in via Github button",
|
|
24
|
-
table: { defaultValue: { summary: true } }
|
|
25
|
-
},
|
|
26
|
-
showError: {
|
|
27
|
-
default: false,
|
|
28
|
-
control: "boolean",
|
|
29
|
-
description: "Display the error when auth fails",
|
|
30
|
-
table: { defaultValue: { summary: true } }
|
|
31
|
-
},
|
|
32
|
-
errorTitle: {
|
|
33
|
-
default: " ",
|
|
34
|
-
control: "text",
|
|
35
|
-
description: "The error text for the auth failure",
|
|
36
|
-
table: { defaultValue: { summary: "" } }
|
|
37
|
-
},
|
|
38
|
-
errorText: {
|
|
39
|
-
default: "Something went wrong",
|
|
40
|
-
control: "text",
|
|
41
|
-
description: "The error text for the auth failure",
|
|
42
|
-
table: { defaultValue: { summary: "Something went wrong" } }
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
const SignInTemplate = (args) => {
|
|
48
|
-
return (
|
|
49
|
-
<SignInForm
|
|
50
|
-
{...args}
|
|
51
|
-
error={args.showError}
|
|
52
|
-
texts={{
|
|
53
|
-
emailLabel: "Email",
|
|
54
|
-
emailPlaceholder: "Enter your email",
|
|
55
|
-
emailRequiredText: "Email is required",
|
|
56
|
-
emailInvalidText: "Invalid email address",
|
|
57
|
-
passwordLabel: "Password",
|
|
58
|
-
passwordPlaceholder: "Enter password",
|
|
59
|
-
passwordRequiredText: "Password is required",
|
|
60
|
-
forgotPasswordText: "Forgot password?",
|
|
61
|
-
newUserText: "New user?",
|
|
62
|
-
signUpText: "Sign up",
|
|
63
|
-
signInText: "Sign in",
|
|
64
|
-
googleButtonLabel: "Sign in with Google",
|
|
65
|
-
githubButtonLabel: "Sign in with Github",
|
|
66
|
-
twitterButtonLabel: "Sign in with Twitter"
|
|
67
|
-
}}
|
|
68
|
-
handleSignIn={(e) => console.log("singing in via email", e)}
|
|
69
|
-
handleForgotPassword={() => console.log("user forgot password")}
|
|
70
|
-
handleGoogleSignIn={() => console.log("signing in via google")}
|
|
71
|
-
handleGithubSignIn={() => console.log("signing in via github")}
|
|
72
|
-
handleTwitterSignIn={() => console.log("signing in via Twitter")}
|
|
73
|
-
handleRouteToSignUp={() => console.log("switching to sign up")}
|
|
74
|
-
viaGoogle={args.viaGoogle}
|
|
75
|
-
viaGithub={args.viaGithub}
|
|
76
|
-
viaTwitter={args.viaTwitter}
|
|
77
|
-
/>
|
|
78
|
-
);
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
export const SignIn = SignInTemplate.bind({});
|
|
82
|
-
SignIn.args = {
|
|
83
|
-
viaGoogle: true,
|
|
84
|
-
viaGithub: true,
|
|
85
|
-
viaTwitter: true,
|
|
86
|
-
showError: false,
|
|
87
|
-
errorTitle: "Error",
|
|
88
|
-
errorText: "Something went wrong"
|
|
89
|
-
};
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { SignUpForm } from "../../../blocks/AuthForms";
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: "Blocks/Auth/Sign Up",
|
|
6
|
-
component: [SignUpForm],
|
|
7
|
-
argTypes: {
|
|
8
|
-
viaGoogle: {
|
|
9
|
-
default: true,
|
|
10
|
-
control: "boolean",
|
|
11
|
-
description: "Display the sign in via Google button",
|
|
12
|
-
table: { defaultValue: { summary: true } }
|
|
13
|
-
},
|
|
14
|
-
viaTwitter: {
|
|
15
|
-
default: true,
|
|
16
|
-
control: "boolean",
|
|
17
|
-
description: "Display the sign in via Twitter button",
|
|
18
|
-
table: { defaultValue: { summary: true } }
|
|
19
|
-
},
|
|
20
|
-
viaGithub: {
|
|
21
|
-
default: true,
|
|
22
|
-
control: "boolean",
|
|
23
|
-
description: "Display the sign in via Github button",
|
|
24
|
-
table: { defaultValue: { summary: true } }
|
|
25
|
-
},
|
|
26
|
-
showError: {
|
|
27
|
-
default: false,
|
|
28
|
-
control: "boolean",
|
|
29
|
-
description: "Display the error when auth fails",
|
|
30
|
-
table: { defaultValue: { summary: true } }
|
|
31
|
-
},
|
|
32
|
-
errorTitle: {
|
|
33
|
-
default: " ",
|
|
34
|
-
control: "text",
|
|
35
|
-
description: "The error text for the auth failure",
|
|
36
|
-
table: { defaultValue: { summary: "" } }
|
|
37
|
-
},
|
|
38
|
-
errorText: {
|
|
39
|
-
default: "Something went wrong",
|
|
40
|
-
control: "text",
|
|
41
|
-
description: "The error text for the auth failure",
|
|
42
|
-
table: { defaultValue: { summary: "Something went wrong" } }
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
const SignUpTemplate = (args) => {
|
|
48
|
-
return (
|
|
49
|
-
<SignUpForm
|
|
50
|
-
{...args}
|
|
51
|
-
texts={{
|
|
52
|
-
fullNameLabel: "Full Name",
|
|
53
|
-
fullNamePlaceholder: "Fulan AlFulani",
|
|
54
|
-
fullNameRequiredText: "Full Name is required",
|
|
55
|
-
emailLabel: "Email",
|
|
56
|
-
emailPlaceholder: "Enter your email",
|
|
57
|
-
emailRequiredText: "Email is required",
|
|
58
|
-
emailInvalidText: "Invalid email address",
|
|
59
|
-
passwordLabel: "Password",
|
|
60
|
-
passwordPlaceholder: "Minimum 8 characters",
|
|
61
|
-
passwordRequiredText: "Password is required",
|
|
62
|
-
passwordTooShortText: "Password too short",
|
|
63
|
-
forgotPasswordText: "Forgot password?",
|
|
64
|
-
newUserText: "New user?",
|
|
65
|
-
signUpText: "Sign up",
|
|
66
|
-
signInText: "Sign in",
|
|
67
|
-
googleButtonLabel: "Sign in with Google",
|
|
68
|
-
githubButtonLabel: "Sign in with Github",
|
|
69
|
-
twitterButtonLabel: "Sign in with Twitter"
|
|
70
|
-
}}
|
|
71
|
-
error={args.showError}
|
|
72
|
-
viaGoogle={args.viaGoogle}
|
|
73
|
-
viaGithub={args.viaGithub}
|
|
74
|
-
viaTwitter={args.viaTwitter}
|
|
75
|
-
handleSignUp={() => console.log("singing up via email")}
|
|
76
|
-
handleGoogleSignUp={() => console.log("signing up via google")}
|
|
77
|
-
handleGithubSignUp={() => console.log("signing up via github")}
|
|
78
|
-
handleTwitterSignUp={() => console.log("signing up via Twitter")}
|
|
79
|
-
handleRouteToSignIn={() => console.log("switching to sign in")}
|
|
80
|
-
/>
|
|
81
|
-
);
|
|
82
|
-
};
|
|
83
|
-
export const SignUp = SignUpTemplate.bind({});
|
|
84
|
-
SignUp.args = {
|
|
85
|
-
viaGoogle: true,
|
|
86
|
-
viaGithub: true,
|
|
87
|
-
viaTwitter: true,
|
|
88
|
-
showError: false,
|
|
89
|
-
errorTitle: "Error",
|
|
90
|
-
errorText: "Something went wrong"
|
|
91
|
-
};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { ChargeWalletForm } from "../../../blocks/Payment";
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: "Blocks/Payment/Charge Wallet",
|
|
6
|
-
component: [ChargeWalletForm],
|
|
7
|
-
argTypes: {
|
|
8
|
-
viaWallet: { control: "boolean" },
|
|
9
|
-
viaApplePay: { control: "boolean" },
|
|
10
|
-
viaGooglePay: { control: "boolean" },
|
|
11
|
-
viaSTCPay: { control: "boolean" },
|
|
12
|
-
viaCreditCard: { control: "boolean" },
|
|
13
|
-
viaPayPal: { control: "boolean" }
|
|
14
|
-
},
|
|
15
|
-
args: {
|
|
16
|
-
viaWallet: true,
|
|
17
|
-
viaMada: true,
|
|
18
|
-
viaApplePay: true,
|
|
19
|
-
viaGooglePay: true,
|
|
20
|
-
viaSTCPay: true,
|
|
21
|
-
viaCreditCard: true,
|
|
22
|
-
viaPayPal: true
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
export const ChargeWallet = (args) => {
|
|
27
|
-
return <ChargeWalletForm {...args} />;
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
ChargeWallet.args = { currency: "SAR" };
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { CreditCardForm } from "../../../blocks/Payment";
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: "Blocks/Payment/Pay Via Credit Card",
|
|
6
|
-
component: [CreditCardForm],
|
|
7
|
-
argTypes: {
|
|
8
|
-
theme: {
|
|
9
|
-
options: ["primary", "secondary", "default"],
|
|
10
|
-
control: { type: "select" }
|
|
11
|
-
},
|
|
12
|
-
viaWallet: { control: "boolean" },
|
|
13
|
-
viaApplePay: { control: "boolean" },
|
|
14
|
-
viaGooglePay: { control: "boolean" },
|
|
15
|
-
viaSTCPay: { control: "boolean" },
|
|
16
|
-
viaCreditCard: { control: "boolean" },
|
|
17
|
-
viaPayPal: { control: "boolean" }
|
|
18
|
-
},
|
|
19
|
-
args: {
|
|
20
|
-
theme: "primary",
|
|
21
|
-
viaWallet: true,
|
|
22
|
-
viaMada: true,
|
|
23
|
-
viaApplePay: true,
|
|
24
|
-
viaGooglePay: true,
|
|
25
|
-
viaSTCPay: true,
|
|
26
|
-
viaCreditCard: true,
|
|
27
|
-
viaPayPal: true
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
export const PayViaCreditCard = (args) => {
|
|
32
|
-
return <CreditCardForm theme={args.theme} />;
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
PayViaCreditCard.args = {
|
|
36
|
-
theme: "secondary"
|
|
37
|
-
};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { PayWithWallet } from "../../../blocks/Payment";
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: "Blocks/Payment/Pay Via Wallet",
|
|
6
|
-
component: [PayWithWallet],
|
|
7
|
-
argTypes: {
|
|
8
|
-
walletBalance: { control: "number" }
|
|
9
|
-
},
|
|
10
|
-
args: {
|
|
11
|
-
walletBalance: 20
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
export const PayViaWallet = (args) => {
|
|
16
|
-
return <PayWithWallet {...args} />;
|
|
17
|
-
};
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { SelectPayment } from "../../../blocks/Payment";
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: "Blocks/Payment/Payment Selection",
|
|
6
|
-
component: [SelectPayment],
|
|
7
|
-
argTypes: {
|
|
8
|
-
theme: {
|
|
9
|
-
options: ["primary", "secondary", "default"],
|
|
10
|
-
control: { type: "select" }
|
|
11
|
-
},
|
|
12
|
-
viaWallet: { control: "boolean" },
|
|
13
|
-
viaApplePay: { control: "boolean" },
|
|
14
|
-
viaGooglePay: { control: "boolean" },
|
|
15
|
-
viaSTCPay: { control: "boolean" },
|
|
16
|
-
viaCreditCard: { control: "boolean" },
|
|
17
|
-
viaPayPal: { control: "boolean" }
|
|
18
|
-
},
|
|
19
|
-
args: {
|
|
20
|
-
theme: "primary",
|
|
21
|
-
viaWallet: true,
|
|
22
|
-
viaMada: true,
|
|
23
|
-
viaApplePay: true,
|
|
24
|
-
viaGooglePay: true,
|
|
25
|
-
viaSTCPay: true,
|
|
26
|
-
viaCreditCard: true,
|
|
27
|
-
viaPayPal: true
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
const PaymentSelectionTemplate = (args) => {
|
|
32
|
-
return (
|
|
33
|
-
<SelectPayment
|
|
34
|
-
{...args}
|
|
35
|
-
walletLabel="Wallet Balance"
|
|
36
|
-
handleWallet={() => console.log("paying via wallet")}
|
|
37
|
-
visaMasterLabel="Credit Card"
|
|
38
|
-
handleCreditCard={() => console.log("paying via Credit Card")}
|
|
39
|
-
madaLabel="Mada"
|
|
40
|
-
handleMada={() => console.log("paying via Mada")}
|
|
41
|
-
paypalLabel="PayPal"
|
|
42
|
-
handlePayPal={() => console.log("paying via PayPal")}
|
|
43
|
-
applePayLabel="Apple Pay"
|
|
44
|
-
handleApplePay={() => console.log("paying via Apple Pay")}
|
|
45
|
-
googlePayLabel="Google Pay"
|
|
46
|
-
handleGooglePay={() => console.log("paying via Google Pay")}
|
|
47
|
-
stcPayLabel="STC Pay"
|
|
48
|
-
handleSTCPay={() => console.log("paying via STC Pay")}
|
|
49
|
-
/>
|
|
50
|
-
);
|
|
51
|
-
};
|
|
52
|
-
export const PaymentSelection = PaymentSelectionTemplate.bind({});
|
|
53
|
-
PaymentSelection.args = {
|
|
54
|
-
viaGoogle: true,
|
|
55
|
-
viaGithub: true,
|
|
56
|
-
viaTwitter: true,
|
|
57
|
-
showError: false,
|
|
58
|
-
errorTitle: "Error",
|
|
59
|
-
errorText: "Something went wrong"
|
|
60
|
-
};
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { PricingPlans } from "../../../blocks/Pricing/PricingPlans";
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: "Blocks/Pricing/In Billing",
|
|
6
|
-
component: [PricingPlans],
|
|
7
|
-
argTypes: {
|
|
8
|
-
lang: {
|
|
9
|
-
options: ["ar", "en"],
|
|
10
|
-
control: { type: "select" }
|
|
11
|
-
}
|
|
12
|
-
},
|
|
13
|
-
args: {
|
|
14
|
-
lang: "ar"
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
export const InBilling = (args) => {
|
|
19
|
-
return (
|
|
20
|
-
<PricingPlans
|
|
21
|
-
{...args}
|
|
22
|
-
plans={[
|
|
23
|
-
{
|
|
24
|
-
title: "Free",
|
|
25
|
-
title_ar: "تجريبي",
|
|
26
|
-
subtitle: "For everyone",
|
|
27
|
-
subtitle_ar: "للعرب",
|
|
28
|
-
price: 0,
|
|
29
|
-
currency: "SAR",
|
|
30
|
-
cycleText: "Monthly",
|
|
31
|
-
buttonText: "Select Plan",
|
|
32
|
-
features: ["one", "two", "three"],
|
|
33
|
-
features_ar: ["واحد", "اثنين", "ثلاثة"]
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
title: "Intro",
|
|
37
|
-
title_ar: "تجريبي",
|
|
38
|
-
subtitle: "For beginners",
|
|
39
|
-
subtitle_ar: "للعرب",
|
|
40
|
-
selectedPlan: true,
|
|
41
|
-
price: 10,
|
|
42
|
-
currency: "SAR",
|
|
43
|
-
cycleText: "Monthly",
|
|
44
|
-
buttonText: "Current Plan",
|
|
45
|
-
features: ["one", "two", "three"],
|
|
46
|
-
features_ar: ["واحد", "اثنين", "ثلاثة"]
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
title: "Pro",
|
|
50
|
-
title_ar: "تجريبي",
|
|
51
|
-
subtitle: "For professionals",
|
|
52
|
-
subtitle_ar: "للعرب",
|
|
53
|
-
price: 30,
|
|
54
|
-
currency: "SAR",
|
|
55
|
-
cycleText: "Monthly",
|
|
56
|
-
buttonText: "Select Plan",
|
|
57
|
-
features: ["one", "two", "three"],
|
|
58
|
-
features_ar: ["واحد", "اثنين", "ثلاثة"]
|
|
59
|
-
}
|
|
60
|
-
]}
|
|
61
|
-
/>
|
|
62
|
-
);
|
|
63
|
-
};
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { PricingPlans } from "../../../blocks/Pricing/PricingPlans";
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: "Blocks/Pricing/In Landing",
|
|
6
|
-
component: [PricingPlans],
|
|
7
|
-
argTypes: {
|
|
8
|
-
lang: {
|
|
9
|
-
options: ["ar", "en"],
|
|
10
|
-
control: { type: "select" }
|
|
11
|
-
}
|
|
12
|
-
},
|
|
13
|
-
args: {
|
|
14
|
-
lang: "ar"
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
export const InLanding = (args) => {
|
|
19
|
-
return (
|
|
20
|
-
<PricingPlans
|
|
21
|
-
{...args}
|
|
22
|
-
plans={[
|
|
23
|
-
{
|
|
24
|
-
title: "Free",
|
|
25
|
-
title_ar: "تجريبي",
|
|
26
|
-
subtitle: "For everyone",
|
|
27
|
-
subtitle_ar: "للعرب",
|
|
28
|
-
price: 0,
|
|
29
|
-
currency: "SAR",
|
|
30
|
-
cycleText: "Monthly",
|
|
31
|
-
buttonText: "Select Plan",
|
|
32
|
-
features: ["one", "two", "three"],
|
|
33
|
-
features_ar: ["واحد", "اثنين", "ثلاثة"]
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
title: "Intro",
|
|
37
|
-
title_ar: "تجريبي",
|
|
38
|
-
subtitle: "For beginners",
|
|
39
|
-
subtitle_ar: "للعرب",
|
|
40
|
-
selectedPlan: false,
|
|
41
|
-
price: 10,
|
|
42
|
-
currency: "SAR",
|
|
43
|
-
cycleText: "Monthly",
|
|
44
|
-
buttonText: "Current Plan",
|
|
45
|
-
features: ["one", "two", "three"],
|
|
46
|
-
features_ar: ["واحد", "اثنين", "ثلاثة"]
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
title: "Pro",
|
|
50
|
-
title_ar: "تجريبي",
|
|
51
|
-
subtitle: "For professionals",
|
|
52
|
-
subtitle_ar: "للعرب",
|
|
53
|
-
price: 30,
|
|
54
|
-
currency: "SAR",
|
|
55
|
-
cycleText: "Monthly",
|
|
56
|
-
buttonText: "Select Plan",
|
|
57
|
-
features: ["one", "two", "three"],
|
|
58
|
-
features_ar: ["واحد", "اثنين", "ثلاثة"]
|
|
59
|
-
}
|
|
60
|
-
]}
|
|
61
|
-
/>
|
|
62
|
-
);
|
|
63
|
-
};
|