@riosst100/pwa-marketplace 3.2.7 → 3.2.9

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 (19) hide show
  1. package/package.json +1 -1
  2. package/src/components/LiveChat/MessagesModal.js +33 -146
  3. package/src/components/LiveChat/liveChat.js +12 -42
  4. package/src/components/Messages/index.js +1 -0
  5. package/src/components/Messages/messages.js +352 -0
  6. package/src/components/Messages/messages.module.css +36 -0
  7. package/src/components/Messages/messagesPage.js +345 -0
  8. package/src/components/MessagesPage/index.js +1 -0
  9. package/src/components/MessagesPage/messagesPage.js +50 -0
  10. package/src/components/MessagesPage/messagesPage.module.css +35 -0
  11. package/src/components/RFQPage/quoteDetail.js +39 -14
  12. package/src/intercept.js +7 -0
  13. package/src/overwrites/venia-ui/lib/components/Footer/footer.js +12 -3
  14. package/src/talons/Messages/useMessages.js +0 -0
  15. package/src/talons/MessagesPage/messagesPage.gql.js +299 -0
  16. package/src/talons/MessagesPage/useMessagesPage.js +87 -0
  17. package/src/talons/RFQ/rfq.gql.js +13 -0
  18. package/src/talons/Seller/useSeller.js +4 -2
  19. package/src/talons/SellerMegaMenu/useSellerMegaMenu.js +0 -11
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@riosst100/pwa-marketplace",
3
3
  "author": "riosst100@gmail.com",
4
- "version": "3.2.7",
4
+ "version": "3.2.9",
5
5
  "main": "src/index.js",
6
6
  "pwa-studio": {
7
7
  "targets": {
package/src/components/LiveChat/MessagesModal.js CHANGED
@@ -177,164 +177,51 @@ const MessagesModal = ({
177
177
  <button onClick={onClose} aria-label='Close' className='text-gray-600 text-[30px] hover:text-black'>×</button>
178
178
  </div>
179
179
  <div className='flex gap-4'>
180
- {/* Sidebar list thread (shown only when there are threads) */}
181
- {sortedThreads.length > 0 && (
182
- <div className='w-[320px] border rounded-[6px] overflow-hidden'>
183
- <div className='px-3 py-2 border-b font-medium flex items-center justify-between'>
184
- <span>{formatMessage({ id: 'messages.sidebar.title', defaultMessage: 'Messages' })}</span>
185
- <button
186
- type='button'
187
- onClick={() => {
188
- setIsComposing(true);
189
- setSelectedThread(null);
190
- }}
191
- className='text-[12px] px-2 py-1 rounded border border-[#FF6E26] text-[#FF6E26] hover:bg-[#FF6E26] hover:text-white'
192
- >
193
- {formatMessage({ id: 'messages.compose.newMessage', defaultMessage: 'Send New Message' })}
194
- </button>
195
- </div>
196
- <div className='max-h-[420px] overflow-y-auto'>
197
- {(!isComposing && !hasLoadedOnce && loading && sortedThreads.length === 0) ? (
198
- <div className='p-3 text-sm text-gray-500'>{formatMessage({ id: 'messages.loading', defaultMessage: 'Loading…' })}</div>
199
- ) : (
200
- sortedThreads.map(t => (
201
- <button
202
- key={t.message_id}
203
- onClick={() => setSelectedThread(t)}
204
- className={cn('w-full text-left px-3 py-2 border-b hover:bg-gray-50',
205
- selectedThread?.message_id === t.message_id && 'bg-gray-100')}
206
- >
207
- <div className='flex items-center justify-between gap-2'>
208
- <div className='text-[13px] font-semibold line-clamp-1'>{t.subject || formatMessage({ id: 'messages.noSubject', defaultMessage: 'No Subject' })}</div>
209
- <div className='text-[12px] flex-shrink-0'>
210
- {renderStatusBadge(t.status)}
211
- </div>
212
- </div>
213
- <div className='text-[11px] text-gray-500 mt-1'>{formatMessage({ id: 'messages.createdAt', defaultMessage: 'Created:' })} {new Date(t.created_at).toLocaleString()}</div>
214
- </button>
215
- ))
216
- )}
217
- </div>
218
- </div>
219
- )}
220
180
 
221
181
  {/* Detail percakapan */}
222
182
  <div className='flex-1 flex flex-col'>
223
183
  {/* Compose new message (shown only when composing OR when no thread exists) */}
224
- {(isComposing || sortedThreads.length === 0) && (
225
- <form onSubmit={handleSubmitNewMessage} className='mb-3 rounded-[6px] p-1 flex flex-col gap-2'>
226
- <div className='text-[13px] font-semibold flex items-center justify-between'>
227
- <span>{formatMessage({ id: 'messages.compose.header', defaultMessage: 'Create New Message' })}</span>
228
- {(sortedThreads.length > 0) && (
229
- <button
230
- type='button'
231
- onClick={() => setIsComposing(false)}
232
- className='text-[12px] px-2 py-1 rounded border text-gray-600 hover:bg-gray-50'
233
- >
234
- {formatMessage({ id: 'messages.compose.cancel', defaultMessage: 'Cancel' })}
235
- </button>
236
- )}
237
- </div>
238
- <input
239
- type='text'
240
- className='border border-gray-100 rounded px-3 py-2 outline-none focus:ring-2 focus:ring-[#FF6E26]'
241
- placeholder={formatMessage({ id: 'messages.compose.subjectPlaceholder', defaultMessage: 'Subject' })}
242
- value={newSubject}
243
- onChange={(e) => setNewSubject(e.target.value)}
244
- />
245
- <textarea
246
- rows={3}
247
- className='border border-gray-100 rounded px-3 py-2 outline-none focus:ring-2 focus:ring-[#FF6E26]'
248
- placeholder={formatMessage({ id: 'messages.compose.contentPlaceholder', defaultMessage: 'Write a message to the seller…' })}
249
- value={newContent}
250
- onChange={(e) => setNewContent(e.target.value)}
251
- />
252
- <div className='flex justify-end'>
184
+
185
+ <form onSubmit={handleSubmitNewMessage} className='mb-3 rounded-[6px] p-1 flex flex-col gap-2'>
186
+ <div className='text-[13px] font-semibold flex items-center justify-between'>
187
+ <span>{formatMessage({ id: 'messages.compose.header', defaultMessage: 'Create New Message' })}</span>
188
+ {/* {(sortedThreads.length > 0) && (
253
189
  <button
254
- type='submit'
255
- className={cn('px-4 py-2 rounded-[6px] text-white disabled:opacity-50 disabled:cursor-not-allowed', isSendingNew ? 'bg-gray-500 text-gray-700' : 'bg-[#FF6E26]')}
256
- disabled={isSendingNew}
257
- aria-busy={isSendingNew}
190
+ type='button'
191
+ onClick={() => setIsComposing(false)}
192
+ className='text-[12px] px-2 py-1 rounded border text-gray-600 hover:bg-gray-50'
258
193
  >
259
- {isSendingNew
260
- ? formatMessage({ id: 'messages.compose.sending', defaultMessage: 'Send Message...' })
261
- : formatMessage({ id: 'messages.compose.send', defaultMessage: 'Send Message' })}
194
+ {formatMessage({ id: 'messages.compose.cancel', defaultMessage: 'Cancel' })}
262
195
  </button>
263
- </div>
264
- </form>
265
- )}
266
- {!isComposing && sortedThreads.length > 0 && (
267
- <div className='flex items-center justify-between mb-2'>
268
- <div>
269
- <div className='text-[14px] font-semibold'>{selectedThread?.subject || formatMessage({ id: 'messages.noSubject', defaultMessage: 'No Subject' })}</div>
270
- <div className='text-[12px] text-gray-600 flex items-center gap-2'>
271
- <span>{formatMessage({ id: 'messages.detail.status', defaultMessage: 'Status:' })}</span>
272
- {selectedThread && renderStatusBadge(selectedThread.status)}
273
- </div>
196
+ )} */}
274
197
  </div>
275
- {selectedThread && (
198
+ <input
199
+ type='text'
200
+ className='border border-gray-100 rounded px-3 py-2 outline-none focus:ring-2 focus:ring-[#FF6E26]'
201
+ placeholder={formatMessage({ id: 'messages.compose.subjectPlaceholder', defaultMessage: 'Subject' })}
202
+ value={newSubject}
203
+ onChange={(e) => setNewSubject(e.target.value)}
204
+ />
205
+ <textarea
206
+ rows={3}
207
+ className='border border-gray-100 rounded px-3 py-2 outline-none focus:ring-2 focus:ring-[#FF6E26]'
208
+ placeholder={formatMessage({ id: 'messages.compose.contentPlaceholder', defaultMessage: 'Write a message to the seller…' })}
209
+ value={newContent}
210
+ onChange={(e) => setNewContent(e.target.value)}
211
+ />
212
+ <div className='flex justify-end'>
276
213
  <button
277
- onClick={handleDeleteThread}
278
- disabled={isDeleting}
279
- className='text-[12px] px-3 py-1 rounded border text-red-600 border-red-300 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2'
214
+ type='submit'
215
+ className={cn('px-4 py-2 rounded-[6px] text-white disabled:opacity-50 disabled:cursor-not-allowed', isSendingNew ? 'bg-gray-500 text-gray-700' : 'bg-[#FF6E26]')}
216
+ disabled={isSendingNew}
217
+ aria-busy={isSendingNew}
280
218
  >
281
- {isDeleting && (
282
- <span className='w-3 h-3 border-2 border-red-200 border-t-red-500 rounded-full animate-spin' aria-hidden='true'></span>
283
- )}
284
- {isDeleting
285
- ? formatMessage({ id: 'messages.detail.deleting', defaultMessage: 'Deleting...' })
286
- : formatMessage({ id: 'messages.detail.delete', defaultMessage: 'Delete Message' })}
219
+ {isSendingNew
220
+ ? formatMessage({ id: 'messages.compose.sending', defaultMessage: 'Send Message...' })
221
+ : formatMessage({ id: 'messages.compose.send', defaultMessage: 'Send Message' })}
287
222
  </button>
288
- )}
289
- </div>
290
- )}
291
- {!isComposing && sortedThreads.length > 0 && (
292
- <div className='border rounded-[6px] p-3 flex-1 min-h-[320px]'>
293
- {selectedThread ? (
294
- <ChatContent chatData={chatData} />
295
- ) : (
296
- <div className='text-sm text-gray-500'>{formatMessage({ id: 'messages.detail.selectPrompt', defaultMessage: 'Select a message to view the conversation.' })}</div>
297
- )}
298
- </div>
299
- )}
300
- {!isComposing && sortedThreads.length > 0 && selectedThread && (
301
- <form onSubmit={handleSubmitReply} className='mt-3 flex gap-2'>
302
- {(() => {
303
- const statusNum = Number(selectedThread.status);
304
- const isReplyEnabled = statusNum === 1 || statusNum === 2;
305
- const disabledReason = statusNum === 0
306
- ? formatMessage({ id: 'messages.reply.disabled.closed', defaultMessage: 'Conversation closed' })
307
- : statusNum === 3
308
- ? formatMessage({ id: 'messages.reply.disabled.done', defaultMessage: 'Conversation finished' })
309
- : formatMessage({ id: 'messages.reply.disabled.generic', defaultMessage: 'Cannot send a reply' });
310
- return (
311
- <>
312
- <input
313
- type='text'
314
- className='flex-1 border rounded px-3 py-2 outline-none focus:ring-2 focus:ring-[#FF6E26] disabled:bg-gray-100 disabled:text-gray-500'
315
- placeholder={isReplyEnabled ? formatMessage({ id: 'messages.reply.placeholder', defaultMessage: 'Write a reply…' }) : disabledReason}
316
- value={replyText}
317
- onChange={(e) => setReplyText(e.target.value)}
318
- disabled={!isReplyEnabled}
319
- title={!isReplyEnabled ? disabledReason : undefined}
320
- aria-disabled={!isReplyEnabled}
321
- />
322
- <button
323
- type='submit'
324
- disabled={!isReplyEnabled || isReplying}
325
- title={!isReplyEnabled ? disabledReason : undefined}
326
- className={cn('px-4 py-2 rounded-[6px] text-white disabled:opacity-50 disabled:cursor-not-allowed', isReplying ? 'bg-gray-500 text-gray-700' : 'bg-[#FF6E26]')}
327
- aria-busy={isReplying}
328
- >
329
- {isReplying
330
- ? formatMessage({ id: 'messages.reply.sending', defaultMessage: 'Sending...' })
331
- : formatMessage({ id: 'messages.reply.send', defaultMessage: 'Send' })}
332
- </button>
333
- </>
334
- );
335
- })()}
223
+ </div>
336
224
  </form>
337
- )}
338
225
  </div>
339
226
  </div>
340
227
  </div>
package/src/components/LiveChat/liveChat.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { FormattedMessage } from 'react-intl';
3
3
  import cn from 'classnames';
4
- import { ArrowSquareDown } from 'iconsax-react';
4
+ import { Messages3 } from 'iconsax-react';
5
5
  import ChatContent from './chatContent';
6
6
  import { Send } from 'iconsax-react';
7
7
  import Button from '@magento/venia-ui/lib/components/Button';
@@ -71,68 +71,38 @@ const liveChat = (props) => {
71
71
  const { open, setOpen, chatData } = props;
72
72
  const [{ isSignedIn }] = useUserContext();
73
73
 
74
- const dataTabs =
75
- [
76
- {
77
- id: isSignedIn ? 'login-chat' : 'guest-chat',
78
- title: isSignedIn ? 'Login Chat' : 'Guest Chat',
79
- content: <ChatContentComponent chatData={chatData} />
80
- },
81
- {
82
- id: !isSignedIn ? 'login-chat' : 'guest-chat',
83
- title: !isSignedIn ? 'Login Chat' : 'Guest Chat',
84
- content: isSignedIn ? <ChatContentComponent chatData={chatData} /> : <LoginComponent />
85
- }
86
- ];
87
-
88
74
  return (
89
75
  <>
90
76
  <div
91
77
  className={cn(
92
- 'bg-white flex flex-col w-full max-w-[380px] h-[520px] fixed right-6 animate-anima-slide-up z-50 shadow-type-1',
93
- open ? 'animate-anima-slide-up bottom-0' : 'animate-anima-slide-down bottom-[-468px]'
78
+ 'flex flex-col w-full max-w-[150px] fixed z-50',
79
+ 'bottom-[30px] right-[30px]'
94
80
  )}
95
81
  >
96
- <div
97
- className='bg-darkblue-900 p-4 rounded-t-md cursor-pointer flex justify-between items-center'
98
- onClick={() => setOpen(!open)}
82
+ <Link
83
+ className='bg-darkblue-900 p-4 px-6 rounded-[40px] cursor-pointer flex justify-between items-center'
84
+ to={'/messages'}
99
85
  >
100
86
  <span className='text-white font-medium'>
101
87
  <FormattedMessage
102
- id={'chat.ChatWith'}
88
+ id={'chat.messageButton'}
103
89
  defaultMessage={
104
- 'Chat with Gundam Info'
90
+ 'Messages'
105
91
  }
106
92
  />
107
93
  </span>
108
94
  <span>
109
- <ArrowSquareDown
110
- size="14"
95
+ <Messages3
96
+ size="24"
111
97
  className={
112
98
  cn(
113
- 'transition-all text-white',
114
- open ? 'rotate-180' : '',
99
+ 'transition-all text-white'
115
100
  )
116
101
  }
117
102
  />
118
103
  </span>
119
104
 
120
- </div>
121
- <div
122
- className={cn(
123
- 'border border-gray-100 p-4 w-full h-full flex flex-col gap-3',
124
- 'max-h-[468px]'
125
- )}
126
- >
127
- <Tabs
128
- data={dataTabs}
129
- tabContentWrapperClassName='!p-0 h-full'
130
- hasContent
131
- tabWrapperClassName='justify-around'
132
- rootClassName="mb-0"
133
- tabTitleClassName="pt-0 pb-2 text-[12px]"
134
- />
135
- </div>
105
+ </Link>
136
106
  </div>
137
107
  <style jsx="true">
138
108
  {`
package/src/components/Messages/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default } from './messages';