@akinon/pz-gpay 1.107.0 → 1.108.0-rc.87

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +58 -0
  2. package/package.json +1 -1
  3. package/readme.md +101 -42
  4. package/src/views/gpay-option.tsx +24 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @akinon/pz-gpay
2
2
 
3
+ ## 1.108.0-rc.87
4
+
5
+ ### Minor Changes
6
+
7
+ - 4c238479: ZERO-3623 :Enhance GPay integration: add loading state to custom UI rendering and error handling
8
+ - d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
9
+ - 16aff543: ZERO-3431: Add test script for redirect utility in package.json
10
+ - 64699d3ff: ZERO-2761: Fix invalid import for plugin module
11
+ - e974d8e8: ZERO-3406: Fix rc build
12
+ - 7eb51ca9: ZERO-3424 :Update package versions
13
+ - 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
14
+ - 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
15
+ - 2e436c13: ZERO-3389 :Update README.md for GPay component: enhance props documentation, add custom UI usage examples
16
+ - 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
17
+ - 33d4d0c9: ZERO-3615: remove custom not found
18
+
3
19
  ## 1.107.0
4
20
 
5
21
  ## 1.106.0
@@ -38,6 +54,8 @@
38
54
 
39
55
  ## 1.91.0
40
56
 
57
+ > > > > > > > origin/ZERO-3418
58
+
41
59
  ## 1.90.0
42
60
 
43
61
  ### Minor Changes
@@ -49,6 +67,46 @@
49
67
  ### Minor Changes
50
68
 
51
69
  - 57a6184: ZERO-3332 :Add data-testid attribute to GPay payment button for testing
70
+ - 64699d3f: ZERO-2761: Fix invalid import for plugin module
71
+ - 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
72
+ - 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
73
+
74
+ ## 1.89.0-rc.9
75
+
76
+ ### Minor Changes
77
+
78
+ - 57a6184: ZERO-3332 :Add data-testid attribute to GPay payment button for testing
79
+ - 64699d3f: ZERO-2761: Fix invalid import for plugin module
80
+ - 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
81
+ - 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
82
+
83
+ ## 1.89.0-rc.8
84
+
85
+ ## 1.89.0-rc.7
86
+
87
+ ## 1.89.0-rc.6
88
+
89
+ ## 1.89.0-rc.5
90
+
91
+ ## 1.89.0-rc.4
92
+
93
+ ## 1.89.0-rc.3
94
+
95
+ ## 1.89.0-rc.2
96
+
97
+ ### Minor Changes
98
+
99
+ - 57a6184: ZERO-3332 :Add data-testid attribute to GPay payment button for testing
100
+
101
+ ## 1.89.0-rc.1
102
+
103
+ ## 1.89.0-rc.0
104
+
105
+ ### Minor Changes
106
+
107
+ - 64699d3f: ZERO-2761: Fix invalid import for plugin module
108
+ - 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
109
+ - 33377cf: ZERO-3267: Refactor import statement for ROUTES in error-page component
52
110
 
53
111
  ## 1.88.0
54
112
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/pz-gpay",
3
- "version": "1.107.0",
3
+ "version": "1.108.0-rc.87",
4
4
  "license": "MIT",
5
5
  "main": "src/index.tsx",
6
6
  "peerDependencies": {
package/readme.md CHANGED
@@ -10,9 +10,86 @@ npx @akinon/projectzero@latest --plugins
10
10
 
11
11
  ```
12
12
 
13
- ### Example Usage
13
+ ## GPAY
14
14
 
15
- ##### File Path: src/views/checkout/steps/payment/options/gpay.tsx
15
+ The `GPayOption` component provides GarantiPay (GPay) payment integration within the checkout process. It supports both default UI rendering and a fully customized UI via the `customUIRender` prop.
16
+
17
+ ### Props
18
+
19
+ | Prop | Type | Required | Description |
20
+ | --- | --- | --- | --- |
21
+ | `containerClassName` | `string` | Optional | Custom class for the root `<form>` container |
22
+ | `titleClassName` | `string` | Optional | Class for the title (`<h1>` element) |
23
+ | `descriptionClassName` | `string` | Optional | Class for the description container |
24
+ | `buttonClassName` | `string` | Optional | Class for the submit button |
25
+ | `translations` | `Partial<GPayTranslations>` | Optional | Override default title, description, button and error texts |
26
+ | `customUIRender` | `function` | Optional | Function to override the internal rendering logic and provide custom layout |
27
+
28
+ ---
29
+
30
+ ### `customUIRender` Parameters
31
+
32
+ | Parameter | Type | Description |
33
+ | --- | --- | --- |
34
+ | `handleSubmit` | `UseFormHandleSubmit<GPayForm>` | Wrapper for your `onSubmit` function with validation |
35
+ | `onSubmit` | `SubmitHandler<GPayForm>` | Submit logic that handles payment integration internally |
36
+ | `control` | `Control<GPayForm>` | React Hook Form control object, useful for controlled inputs |
37
+ | `errors` | `FieldErrors<GPayForm>` | Validation errors, helpful for form field error handling |
38
+ | `translations` | `GPayTranslations` | Final translation object with merged defaults and overrides |
39
+
40
+ ### Default Translations
41
+
42
+ ```javascript
43
+ {
44
+ title: 'Pay with GarantiPay',
45
+ description: [
46
+ 'Click on the "GarantiPay" button. Guarantee for payment you will be redirected to the payment page.',
47
+ 'Log in to your account with your username and password on the Garanti Pay page. If you do not have a Garanti Pay membership, create a new membership you can create.',
48
+ 'Complete the payment process by selecting your card and payment type.'
49
+ ],
50
+ button: 'Pay with GarantiPay',
51
+ error: 'An error occurred during payment'
52
+ }
53
+ ```
54
+
55
+ ### Usage Examples
56
+
57
+ ```bash
58
+ /src/views/checkout/steps/payment/options/gpay.tsx
59
+ ```
60
+
61
+ ## Default Usage
62
+
63
+ ```javascript
64
+ import PluginModule, { Component } from '@akinon/next/components/plugin-module';
65
+
66
+ const GPay = () => {
67
+ return (
68
+ <PluginModule
69
+ component={Component.GPay}
70
+ props={{
71
+ translations: {
72
+ title: 'Pay with GarantiPay',
73
+ description: [
74
+ 'Click on the "Pay with GarantiPay" button. You will be redirected to the payment page.',
75
+ 'Log in with your credentials. If you don’t have an account, create one.',
76
+ 'Select your card and complete the payment process.'
77
+ ],
78
+ button: 'Pay Now'
79
+ },
80
+ containerClassName: 'bg-gray-50 p-6 rounded-lg',
81
+ titleClassName: 'text-xl font-bold',
82
+ descriptionClassName: 'text-sm text-gray-700',
83
+ buttonClassName: 'bg-primary text-white py-2'
84
+ }}
85
+ />
86
+ );
87
+ };
88
+
89
+ export default GPay;
90
+ ```
91
+
92
+ ## Custom UI Usage
16
93
 
17
94
  ```javascript
18
95
  import PluginModule, { Component } from '@akinon/next/components/plugin-module';
@@ -24,27 +101,31 @@ const GPay = () => {
24
101
  props={{
25
102
  translations: {
26
103
  title: 'Pay with GarantiPay',
27
- description:
28
- 'Click the button below to pay for your order using GarantiPay.',
104
+ description: [
105
+ 'Click the button below to pay for your order using GarantiPay.'
106
+ ],
29
107
  button: 'Pay Now'
30
108
  },
31
- containerClassName: 'bg-gray-50 rounded-md',
32
- titleClassName: 'text-2xl font-bold',
33
- descriptionClassName: 'text-sm',
34
- buttonClassName: 'bg-primary text-white',
35
- customUIRender: ({ handleSubmit, onSubmit, translations }) => (
36
- <form onSubmit={handleSubmit(onSubmit)} className="p-6 bg-white">
37
- <h2 className="text-xl font-bold mb-2">{translations.title}</h2>
38
- <div className="text-sm mb-4">
109
+ customUIRender: ({ handleSubmit, onSubmit, translations, loading }) => (
110
+ <form
111
+ onSubmit={handleSubmit(onSubmit)}
112
+ className="p-6 bg-white rounded-md space-y-4"
113
+ >
114
+ <h2 className="text-2xl font-semibold">{translations.title}</h2>
115
+ <ul className="text-sm text-gray-700 list-disc pl-4">
39
116
  {translations.description.map((item, index) => (
40
117
  <li key={index}>{item}</li>
41
118
  ))}
42
- </div>
119
+ </ul>
43
120
  <button
44
121
  type="submit"
45
- className="w-full h-9 bg-black-300 text-white"
122
+ className="w-full h-10 bg-black text-white rounded"
46
123
  >
47
- {translations.button}
124
+ {loading ? (
125
+ <LoaderSpinner className="w-5 h-5" />
126
+ ) : (
127
+ translations.button
128
+ )}
48
129
  </button>
49
130
  </form>
50
131
  )
@@ -56,36 +137,14 @@ const GPay = () => {
56
137
  export default GPay;
57
138
  ```
58
139
 
59
- ##### File Path: src/app/[commerce]/[locale]/[currency]/orders/garanti-pay-redirect/page.tsx
140
+ ## Garanti Pay Redirect
141
+
142
+ ```bash
143
+ /src/app/[commerce]/[locale]/[currency]/orders/garanti-pay-redirect/page.tsx
144
+ ```
60
145
 
61
146
  ```javascript
62
147
  import { GarantiPayRedirect } from '@akinon/pz-gpay/src/routes/garanti-pay-redirect';
63
148
 
64
149
  export default GarantiPayRedirect;
65
150
  ```
66
-
67
- ### Props
68
-
69
- | Properties | Type | Description |
70
- | --- | --- | --- |
71
- | translations | object | The translations of the component. |
72
- | containerClassName | string | The CSS class to apply to the container. |
73
- | titleClassName | string | The CSS class to apply to the title. |
74
- | descriptionClassName | string | The CSS class to apply to the description. |
75
- | buttonClassName | string | The CSS class to apply to the button. |
76
- | customUIRender | function | Custom render function for the component. Receives form handlers and translations. |
77
-
78
- ### Default Translations
79
-
80
- ```javascript
81
- {
82
- title: 'Pay with GarantiPay',
83
- description: [
84
- 'Click on the "GarantiPay" button. Guarantee for payment you will be redirected to the payment page.',
85
- 'Log in to your account with your username and password on the Garanti Pay page. If you do not have a Garanti Pay membership, create a new membership you can create.',
86
- 'Complete the payment process by selecting your card and payment type.'
87
- ],
88
- button: 'Pay with GarantiPay',
89
- error: 'An error occurred during payment'
90
- }
91
- ```
package/src/views/gpay-option.tsx CHANGED
@@ -44,6 +44,7 @@ type GPayOptionProps = {
44
44
  control: Control<GPayForm>;
45
45
  errors: FieldErrors<GPayForm>;
46
46
  translations: GPayTranslations;
47
+ loading: boolean;
47
48
  }) => ReactElement;
48
49
  };
49
50
 
@@ -78,19 +79,32 @@ export function GPayOption(props: GPayOptionProps) {
78
79
  });
79
80
 
80
81
  const [setPaymentOption] = useSetPaymentOptionMutation();
81
- const [setGPayMethod] = useSetGPayMethodMutation();
82
- const [setCompleteGPay] = useSetCompleteGPayMutation();
82
+ const [setGPayMethod, { isLoading: isGPayMethodLoading }] =
83
+ useSetGPayMethodMutation();
84
+ const [setCompleteGPay, { isLoading: isCompleteGPayLoading }] =
85
+ useSetCompleteGPayMutation();
83
86
 
84
87
  const onSubmit: SubmitHandler<GPayForm> = async () => {
85
- if (isPaymentStepBusy) return;
86
-
87
88
  setFormError(null);
88
- await setGPayMethod();
89
89
 
90
- const response = await setCompleteGPay().unwrap();
90
+ try {
91
+ await setGPayMethod().unwrap();
92
+ } catch (e) {
93
+ setFormError(translations.error);
94
+ return;
95
+ }
91
96
 
92
- if (response?.errors?.non_field_errors) {
93
- setFormError(response.errors.non_field_errors);
97
+ try {
98
+ const data = await setCompleteGPay().unwrap();
99
+ if (data?.errors?.non_field_errors) {
100
+ setFormError(data.errors.non_field_errors);
101
+ }
102
+ } catch (e: any) {
103
+ const msg =
104
+ e?.data?.errors?.non_field_errors ??
105
+ e?.data?.detail ??
106
+ translations.error;
107
+ setFormError(msg);
94
108
  }
95
109
  };
96
110
 
@@ -113,7 +127,8 @@ export function GPayOption(props: GPayOptionProps) {
113
127
  onSubmit,
114
128
  control,
115
129
  errors: formErrors,
116
- translations
130
+ translations,
131
+ loading: isGPayMethodLoading || isCompleteGPayLoading || isPaymentStepBusy
117
132
  });
118
133
  }
119
134